Unable to click a button using browser library inside shadow root

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.

1 Like

Hi @megakrish
When you do the click against the button with the current locator, what error/exception are you returned? Could be helpful…
Thanks

1 Like

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 default
  • Wait Until Element Is Visible is a SeleniumLibrary keyword not Browser Library

Unfortunately 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

1 Like

Hi @hajar-elkhalidi

SeleniumLibrary has one as well:

Dave.

1 Like

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.

1 Like

Just an FYI

I referenced the html 4.01 standard, here’s the equivelent from the the HTML 5 standard:

The id attribute 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.

1 Like