In a previous response that titusfortner had provided before it was deleted, Selenium Easy shared an article titled "Working with Shadow DOM Elements using Webdriver". This article revealed how to access shadow elements through JavaScript and interact with their children as usual.
However, in order to make it work with Watir, I had to make modifications to the Watir::Browser class. While this is a temporary solution, I am exploring options for a more permanent fix. Here is an example of how it currently works:
require 'watir'
# Custom implementation to handle checking the tag name of the shadow root
class Watir::Browser
def wrap_element(scope, element)
Watir.element_class_for(element.tag_name.downcase).new(scope, element: element)
rescue Selenium::WebDriver::Error::UnknownError # need a better rescue
Watir::Element.new(scope, element: element)
end
end
def expand_root_element(element, browser)
browser.execute_script("return arguments[0].shadowRoot", element)
end
browser = Watir::Browser.new
# Simulating a download process
browser.goto('https://chromedriver.storage.googleapis.com/2.33/chromedriver_win32.zip')
browser.goto('chrome://downloads')
# Navigating through the shadow DOM to find download items
download_manager = browser.element(css: 'downloads-manager')
shadow_download_manager = expand_root_element(download_manager, browser)
download_items = shadow_download_manager.elements(css: '#downloads-list downloads-item')
shadow_download_items = download_items.map { |s| expand_root_element(s, browser) }
# Locating a specific download item based on file name
expected_file = /chromedriver_win32/
download = shadow_download_items.find { |s| s.span(id: 'name').text_content =~ expected_file }
# Taking action on the download - for instance, waiting for the download to complete
download.link(id: 'show').wait_until_present