Common selectors issues
Last updated
Last updated
Here's a typical problem to solve: you have an app with list of orders in a table. Each row has a checkbox in it. You want to create a test automation that clicks the checkbox in the second row.
The problem is that there is no way to write a unique selector directly to this checkbox. There are more checkboxes on the list and we don't want to rely on the order of elements. We don't want the second checkbox, we want a specific checkbox.
There is nothing unique in the HTML element itself. Wait, is that class attribute unique? It is, but it's not good for test automation selectors. It's a random string that changes with every app deployment.
XPath traversing comes to the rescue! We will guide you step by step how to create a reliable selector, that first identifies the right row in the table and then finds the checkbox inside. The result selector will "traverse" the parents and children in 3 steps.
Find a specific text in the table
Find the parent table row by searching ancestors of the element from step 1
Find the checkbox inside the row
Here's how to do this with our no-code tool. You need to use "Then find..." button and connect these 3 steps into one sophisticated and powerful XPath selector:
You can apply the same technique to multiple other test cases.
Make sure your selector uses the same capitalisation of characters as in the page. Pay attention to uppercase and lowercase letters! Ideally copy-paste the text from HTML via Chrome developer tools.
Your app may have 2 different button "duplicates", one dedicated for desktop and one for mobile. One is always hidden, depending on the window width.
In such situation, the best solution is to create 2 separate tests for mobile and desktop with 2 different selectors.
Or try refactoring the code so that there is only one button present at a time - not hiding, but removing the button from the document.
You can also try to write a clunky selector that matches the 2 buttons, but somehow remove the hidden button with the not operator, for example:
In the above example we created a selector, now we should check if it works.
Open this demo app and login with "demo / demo", then go to "Orders" tab
Open Chrome developer tools
Click Ctrl+F to open the "Find" box (Cmd+F on Mac)
Paste the selector
Click enter
The matching element will be highlighted
Click enter several times to make sure that this is the only element that has a match
Here's a quick video that shows the whole XPath selector verification process in Chrome:
