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"
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 decide about the priorities of automatic selectors and configure your custom attributes in project settings.
Use custom attributes for selectors
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 data-test or data-test-id attributes.
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.
The "element not found" error
When your test fails with an error "element not found" or "element not visible", this might be caused by an incorrect selector.
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 depending on the order of elements, but the order of elements changes (like a list of products in e-commerce might change every day)
It is pointing to more than one element and some of them are not visible (for example your page has some hidden buttons with display: none)
If this text changes in your app, you will get an "element not found" error. The element is in fact still there, but the selector does not work anymore. You can manually update the selector or re-record this step.