Comment on page
Human users just see the page and use their intelligent brains to find the right element to interact with.
Computers on the contrary need more specific instructions to know what to click. "Selector" is a way of describing a specific element on your page that can be clearly identified.
For example, a selector can describe an instruction to
Find an element with a text "Add to cart"or
Find the first element with id "primary-button-submit"
Manual selectors --> You create them on your own using your own human intelligence. Sometimes manual selectors is the only way of creating a reliable automation testing
If you are recording the tests, you don't need to be worried about selectors too much. During the recording, BugBug will automatically create several selectors and decide which is the best.
You can also enter your own custom XPath or CSS selector. In the details of selected test step choose "Use custom selector".
BugBug can understand selectors in the following formats:
- CSS selectors, for example
- XPath selectors, for example
Manual selectors sometimes is the best way of creating stable automated tests in complex apps.
For example you if you have a long table with buttons inside each row, you may need to create a selector that first points to the right row and then to the right action button.
Learn the basics of HTML
To write reliable selectors you need a basic knowledge of HTML and understand what are tags, attributes, parents and children. You can learn it in our extensive tutorial in the no-code XPath selector tool.
To create robust tests, your app should be coded with additional special attributes that are dedicated to testing automation. The usual convention is to use
BugBug will automatically prioritize such robust selectors when it recognizes them. So if you're working on a complex app, we highly recommend that you talk to your front-end developers and ask them to add such attributes. This will also make their life easier because they will see from the code that an element is a subject of testing automation.
Common problems with selectors are:
- It is too specific, contains some kind of unique ID that is changing every time you run the test
- It is pointing to more than one element and some of them are not visible (for example your page has some hidden buttons with
- Click the button near the selector field
- Open Chrome dev tools
- Click cmd+f
- Paste the selector in the search field
- Chrome will highlight the element that is matching your selector
Some selectors are just finding any element that contains a specific text. Here's an example of such a selector:
//DIV[normalize-space(text())="Create account in Example Project"]