Using CSS/XPath selectors in the mabl Trainer

While the mabl trainer uses a variety of strategies in your journeys 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 journey. 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 journey 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 journey," 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 any matching element, the first matching element, or the 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. Once you've selected a Query type, you can now enter your criteria into the text box below.
  2. You can also select the type of action you'd like to perform, both "Click" and "Make Assertion" are currently supported, with "Click" being the default.
  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. Once you've selected a Query type, you can now enter your criteria into the field titled "Criteria."
  2. Change the "Action" dropdown menu to select "Make Assertion," with "Click" being the default.
  1. Now press the "OK" button located at the bottom of the trainer.
  1. Examine the new tab that appears in the Trainer. From here you can change the assertion type to any that is currently supported by the Trainer. It will be set to "is Present" by default.
  1. Once you've selected the assertion you want, click the "OK" button below.
  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 "Criteria."
  2. Change the "Action" dropdown menu to select "Enter Text," with "Click" being the default.
  1. Enter the text you wish to use in the "Text to enter" field.
  2. 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 "Criteria."
  2. Change the "Action" dropdown menu to select "Select control - any item," with "Click" being the default.
  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 in the mabl Trainer


Suggested Edits are limited on API Reference Pages

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