Skip to main content
Go to the Studio
Tutorials

Elements and selectors in the browser

Elements and selectors in the browser

When your robot has to work with a web page — click a button, fill in a field, read a piece of text — it needs to know exactly where on the page to act. That is what elements and selectors are for.

What is an element?​

Think of a web page as a form to fill in. Every visible part of it is an element: the "Submit" button, the ID field, the options menu, the header image, a text link. Everything you see and interact with on screen is an element.

Common ones:

  • A button — "Sign in", "Confirm", "Download"
  • A text field — email, password, a document number
  • A link — "Forgot your password?", "Learn more"
  • A table row — a record in a list of results
  • An image, an icon, a dropdown menu

In short: if you can click, type into or read something on a page, that thing is an element.

What is a selector?​

A web page can hold dozens of buttons, fields and links. How does the robot know which one to click?

A selector — a piece of code that uniquely identifies one specific element on the page, like that element's exact address.

An analogy

Picture an office with hundreds of files. To ask someone for a specific document you say: "Blue folder, third shelf, second document from the left." A selector works the same way — a precise description that takes the robot to the right element, with no room for error.

A selector looks technical (button#btnConfirm, for instance), but you do not have to write one by hand. The Roberty Chrome extension captures it for you in a couple of clicks.

Capturing a selector​

The simplest — and recommended — way to get an element's selector is the Roberty Chrome extension:

  1. Open the page in Chrome with the element you want.
  2. Right-click the element.
  3. In the menu, choose Roberty Automation → Select element.
  4. Click the element. The selector is copied to your clipboard automatically.
Do not have the extension yet?

See The Roberty Chrome extension — installing it takes under a minute.

Using the selector in a browser action​

With the selector copied, paste it into the Element selector field of the action you want in the Designer.

Here it is with the Click in the browser action:

  1. Add Click in the browser to the flow.
  2. Under Select the action, choose By browser.
  3. Under Page or browser ID, pick the action that opened the browser.
  4. Under Element selector, paste the selector (Ctrl + V).

The robot will find and click exactly the element you captured.

Browser actions that use selectors​

Most web automation actions have a selector field for identifying the target element. The main ones:

ActionWhat it does
Click in the browserClicks buttons, links and other elements
Fill in a fieldTypes text into a form field
Get an element's textReads an element's text content
Get an element's attributeReads one specific property of an element
Check whether an element existsChecks whether an element is visible on the page
Tick/untick a checkboxTurns checkboxes on and off
Upload a fileSends files through upload fields

Making selectors more reliable​

Keep them simple. The shorter and more direct a selector, the more stable it is. One based on the element's ID (#btnLogin) rarely changes; a very long one with many levels breaks as soon as the page is updated.

Recapture when it stops working. If the robot starts failing on a browser action, the page has probably been updated and the selector has changed. Open the extension and capture the element again.

Test before you finish. Run the robot in test mode to confirm the action finds the right element before putting it into production.

Next​