CODEWITHSUNDEEP
rubyseleniumwatirshadow-dom
DQuang
DQuang

Reputation: 23

Ruby: get web elements inside the Shadow-Root DOM

I'm new to Ruby automation test using cucumber and selenium-webdriver. I received the source code automation from another guy. The way he find element on page some thing looks like: element(:error_message) { browser.elements(class: 'input-invalidate') }

Now I need to access the element inside a ShadowRoot, did some researches but could not get answer for the Ruby code. Below picture is an example, I'd like to get the div tag with id="maincontainer" inside that shadowroot, anyone can help please?

Thanks you shadowroot element

Upvotes: 1

Views: 1344

Answers (2)

Luka Vladika
Luka Vladika

Reputation: 76

Also verify that you have selenium devtools gem installed, and at least chrome v96 with newest chromedriver

This will work like Titus pointed out when locating element with Selenium

browser = Watir::Browser.new
browser.goto "http://watir.com/examples/shadow_dom.html"

shadow_host = browser.driver.find_element(id: 'shadow_host')
shadow_root = shadow_host.shadow_root
shadow_content = shadow_root.find_element(id: 'shadow_content')

You can also locate element with Watir and then call shadow_root on underlying Selenium element

shadow_host = browser.div(id: 'shadow_host') #Watir::Div
shadow_root = shadow_host.wd.shadow_root

edit: this should also work in theory - converting ShadowRoot to Watir element, but it breaks afterwards.

browser.goto "http://watir.com/examples/shadow_dom.html"
shadow_host = browser.div(id: 'shadow_host') #Watir::Div
shadow_root = shadow_host.wd.shadow_root #Selenium::WebDriver::ShadowRoot
watir_shadow = browser.div(element: shadow_root) #Watir::Div
watir_shadow.divs.count #undefined method `keys' for nil:NilClass

I might be doing something wrong :) best to ask @titusfortner

/watirs/watir-7.1.0/lib/watir/locators/element/selector_builder.rb:73:in `merge_scope?'
/watirs/watir-7.1.0/lib/watir/locators/element/selector_builder.rb:50:in `normalize_selector'
/watirs/watir-7.1.0/lib/watir/locators/element/selector_builder.rb:28:in `build'
/watirs/watir-7.1.0/lib/watir/element_collection.rb:47:in `build'
/watirs/watir-7.1.0/lib/watir/element_collection.rb:18:in `initialize'
/watirs/watir-7.1.0/lib/watir/container.rb:28:in `new'
/watirs/watir-7.1.0/lib/watir/container.rb:28:in `elements'

Upvotes: 0

titusfortner
titusfortner

Reputation: 4194

This is now supported in Selenium 4.0, here's a working example:

driver.get('http://watir.com/examples/shadow_dom.html')

shadow_host = driver.find_element(id: 'shadow_host')
shadow_root = shadow_host.shadow_root
shadow_content = shadow_root.find_element(id: 'shadow_content')

Upvotes: 4

Related Questions