Unable to interact with shadow dom using JavaScript

Support for iMacros. The iMacros software is the unique solution for automating every activity inside a web browser, for data extraction and web testing.
Forum rules
Before asking a question or reporting an issue:
1. Please review the list of FAQ's.
2. Use the search box (at the top of each forum page) to see if a similar problem or question has already been addressed.
3. Try searching the iMacros Wiki - it contains the complete iMacros reference as well as plenty of samples and tutorials.
4. We can respond much faster to your posts if you include the following information: CLICK HERE FOR IMPORTANT INFORMATION TO INCLUDE IN YOUR POST
Post Reply
gheasman
Posts: 3
Joined: Fri Jun 11, 2021 9:26 am

Unable to interact with shadow dom using JavaScript

Post by gheasman » Fri Jun 11, 2021 10:04 am

Hi,

I'm using iMacros to interact with a website that contains a Shadow Dom to display the site header. I was unable to get iMacros to interact with the shadow dom in chrome or firefox using standard commands so I turned to writing a javascript function to do it. However the URL GOTO=javascript command will not run my javascript function regardless of how I format the javascript. I'll paste the javascript and vb code I am using below, any help would be much appreciated :D

iMacros version: 12.6.505.4525
iMacros license: iMacros Enterprise Player
Chrome version: 91.0.4472.77
Firefox version: 89
Windows version: Windows Server 2012 R2

Code: Select all

        Dim scriptString As String = "var root = document.querySelector('b2b-shared-header').shadowRoot;
                                        var navItems = root.querySelector('.sdx-container').querySelector('.nav__mainnav .nav__secondary').querySelectorAll('.nav-item');
                                        var navItem = navItems[navItems.length - 1];

                                        navItem.querySelector('.nav-link.text-uppercase > i').click();

                                        setTimeout(function(){ 
	                                        var languageMenuItems = navItem.querySelector('.b2b-flyout').querySelectorAll('li');

		                                        for(var i = 0; i < languageMenuItems.length; i++){
			                                        if(languageMenuItems[i].textContent == 'English'){
				                                        languageMenuItems[i].click();
				                                        break;
			                                        }
		                                        }
                                        }, 2000);"

        Dim scriptStringFormatted = scriptString.Replace(Constants.vbCrLf, "")
        scriptStringFormatted = scriptStringFormatted.Replace(" ", "<SP>")

        Dim languageJSMacro As New StringBuilder()
        languageJSMacro.Append("CODE")
        languageJSMacro.AppendLine("URL GOTO=javascript:" & scriptStringFormatted)
chivracq
Posts: 9806
Joined: Sat Apr 13, 2013 1:07 pm
Location: Amsterdam (NL)

Re: Unable to interact with shadow dom using JavaScript

Post by chivracq » Fri Jun 11, 2021 11:10 am

gheasman wrote:
Fri Jun 11, 2021 10:04 am
Hi,

I'm using iMacros to interact with a website that contains a Shadow Dom to display the site header. I was unable to get iMacros to interact with the shadow dom in chrome or firefox using standard commands so I turned to writing a javascript function to do it. However the URL GOTO=javascript command will not run my javascript function regardless of how I format the javascript. I'll paste the javascript and vb code I am using below, any help would be much appreciated :D

Code: Select all

iMacros version: 12.6.505.4525
iMacros license:  iMacros Enterprise Player
Chrome version: 91.0.4472.77
Firefox version: 89
Windows version: Windows Server 2012 R2

Code: Select all

        Dim scriptString As String = "var root = document.querySelector('b2b-shared-header').shadowRoot;
                                        var navItems = root.querySelector('.sdx-container').querySelector('.nav__mainnav .nav__secondary').querySelectorAll('.nav-item');
                                        var navItem = navItems[navItems.length - 1];

                                        navItem.querySelector('.nav-link.text-uppercase > i').click();

                                        setTimeout(function(){ 
	                                        var languageMenuItems = navItem.querySelector('.b2b-flyout').querySelectorAll('li');

		                                        for(var i = 0; i < languageMenuItems.length; i++){
			                                        if(languageMenuItems[i].textContent == 'English'){
				                                        languageMenuItems[i].click();
				                                        break;
			                                        }
		                                        }
                                        }, 2000);"

        Dim scriptStringFormatted = scriptString.Replace(Constants.vbCrLf, "")
        scriptStringFormatted = scriptStringFormatted.Replace(" ", "<SP>")

        Dim languageJSMacro As New StringBuilder()
        languageJSMacro.Append("CODE")
        languageJSMacro.AppendLine("URL GOTO=javascript:" & scriptStringFormatted)

The iMacros Versions are missing from your FCI for both Browsers, they will be:
- iMacros for CR v10.1.1, CR91, FIO v10.1.1.
- iMacros for FF v10.1.0, FF89, FIO v10.1.1.

I've pinged @TechSup to have a Look at your Thread as I'm not very knowledgeable with the Func you are using, but I would have some mini-Remark(s)...:
- Alright, you set the whole Function in just one Line with the "Replace(Constants.vbCrLf, "")", correct..., and you replace all Spaces with "<SP>" (with "Replace(" ", "<SP>")"), correct...! Well, I hope/take for granted this 'Replace()' Method works "globally"...!? :|
- In the same "Spirit", there is "a Chance" that all Single Quotes might need to be escaped... (with \'). (I'm not sure...)

And concerning those 2 Lines:

Code: Select all

        languageJSMacro.Append("CODE")
        languageJSMacro.AppendLine("URL GOTO=javascript:" & scriptStringFormatted)
A Colon is missing from the "CODE" Command, (=> "CODE:"), and the on-the-fly Script needs to start directly on the same Line, and not after a 'CR' if that's what your 'AppendLine()' is doing, when playing that on-the-fly Script with 'iimPlay()'... :idea:
(Or you can use 'iimPlayCode()' instead, which takes care of the "CODE:" Keyword... :idea: )

And I would say, maybe try first with some "simple" mini 'scrollBy()' for example, to make sure you have the "correct" Syntax to build and execute an 'URL GOTO=javascript:' Command/Function... ('alert()' cannot be "trusted" as a Test, it doesn't work ("directly"), at least on FF...) :idea:
- (F)CI(M) = (Full) Config Info (Missing): iMacros + Browser + OS (+ all 3 Versions + 'Free'/'PE'/'Trial').
- I don't even read the Qt if that (required) Info is not mentioned...!
- Script & URL help a lot for more "educated" Help...
gheasman
Posts: 3
Joined: Fri Jun 11, 2021 9:26 am

Re: Unable to interact with shadow dom using JavaScript

Post by gheasman » Fri Jun 11, 2021 1:20 pm

Apologies for the missing info.

iMacros for Chrome version: 10.1.1
iMacros for Firefox version: 10.1.0.1485

I tried escaping the single quotes in the JavaScript code and fixing the "CODE:" statement and that hasn't worked :( . I'll give running a more simple script a try now.
chivracq
Posts: 9806
Joined: Sat Apr 13, 2013 1:07 pm
Location: Amsterdam (NL)

Re: Unable to interact with shadow dom using JavaScript

Post by chivracq » Fri Jun 11, 2021 1:59 pm

gheasman wrote:
Fri Jun 11, 2021 1:20 pm
Apologies for the missing info.

Code: Select all

iMacros for Chrome version: 10.1.1
iMacros for Firefox version: 10.1.0.1485
I tried escaping the single quotes in the JavaScript code and fixing the "CODE:" statement and that hasn't worked :( . I'll give running a more simple script a try now.

OK for your FCI, I had already "guessed" the correct Versions... :wink:

Then OK, oops-oops-oops, sorry, I'm a bit "stupid", ah-ah...!, ... or not awake...!, but the 'CODE:' Keyword is absolutely not needed with the 'URL GOTO=javascript:' Syntax, it is only needed for the 'iimPlay()' Command, ah-ah-ooooops...! :oops:

=> This would be for example a "valid" very simple Statement (that I use myself), in pure '.iim':

Code: Select all

URL GOTO=javascript:window.scrollBy(0,600)
- (F)CI(M) = (Full) Config Info (Missing): iMacros + Browser + OS (+ all 3 Versions + 'Free'/'PE'/'Trial').
- I don't even read the Qt if that (required) Info is not mentioned...!
- Script & URL help a lot for more "educated" Help...
gheasman
Posts: 3
Joined: Fri Jun 11, 2021 9:26 am

Re: Unable to interact with shadow dom using JavaScript

Post by gheasman » Fri Jun 11, 2021 2:06 pm

Running a more simple command like window.scrollBy() worked, so I wonder if there's something wrong with the formatting of my JavaScript.

To test I decided to format the string manually, wrap it in a function called changeLang() and put it in to the URL command which made iMacros get stuck while attempting to run the command. Below is the URL GOTO command with the JavaScript:

Code: Select all

URL GOTO=javascript:function<SP>changeLang(){var<SP>root<SP>=<SP>document.querySelector(\'b2b-shared-header\').shadowRoot;<SP>var<SP>navItems<SP>=<SP>root.querySelector(\'.sdx-container\').querySelector(\'.nav__mainnav<SP>.nav__secondary\').querySelectorAll(\'.nav-item\');<SP>var<SP>navItem<SP>=<SP>navItems[navItems.length<SP>-<SP>1];<SP>navItem.querySelector(\'.nav-link.text-uppercase<SP>><SP>i\').click();<SP>setTimeout(function(){<SP>var<SP>languageMenuItems<SP>=<SP>navItem.querySelector(\'.b2b-flyout\').querySelectorAll(\'li\');<SP>for(var<SP>i<SP>=<SP>0;<SP>i<SP><<SP>languageMenuItems.length;<SP>i++){<SP>if(languageMenuItems[i].textContent<SP>==<SP>\'English\'){<SP>languageMenuItems[i].click();<SP>break;<SP>}<SP>},<SP>2000);<SP>}<SP>changeLang();
Tom, Tech Support
Posts: 3711
Joined: Mon May 31, 2010 4:59 pm

Re: Unable to interact with shadow dom using JavaScript

Post by Tom, Tech Support » Mon Jun 14, 2021 2:11 pm

Hi gheasman,

I seem to recall some recent discussion about using iMacros to access shadow dom elements in some other thread/forum that I am trying to track down. In the meantime, I noticed that there are no iMacros licenses registered to MDSL, would you know why that is?
Regards,

Tom, iMacros Support
Post Reply