Polymer UI element shadow root does not support automation using selenium webdriver

Question

I am facing an issue with automating polymer ui page using selenium webdriver. The reason that is blocking to start selenium automation is "shadow root" element in the polymer components. kindly suggest with some examples or ideas to overcome the issue. Does selenium supports polymer ui automation?

Answer 1

No selenium doesn't support it. Either you will have to use javascript executer in selenium using documant.querySelector(...).shadowRoot or use "/deep/" combinator. The best is "/deep/ combinator" as querySelector is annoying when you are dealing with multilevel shadow DOM.

I was able to access all the shadow roots elements by

driver.find_elements_by_css_selector('body/deep/.layout.horizontal.center')

This will have access to the element with compound class name "layout horizontal center" regardless of the number of shadow roots it has.

But this only works in chrome driver and I see notes "/deep/" is a deprecated approach.

Edited on 13th Feb 2019 You can use this project https://github.com/sukgu/shadow-automation-selenium . Developed for ruby Watir framework originally and working successfully, but you can use this for selenium webdriver existing framework or any existing webdriver that supports calling javascript methods. It will shorten your testcase development time and maintenance time also. It makes your code more readable and sorted that will help you in debug time.

Worth investing your 5 minutes reading the description that shows how easy it is to integrate with your current framework or a new framework.