Using CSS/XPath selectors

Try Configure Find before a XPath/CSS Selector

Before you use an XPath or CSS Selector to find an element, try using Configure Find to tell mabl what attributes the element you are looking for should have. As an example, you can configure a find to look for an element that contains the text from a variable. This handles a lot of the use cases for an XPath or CSS Selector while also being more maintainable due to not needing to understand the syntax for XPath or CSS Selectors.

While the mabl Trainer uses a variety of strategies in your tests to find and interact with elements in your application, you may want additional control over specific finds. The mabl Trainer allows you to quickly add specific CSS or XPath selectors as steps in your test. The Trainer will also highlight the elements you're selecting as you're creating the step, so you can be sure mabl is finding the correct element. Follow along below to get started with this feature.

Important information about using the mabl Trainer

For information on using the mabl Trainer, please see the "Defining a test with the mabl trainer" document for more details.

1. Adding CSS/XPath selectors to your steps (Click)

  1. Make sure the mabl Trainer is open in your window.
  2. Click the "Insert Step" plus button in the toolbar at the bottom of the screen.
  1. Search for and click on the "Find Elements" step type
  1. A new screen in the Trainer titled "Find matching element" will appear.
  2. Select the desired "Find type" using the first dropdown. You can find by the first, last, or number of matching elements.
  1. Select the desired selector type in the dropdown titled "Query type". Both CSS and XPath are currently supported, but CSS Query will be the default.
  2. Select an action you'd like to perform on the found element. Currently, you can have mabl click, double-click, assert against, enter text into, hover over, or choose any item from a select control for the element found.
  3. Finally, enter your CSS Selector or XPath query and let mabl highlight the found matches.
  1. Now press the "OK" button located at the bottom of the Trainer.
  2. You will be brought back to the main mabl Trainer tab, where your step has been added.

Having trouble using CSS selectors?

Check out the recording of our CSS Masterclass Webinar! Also try using this helpful CSS Diner game, courtesey of @flukeout.

Adding CSS/XPath selectors to your steps (Click)

  1. Reopen the "Find matching element" portion of the mabl Trainer using steps 1 through 6. "Click" will be already be set as the default "Action".
  2. Enter the CSS/XPath selector for your element into the "Query" field.
  1. Now press the "OK" button located at the bottom of the Trainer.
  2. You will be brought back to the main mabl Trainer tab, where your step has been added.

Adding CSS/XPath selectors to your steps (Enter text)

  1. Reopen the "Find matching element" portion of the mabl Trainer using steps 1 through 6. Once you've selected a Query type, you can now enter your criteria into the field titled "Query."
  2. Change the "Action" dropdown menu to select "Enter Text".
  1. Enter the text you wish to use in the "Text to enter" field.
  1. Now press the "OK" button located at the bottom of the Trainer.
  2. Examine the step in the Trainer.

Adding CSS/XPath selectors to your steps (Select)

  1. Reopen the "Find matching element" portion of the mabl Trainer using steps 1 through 6. Once you've selected a Query type, you can now enter your criteria into the field titled "Query."
  2. Change the "Action" dropdown menu to select "Select control - any item"
  1. Now press the "OK" button located at the bottom of the Trainer.
  2. Examine the step in the Trainer.

Questions about assertions?

See our "Working with Assertions" documentation, which starts with "Working with the "is Present" Assertion" document, for more information.

Updated 6 days ago


Using CSS/XPath selectors


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.