Visual find targets an element by its appearance: draw a box around it, and mabl writes a natural-language description that it uses to locate the element at run time. Until now, you could only author a browser step that way for clicks. Starting with mabl Desktop App version 2.68.2, the Visual area tab is also available for enter text, select, create variable, and assert steps.
This find method is ideal for elements that are difficult to target with a locator: canvas and chart regions, images, map controls, and anything whose markup shifts between builds. Now you can enter text into a field you can only describe, or assert on a component that has no stable attribute to match.
Please note that visual find is not the same as a visual fallback, which we extended to every custom find step type in a recent release. A fallback only runs when the step's locator fails. A visual find is how the step locates the element in the first place.
How it works
How you apply visual find depends on the type of step:
- Enter text and select steps: perform the action and let the Trainer record the step. Then edit the recorded step.
- Create variable step: select + (Add step) > Create variable > Element property
- Assert steps: Select + (Add step) > Assert > Element
Once you area configuring the step:
- Select Visual area as the element find method
- Draw a box around the element the step should act on.
- Review mabl's generate description and adjust if necessary.
- Select Test description to confirm mabl resolves the element you meant.
Real values from the element you described
Once the description resolves to an element, the authoring forms read that element instead of offering a fixed list of options:
- Create variable > Element property. The Property dropdown lists the attributes and properties the resolved element actually has, and the preview shows its current value on the page. Before you test the description, mabl asks you to run it rather than offering a value it cannot verify.
- Assert > Element. The HTML attribute and CSS property pickers read the resolved element's real attributes and computed styles. The CSS picker used to offer a single fallback property under visual find, and now enumerates what the element actually has.
Drawing a box needs the live page, so the Visual area tab appears in the mabl Trainer. From web app quick edit, open the test in the Trainer to draw one.