Using CSS/XPath 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. Examine the Trainer and hover over the small magnifying glass button located directly above "Save test," you will see the text "Find Elements" appear.
  3. Click the button.
  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 or last matching element.
  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.
  1. 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.
  1. 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.
  1. You will be brought back to the main mabl Trainer tab, where your step has been added.

Having trouble using CSS selectors?

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.
  1. 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.
  1. 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.
  1. 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.

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.