Now you can target elements in a custom find step with a single Locator field that accepts XPath, CSS, and Playwright locator syntax. The updated Find elements menu brings a few benefits:
- A simpler menu: One Locator field instead of separate selector-type and ordinal controls.
- Reuse your Playwright selectors: If your team already tests with Playwright, you can use the exact same selector syntax in mabl.
-
Easier ordinal selection: Playwright's
nthsyntax makes it straightforward to target the first or last of several matching elements, which is harder to express in plain CSS. - Visual find as a backup: Turn on visual find as a fallback so a step still resolves when the locator alone can't pinpoint the element, which keeps your steps less brittle.
How it works
The Locator field accepts any Playwright locator that can be written as a string:
-
CSS selectors work directly:
button.add-to-cart -
XPath works with an
xpath=prefix:xpath=//button[@id='submit'] -
Ordinal selection uses
nth: add>> nth=0for the first match or>> nth=-1for the last. -
Chaining narrows from one locator to the next with
>>:li:has-text("Product 2") >> button:has-text("Add to cart")
One nuance worth calling out: the Playwright documentation mostly shows locators chained in code, such as page.getByRole('listitem').filter({ hasText: 'Product 2' }). In mabl, you express that same chain as a string using >>, since the Locator field takes a single string value.
Set visual find as a backup
You can enable visual find as a backup for a custom find step. If the locator can't uniquely identify the element during a run, mabl falls back to visual find, so small changes in your application are less likely to break the step.
Existing tests keep working
The new Locator field is available on the latest version of the Desktop App. mabl automatically converts locators in your existing custom find steps to the new format, so your current tests continue to run as they did before.