Read our blogs, tips and tutorials
Try our exercises or test your skills
Watch our tutorial videos or shorts
Take a self-paced course
Read our recent newsletters
License our courseware
Book expert consultancy
Buy our publications
Get help in using our site
548 attributed reviews in the last 3 years
Refreshingly small course sizes
Outstandingly good courseware
Whizzy online classrooms
Wise Owl trainers only (no freelancers)
Almost no cancellations
We have genuine integrity
We invoice after training
Review 30+ years of Wise Owl
View our top 100 clients
Search our website
We also send out useful tips in a monthly email newsletter ...
Posted by Andrew Gould on 03 April 2021
Learn how to access elements in a Shadow DOM on a web page. You'll see how to use javascript to access the shadow root element and then search within the Shadow DOM using Selenium's FindElement methods.
See our full range of VBA training resources, or test your knowledge of VBA with one of our VBA skills assessment tests.
There are no files which go with this video.
There are no exercises for this video.
You can increase the size of your video to make it fill the screen like this:
Play your video (the icons shown won't appear until you do), then click on the full screen icon which appears as shown above.
When you've finished viewing a video in full screen mode, just press the Esc key to return to normal view.
To improve the quality of a video, first click on the Settings icon:
Make sure yoiu're playing your video so that the icons shown above appear, then click on this gear icon.
Choose to change the video quality:
Click as above to change your video quality.
The higher the number you choose, the better will be your video quality (but the slower the connection speed):
Don't choose the HD option shown unless your connection speed is fast enough to support it!
Is your Wise Owl speaking too slowly (or too quickly)? You can also use the Settings menu above to change your playback speed.
From: | edthehorse |
When: | 25 Jan 22 at 22:30 |
RE Shadow DOM.
Brilliant video as usual.
This video of the shadow dom itself I found useful:
From: | Richard63 |
When: | 07 Dec 21 at 17:08 |
I use:
Chrome: Version 96.0.4664.93 (Offizieller Build) (32-Bit)
Driver: ChromeDriver_win32_96.0.4664.45.exe
The goal is to get out the actual path of the downloads directory for chrome
I can’t access the “#shadow-root” part.
If I understand it correct, I need loop to each of the 5 different “#shadow-root” levels
Regards, Richard
From: | Andrew G |
When: | 08 Dec 21 at 08:46 |
Hi Richard,
I believe that Chrome v96 has introduced a change which affects the ExecuteScript method in SeleniumBasic. I'm having similar issues with manipulating the print preview window.
I'm afraid that I don't know of a solution at the moment, sorry.
From: | Dhriman |
When: | 16 Feb 22 at 18:54 |
Hi Andrew,
Do you have any workaround for the Chrome 96 + issue while trying to locate elements inside Shadow root.
I am unable to find the solution to this problem anywhere online.
Thanks in advance..!!
From: | Andrew G |
When: | 17 Feb 22 at 08:18 |
Hi! Sorry no, I haven't found a solution to this yet. This thread indicates that the official Selenium release has solved this from v4.1. The VBA implementation of Selenium isn't officially supported so it may be that this will never be resolved. Annoying.
From: | geophysguy |
When: | 22 Aug 21 at 23:19 |
Andrew,
I've watched all of the 57 series of videos several times and have learned a great deal and continue to come back to them when i get stuck, however finding this shadow host is stumping me and I haven't found an answer here or anywhere else on the net. So I thought I might go to the source and ask the guru himself.
Here's what i've tried stepping through(F8) the macro to ensure everything is loaded with Selenium Basic of a google chrome pdf with a shadow dom. I'm after a table that is in the chrome browser window that after my macro runs I have to Ctrl Copy and then run another macro to organize and format the table data as I need it. It's a secure website and the rest of the macro runs fine opening 5 tabs in the browser finding all of the elements I need but I'd like to automate this last repetetive task so I would not have to stop Ctrl C and V the data into excel and run another macro. The HTML is:
<body>
<pdf-viewer id="viewer"></pdf-viewer> flex
#shadow-root (open)
<div id="container"> flex
<div id="sidenav-container">
<div id="main">
<embed id="plugin" type="application/x-google-chrome-pdf" ...> '<-After this
Dim ShadowHost As Selenium.WebElement
Dim ShadowRoot As Selenium.WebElement
With ch
Set ShadowHost = .FindElement(FindBy.XPath("/html/body/pdf-viewer"))
Set ShadowHost = .FindElement(FindBy.Css("#viewer"))
End With
Both the above tried seperatly give:
Run-Time error 7
NOSuchElementError
Element not found for XPath=/html/body/pdf-viewer
or Css=#viewer
'I tried this and didn't get an error:
Set ShadowHost = .FindElementByXPath("/html/body/*")
'BUT the Locals window says ShadowHost tagname = "embed"
'which is the table I'm after!
'but using devtools find gives:
<pdf-viewer id="viewer"></pdf-viewer> flex == $0
Then I run the following:
Set ShadowRoot = .ExecuteScript(Script:="retutn arguments[0].ShadowRoot", arguments:=ShadowHost"))
'and i get:
Run-time error '17':
JavaScriptError
javascript error: Unexpected identifier
'So I tried:
Set ShadowRoot = .ExecuteScript(Script:="retutn arguments[0].ShadowRoot", arguments:=.FindElementByXPath("/html/body/*")"))
'and got the same error 17
'The element has no other shadow-root above but I can't select anything but body.
'I've tried js ch.querySelector("#viewer")
'and a bunch more but can't get the ShadowHost selected.
'So i thought ok I'll just Ctrl A, Ctrl C, .getclipboard like this:
Set ShadowHost = .FindElementByTag("body").SendKeys(.keys.Control, "a")
Set ShadowHost = .FindElementByTag("body").SendKeys(.keys.Control, "c")
Set dataObj = New MSForms.DataObject
Debug.Print dataObj.GetFromClipboard
'Gives me Compile error mismatch
'So tried this:
.FindElementByXPath("/html/body/*").AsTable.ToExcel ShDstMLS_ReCOLORADO.Range("M13")
'and got:
Run-Time error "59":
UnexpectedTagNameError
Unrecognized tag name.
Expected=table.tbody
Got=embed
'which is what the local window says the tagname of the WebElement is.
So in conclusion, i have 4 questions:
Why the errors:
7?
17?
Compile error mismatch?
59?
ok 5 questions:
Any ideas as to what's going on and can you help a faithful but frustrated follower?
Thanks for any of the questions you might answer,
geophysguy
PS: There is very little on the net on Ctrl copy and paste, using Action or Actions class (do these 2 classes exist in Selenium Basic?)
or SendKeys for Selenium Basic for VBA, plenty with JS JavaScript C and Python but there's enough differences to make trying to answer
a question on one's own very frustrating. Would love to see a video with the Selenium Basic keyboard commands. Guess this counts as 6 questions.
Thanks again.
From: | Andrew G |
When: | 23 Aug 21 at 15:42 |
That's a lot of questions!
I believe that working with a PDF is significantly different to working with regular web pages. The pdf-viewer element doesn't appear to be exposed to the DOM (as you've discovered!).
It seems that there are two main ways to do this (neither of which I've attempted):
1) Write a javascript method in your VBA code to use a plugin to copy information from the PDF
https://stackoverflow.com/questions/56648375/how-to-scrape-a-particular-text-from-pdf-using-selenium-with-vba
2) Download the PDF file and use the Acrobat VBA library to manipulate it
https://stackoverflow.com/questions/28835164/copying-data-from-multiple-pdf-files
https://community.adobe.com/t5/acrobat-sdk/accessing-a-pdf-file-through-vba/m-p/9264497
https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/
Sorry I can't be any more help than that but I hope it points you in the right direction!
Kingsmoor House
Railway Street
GLOSSOP
SK13 2AA
Landmark Offices
99 Bishopsgate
LONDON
EC2M 3XD
Holiday Inn
25 Aytoun Street
MANCHESTER
M1 3AE
© Wise Owl Business Solutions Ltd 2024. All Rights Reserved.