I am using browser library to automate our angular app. However i am not unable to click a button inside this shadow-root. Tried all locators and nothing seem to be working or its not identifying the locator at all
This is my page and //button[@id = ‘undefined’] is my locator
Did you tried to use the id:
id=undefined
and instead of
Click Button try Click Element
No, I am using browser library which has only ‘Click’ Keyword not selenium Library
Hi Meganathan,
That’s interesting, I was expecting you might need to use something like the Frames >>> syntax, but according to the Browser Library documentation for WebComponents and Shadow DOM
Playwright and so also Browser are able to do automatic piercing of Shadow DOMs and therefore are the best automation technology when working with WebComponents.
So what you did should have worked perhaps you found a bug with the automatic piercing at least with xpath.
have you tried (id strategy from Finding elements):
Click id=undefined
If that doesn’t work, I guess the next thing you need to do is mention your version numbers for Robot Framework, Browser Library, Playwright, Node.js etc and hopefully one of the devs can determine if it’s a bug?
Dave.
Hi @megakrish
When you do the click against the button with the current locator, what error/exception are you returned? Could be helpful…
Thanks
try to wait for the element to be visible and then perform a click
Wait Until Element Is Visible id=undefined timeout=2s
Click id=undefined
Hi @hajar-elkhalidi,
FYI your suggestion is not completely wrong however, there are 2 issues with your suggestion as is:
Click will wait 30 seconds by defaultWait Until Element Is Visible is a SeleniumLibrary keyword not Browser LibraryUnfortunately if that really was the issue your answer could increase the fails as Click will wait 30 seconds by default, though the default can be changed with Set Browser Timeout
If you want to know more refer to Implicit waiting
Your suggestion is useful for when you need to wait longer than the default timeout, for example if you wanted to leave the timeout at 30 sec but have 1 problematic button that typically takes >1 min then you could use Wait For Condition to wait for a longer timeout (e.g. 5 min)
Dave.
thank you, i didn’t know about the default timeout
Thanks for your solution, Yes I am using xpath and may be I should have tried with id. however there are multiple value with the same id, how to pass index with id strategy?
Hi Meganathan,
Ah ok, that wasn’t clear from your original question. Actually not that it helps you now, that should be considered a defect as it’s stated in the html specification for id that:
id = name
This attribute assigns a name to an element. This name must be unique in a document.
It looks looks the aut-id contains the unique name that should have been used for id but the only way you could use that is with XPATH
In the meantime is the button text unique? or is there a css class that’s unique to the button so that you could use the text= or css= selectors?
I strongly recommend you raise a defect for the non unique id’s, as this will help you in the future, plus it’s always good to encourage dev teams to follow standards (prevents lots of issues in the future)
Dave.
Just an FYI
I referenced the html 4.01 standard, here’s the equivelent from the the HTML 5 standard:
The
idattribute specifies its element’s unique identifier (ID).There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.
An element’s unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragments, as a way to target an element when scripting, and as a way to style a specific element from CSS.
Looks like it wasn’t mentioned but Browser library does not pierce shadow-root with xpath locator, so best option is to use css. So something like css=button[aut-id=eid-id-providers-list-add-ovider-button] probably should work.