Can't find the DOM element. Which locator to use?

Libraries Browser
1

Using Browser Library, I’m trying to locate the DOM element for the sign-in button. Which locator to use?

< button class=“account-button js_offcanvas_open u-hide@screen-xl-up” data-analytics-id=“px_common_click” data-analytics-tag=“header menu:profile icon” data-offcanvas-target=“ID2offcanvas-container–right”>
< span class=“srt”>Account menu
< svg version=“1.1” viewBox=“0 0 24 24” aria-hidden=“true” class=“svg-inline–bi bi-account bi-lg disable-pointer-events” data-test=“icon-account” focusable=“false” >< path d=“M12 24c-3 0-7.1-.7-9-2.5-.6-.6-1-1.4-1-2.2 0-3.8 2.6-7.2 6.3-8.6C6.9 9.6 6 7.9 6 6c0-3.3 2.7-6 6-6s6 2.7 6 6c0 1.9-.9 3.6-2.3 4.7 3.6 1.4 6.3 4.8 6.3 8.6 0 3.4-6 4.7-10 4.7zm0-12c-4.3 0-8 3.3-8 7.3 0 .1 0 .4.4.7 1.1 1.1 4.3 2 7.6 2 4.5 0 8-1.5 8-2.7 0-4-3.7-7.3-8-7.3zm0-10C9.8 2 8 3.8 8 6s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4z”>

I tried several options:
Click id=“px_common_click”
Get Element By Role button contains id=“px_common_click”

Any help is welcome. Thanks

2

This button seems to not have an id. It only has an data-analytics-id.
So you can e.g. use an CSS locator with an attribute like

button[data-analytics-id="px_common_click"]

1 Like
3

I often use the text label on a button to click it.
Have you read the chapter about locating elements and the text locators listed there?

https://marketsquare.github.io/robotframework-browser/Browser.html#Finding%20elements

4

I will try and make sense of the text page you’ve shared.

Locator found with inspect Firefox

css=.offcanvas-header__close-btn

Error

  • locator resolved to hidden <button data-analytics-id=“px_common_click” data-analyti…>…< /button >
5

Then I tried

text=“Inloggen”

Error: locator.click: Error: strict mode violation: locator(‘text=“Inloggen”’) resolved to 2 elements:
1) Inloggen aka locator(‘li’).filter({ hasText: ‘Inloggen’ }).locator(‘a’)
2) Inloggen aka locator(‘[data-test=“login-link”]’)

Call log:

  • waiting for locator(‘text=“Inloggen”’)
6

When you have a locator resolve to 2 elements, it is possible to write the locator in an xpath form with an index number specified to reach a single one:

(//button[data-analytics-id=“px_common_click”])[1]

7

However, similar to your other post, it doesn’t seem this application is too well built for testability. I’d also suggest:

  1. Talking to your developers if this is built internally to add unique IDs or names to the elements you need to automate.
  2. Consider a different software if this is built externally & off the shelf.

Also, please look at the surrounding, parent elements. I.e. you may find a uniquely identifiable panel which contains the button & that you could use something like:
//div[@id=‘uniqueIdHere’]/button

8

To any future member reading through this thread, just some extra advice here:

  1. Please consider that sites can be multi-lingual & it’s best to check if your app has scope for this. Text-based recognition might likely not be the best option.
  2. Also to check for whitespace & casing, the same with any other text comparison.
  3. Locators using ID/name are fastest, then CSS locators, then finally XPath locators