Graphical Selectors in BAS: Clicking by Image
The graphical action blocks in Browser Automation Studio — locate and interact with elements by their rendered image when CSS and XPath selectors cannot identify them.
Most of the time you target elements by CSS or XPath. But some pages defeat that — a non-standard font, a UI drawn as graphics, an element with no stable DOM handle. For those, BAS lets you select elements graphically, by their image.
What a graphical selector is
BAS lets you select elements graphically with the right mouse button and work with them — and this method has its own context menu, similar to the normal one. Under the hood, the element is identified by its rendered image as base64, and BAS searches the page for that image to find it. You set a match accuracy from 0 to 100 to control how exact the visual match must be.
The graphical action blocks
The graphical context menu mirrors the normal element actions, but works on an image instead of a selector:
- Move mouse and click element — find the base64 image on the page, move the mouse to it and click, with scrolling and a chosen click type (left, right, double).
- Click element — click the located base64 element with no mouse movement.
- Move mouse over element — move the cursor to the upper border of the located element (hover).
- Input text — type into the element, exactly like the normal input action but targeting a graphical element. This is the key one: when a page uses a non-standard font and the only way to identify a field is visually, graphical input is how you fill it.
- Clear text — clear the text field of a graphical selector.
- Check existence — test whether the graphical element exists on the page in base64 form, just like checking a normal element.
When to reach for it
Graphical selectors are a fallback, not a default. They’re slower and more fragile than DOM selectors — a visual change to the element can break the match, and image search costs more than a CSS lookup. Use CSS or XPath whenever the element has a usable DOM handle, and drop to graphical selectors only when it doesn’t: custom-font fields, canvas-rendered controls, or anything where how it looks is the only thing you can reliably pin down.
FAQ
What is a graphical selector in BAS?
A graphical selector identifies an element by its rendered image (base64) rather than by a CSS or XPath path. BAS searches the page for that image and acts on it — useful when a normal DOM selector cannot pinpoint the element.
When should I use a graphical selector instead of CSS or XPath?
When DOM selectors fail — for example a page that uses a non-standard font or renders its UI as graphics, where the only reliable way to identify a field is by how it looks.
- Browser Automation Studio: The Complete Practical GuideGuide
- Building Your First Bot in Browser Automation StudioA step-by-step walkthrough of creating your first working BAS bot — from a blank project to a flow that navigates, extracts data, and runs in multiple threads.
- Setting Up Proxies in Browser Automation StudioHow to configure proxies in BAS the right way — proxy types, per-thread assignment, rotation, and the checks that keep multi-account bots from getting flagged.
- Finding Elements in BAS: Selectors That Don't BreakHow element search works in Browser Automation Studio — CSS vs XPath selectors, why recorded ones break, and how to write selectors that survive page changes.