LogoLogo
BugBug HomepageContact SupportLoginSign up free
  • Documentation
  • Tutorial for beginners
  • Best practices
  • BugBug App FAQ
  • Quick Start
    • What is test automation?
    • Start for free
    • Create your first project
    • Install Chrome extension
    • Create and run the tests
  • Creating Tests
    • Your first test
    • Independent tests
    • Duplicating tests
    • New test from here
  • Recording tests steps
    • BugBug overlay
    • Recording clicks
    • Recording hover
    • Recording keyboard typing
    • Recording assertions
    • Recording drag & drop
    • Record from here
    • Re-recording steps
    • Recording pop-up window actions
    • Using keyboard shortcuts
  • Editing tests
    • Grouping steps
    • Components
    • Manually editing steps
    • Actions
    • Assertions
    • Tabs & iframes
    • Variables
    • Local variables
    • Profiles
    • Custom JavaScript actions
  • Running tests
    • Running the tests
    • Statuses
    • Run (locally)
    • Run and pause here
    • Run in cloud
    • Schedules
    • Parallel runs
    • Running via API
    • Test your local build or protected web page using ngrok
  • Preventing failed tests
    • Waiting conditions
    • Smart click
    • Smart scroll
    • Selectors
    • Timeout
    • Delay / Sleep
    • Project settings
  • Debugging Tests
    • Runs history
    • Screenshots
    • Debug in Chrome
    • Breakpoint (run step-by-step)
  • Organizing tests
    • Naming your tests
    • Searching tests
    • Suites
    • Components
    • Projects
  • Workflow Tips
    • Edit & Rewind
    • Changing the test screen size
    • Multiple environments
    • Testing registration & login
    • Integrating with build systems
    • Mobile version testing
  • Collaboration
    • Organizations
    • Inviting team members
    • Alerts
      • Sending email notification
      • Sending webhook
      • Sending Slack message
      • Sending Teams message
  • Integrations
    • CLI
    • Zapier
    • Slack
    • GitHub
    • Bitbucket
    • Gitlab
    • Trello
    • Jira
  • Your account
    • Account settings
    • Edit your name and email
    • Forgot password
    • Manage Subscriptions
    • Account FAQ
  • Troubleshooting
    • Prohibited behaviors
    • Updating Chrome extension
    • Clear cookies and site data for BugBug
    • Testing basic auth password protected websites
    • Common selectors issues
    • CAPTCHA in automation testing
    • Cloud tests sometimes failing
    • IPs list of cloud runners
    • VPN or a Firewall
    • A/B tests
    • Report a bug
  • IN-DEPTH GUIDES
    • Beginners tutorial to automation testing
    • XPath Selectors without coding
    • Tech Leader's Guide to Automation Testing
    • Test automation guides
  • FREE TOOLS
    • BugBug Testing Inbox
    • Example SaaS App
    • No-code XPath Selector Builder
  • Other links
    • BugBug Homepage
    • Pricing
    • Terms & conditions
    • Privacy Policy
Powered by GitBook
On this page
  • Automatic vs. manual selectors
  • Automatic selectors
  • Manual selectors
  • Nested selectors
  • Set priority of automatic selectors
  • Use custom attributes for selectors
  • The "element not found" error
  • Tips on fixing selectors
  • Use Chrome debugging
  • Copy selector to clipboard
  • Prevent incorrect selectors
  • Fix text-based selectors

Was this helpful?

  1. Preventing failed tests

Selectors

PreviousSmart scrollNextTimeout

Last updated 3 months ago

Was this helpful?

What is a selector?

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"

Automatic vs. manual selectors

Automatic selectors --> BugBug creates them automatically when your

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

See

Automatic selectors

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.

Manual selectors

You can also enter your own custom XPath or CSS selector. In the details of selected test step click on existing selector and select "Customize" option (last position).

BugBug can understand selectors in the following formats:

  • CSS selectors, for example [id="submit"]

  • XPath selectors, for example //*[@id="submit"]

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

Nested selectors

BugBug allows you to create nested selectors. This is especially helpful when dealing with dynamic table data or nested iframes. Each selector narrows down the context, which gives the superpower to make the right selector for an element.

In the below example, BugBug will first narrow down the context of the document with

//*[@data-testid="todo-list"]

and then will find a child of this element using the next selector //li

In nested selectors, you can refer to parent, child, or sibling.

Set priority of automatic selectors

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-testid 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

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 display: none)

Tips on fixing selectors

Use Chrome debugging

Copy selector to clipboard

  • 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

Prevent incorrect selectors

Fix text-based selectors

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"]

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 .

If you want to read more about XPath and selectors in general you can check out our .

You can decide about the priorities of automatic selectors and configure your custom attributes in . This is an advanced setting and usually there's no need to change it.

When your test fails with an error "element not found" or "element not visible", this might be caused by an incorrect .

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 (you can avoid this problem by )

the text in your app changed and you were using a

Chrome is very powerful in debugging and it's worth learning .

If no element is matched, you may try to manually update the selector or just

Prevent failed tests by using

Tip: you can

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 the selector or .

no-code XPath selector tool
BugBug Selector Builder
project settings
selector
how to use Chrome developer features
re-record the step
manually update
re-record this step
building a selector manually
text-based selector
custom attributes for selectors
record a test
our simple tool for building XPath selectors without code -->
use variables in selectors
Selector generated by BugBug during recording session
Selector customization
Nested selectors with BugBug.
The right box is the parent selector, the pink box is the child selector.
Nested selectors options.