Skip to main content
Go to the Studio
Tutorials

The Roberty Chrome extension

The Roberty Chrome extension

The Roberty Chrome extension captures the selector of any element on a web page in two clicks — without opening the source or understanding HTML. The selector it captures is copied automatically, ready to paste into the Designer's browser actions.

Prerequisite

This tutorial assumes you know what elements and selectors are. If not, read Elements and selectors in the browser first.

Installing the extension​

1. Go to the Chrome Web Store

Open Chrome and go to the extension's page:

Roberty — Chrome Web Store

2. Click "Add to Chrome"

On the extension's page, click Add to Chrome.

3. Confirm

A confirmation window lists the permissions it needs. Click Add extension.

4. Done

Roberty's icon appears in Chrome's extensions bar, top right. The extension is installed and ready.

The extension is not in the bar?

Click the puzzle piece icon in Chrome's bar, find Roberty in the list, and click the pin icon to keep it in the bar.

Capturing a selector​

With the extension installed, to capture any element's selector:

1. Open the page in Chrome

Navigate to the page with the element you want.

2. Right-click the element

Put the cursor over the element (a button, a field, a link) and right-click.

3. Choose "Roberty Automation → Select element"

In the context menu, click Roberty Automation and then Select element.

4. Move the cursor to highlight the element

The extension turns on a selection mode: as you move the cursor across the page, each element is highlighted with a blue overlay showing what will be captured.

5. Click the element

With the blue highlight on the right element, click it. A confirmation appears:

"The element was copied to your clipboard! You can paste the selector into Roberty's settings."

The selector is copied and ready.

Cancelling

To leave selection mode without capturing anything, press Esc.

Using the selector in the Designer​

With the selector captured, paste it into the Element selector field of the browser action you want.

With the Click in the browser action:

  1. In the Designer, add (or select) Click in the browser.
  2. Under Select the action, choose By browser.
  3. Click the Element selector field.
  4. Paste the captured selector with Ctrl + V.

The robot uses that selector to find and work with the element at run time.

Tips​

Capture with the page in the state the robot will find it. If an element only appears after another button is clicked (a modal, say), open the modal before capturing the selector.

If a selector stops working, capture it again. Sites update their code often. When a browser action starts failing, open the extension and capture the element again.

The extension works in any Chrome tab. There is nothing else to configure — it works on every site automatically.

Next​