In mabl, you can create custom find steps that find elements on the page using a Playwright locator, CSS query, or XPath expression. This article explains when and how to use custom find steps.
When to use custom find steps
Before you use a custom locator to find a specific element, try one of the following methods first:
- Configure Find - use Configure Find to tell mabl what attributes the target element should have.
- Custom test ID attributes - if mabl doesn't recognize your team's custom test ID attributes, declare them at the application level. See finding the correct element in browser tests for more details.
Creating find steps with Configure Find and/or custom test ID attributes ensures your steps are easier to maintain and more resilient.
However, if the need arises, you can use custom find steps to perform actions on elements that are tricky to target, including:
- Elements whose distinguishing attributes do not appear in Configure Find
- Elements that can only be identified in relation to another, non-ancestor element, such as a div that is adjacent to another div with a specific word in it.
- Elements that do not contain certain text, such as a button that does not start with the word "Submit": //button[not(starts-with(text(),"Submit"))]
- The n-th element in a set of very similar elements that frequently changes and has no other distinguishing attributes, such as the fifth row of a table with very similar rows.
Counting the number elements
Finding all the elements that match a locator can be useful in the following testing scenarios:
| Scenario | Example |
|---|---|
| Determining the number of elements to loop over | You want to check off all the checkboxes in a list. |
| Asserting that there is a specific number of elements. | You want to confirm that the search results page displays 50 results by default. |
| Confirming that a page filter reduces a list to the correct number of elements. | You want to confirm that 20 results are displayed when you select "20" from a page filter. |
| Verify that there are no elements in the page that contain specific text: //*[text()[contains(.,”{{@myVar}}”)]] | You want to make sure the word "journey" does not appear anywhere on the page. |
Setup
To create a custom find step in the mabl Trainer, take the following steps:
- Add a find elements step: + (Add step) > Find elements
- In the Locator field, write your CSS query, Playwright locator, or XPath expression. For more details, see writing locators for custom find steps.
- To store the matching element count in a variable, check Count matching elements. Otherwise, leave it unchecked
- Optional: record a visual find step on the element as a fallback in case mabl cannot find an element matching your locator.
- If you're not storing the matching element count in a variable, you need to select an Action to perform on the target element.
When you finish configuring the step, click OK to save the step and play it back in the Trainer.
Supported actions
This section outlines which actions are supported by custom find steps.
Click actions
Custom find click actions include click, double-click, and right-click. These actions require no additional steps besides providing the correct CSS or XPath query to target the correct element.
Enter text
For a custom find step that enters text, provide the text in the Text to enter field.
Make assertion
Perform an assertion on the target element.
Create variable
Store an attribute or property of the target element in a variable. For example, you can target a cell in a table and store its innerText in a variable.
Hover steps
Custom find hover steps require no additional steps besides providing the correct CSS or XPath query to target the correct element.
Selecting option
Custom find select actions interact with dropdowns that use the select and option tags. There are two types of custom find select actions:
- Select the
optionwhere the attribute - Select any option
If you choose "Select the option where the attribute", you can configure the step to choose an option in the dropdown based on one of the following attributes:
- Value: Select the option whose value equals a given string or variable.
- Text: Select the option whose text equals a given string or variable.
- Position: Select the option by its order in the dropdown. For example, select the third option in the dropdown.
If you choose "Select any option", mabl selects an unspecified option from the available options.
Send keypress
To create a custom find keypress step, select "Send keypress" in the Find Elements menu and click on the Next button.
The Trainer window loads a keypress menu where you can configure the step. For more information on creating custom find keypress steps, check out the guide to recording keypresses.
Drag and drop
Drag and drop steps are supported as recorded actions in the mabl Trainer. If you need to create drag and drop actions using CSS or XPath, combine these two custom find actions:
- Click and hold: target the element that you want to move
- Release: target the element where you want the first element to move to
Set file input
Upload a file from your local machine, mabl workspace, or file variable from earlier in the test.
Custom find limitations
Custom find steps lack the following features:
Only CSS queries can target elements in a shadow DOM. For more information on testing in the shadow DOM, check out this guide.