Click action: strict mode violation - resolved to 2 elements

Libraries Browser
1

Hi again!

I have read this Get Text topic about the same issue, but honestly, it didn’t help me. Previously I got an advice about xpaths and how to not make them too long. I tried that. That’s why I tried following:

Click css=span.omni-button-wrapper >> text=“Tallenna ja sulje” (Save and close in English)
Background:

  • There is just one that kind of button in the page

  • There are other similar buttons in every document I should test

I tried to solve problem modifying xpath shorter. I don’t have an experience about that, so this looks possibly horrifying for you. However, here it is:

Click xpath=//*[@id=“omni-body”]//…//…//add-case//omni-toolbar//omni-tooltip[2]/div/button

Surprisingly, I got similar result with this. I’d like to ask two things:
First: how do I recognize the correct element in this kind of situations
The second: Is there any materiel what I could use to study. I mean, how I could create precise and correct selectors in these cases.

I am using Browser Guidebook, Playwright guides and so on, but with this experience of mine generic guidelines are little bit hard to bring in practice. Especially when real life is more complicated than examples.

Thank you.
Kalle

image

2

Hi Kalle,

The answer is in your html

it’s in a span within the button, not on the button itself

A simple xpath that should get what you want is this:

//button/span[text()='Tallenna ja sulje']/..

The /.. says to go back to the parent of the span (the button)

There is another way you where can put the span part inside the [] (below) but I think the one above is easier to understand

//button[span[text()='Tallenna ja sulje']]

I’m not sure how to do the same with css selectors, as I just use xpath.

Dave.

3

You can use the SelectorsHub browser extension as a starting point for creating selectors. It does a decent job in generating better selectors than the default browser developer tools in general.

If doing it manually, you need to view the HTML markup and work your way up from the element you are trying to target. See what kind of parent/wrapper elements (sometimes referred as containers) are available. Sometimes those have an id or a class attribute that helps with restricting the selector to that particular section of the page.

SelectorsHub works in a similar way: It tries to find a selector that is specific-enough but omits all the unnecessary parts. Sometimes the end result is good as-is. Sometimes you can improve it manually.

4

Thanks for the advice. I’ll try that.

5

//button[contains(.,“Tallenna ja sulje”)]

When contains function is used with “.” it searches a string within an element, and all elements below it. So you can use it to locate any element above it.

1 Like
6

Hi Kalle,

Ever tried asking the devs to add (data-test-)id’s to the buttons (and input field, etc.)?
This makes your life easier and the test code cleaner.

7

Hi

I have asked about that possibility and hopefully this discussion leads to change. We are going to talk about these challenges with development teams soon.