Element Selector

ou can use the element selector to identify the page elements when interacting or retrieving data from the page. For instance, if you want the workflow to fill in a specific form on the page using the Forms block, it should know which input elements to fill in. By using the input.form-name selector, it instructs the workflow to fill in an <input /> element with form-name classes.

In GoLess, you can pick an element utilizing the CSS Selector or XPath expression.

Block Selector Options

These options are available when editing a block that requires an element selector to function, such as the Click Element and the Get Text block.

Multiple

Choose multiple elements that match the selector. GoLess defaults to selecting only the first item that matches the selector.

For instance, if you use the Get Text block with p as the selector, GoLess will fetch all the text content from the match elements instead of fetching text content from the first element that matches the selector.

Mark Element

Mark your selected item. This means the element will not be selected if the same block has already selected it.

For instance, when you have a workflow as the following:

Workflow example

and the Get Text block uses .text as the element selector, and the website DOM tree.

<div>
  <p class="text" id="1">Text</p>
  <p class="text" id="2">Text</p>
  <p class="text" id="3">Text</p>
  <p class="text" id="4">Text</p>
</div>

After the Get Text block is started, it calls the first element that matches the selector, which is <p class="text" id="1">Text</p>. Then, since the mark element option is active, it will mark the element and look like this: <p class="text" id="1" block--block-id>Text</p>.

<div>
  <p class="text" id="1" block--block-id>Text</p>
  <p class="text" id="2">Text</p>
  <p class="text" id="3">Text</p>
  <p class="text" id="4">Text</p>
</div>

When the Get text block is run for the second time, it will do the same. Still, instead of selecting the <p class="text" id="1" block--block-id>Text</p>, it will choose the <p class="text" id="2">Text</p> element because the first element was marked.

Wait For Selector

Wait until the selector appears on the page. If the selector already exists while checking the selector, the block is immediately run. Otherwise, the workflow will throw an error if the selector doesn't appear in the timeout text field after the given time.

Generating Selector

If you are unsure how to write your selector, utilize the GoLess Element Selector or the "Select" button on the block. GoLess Element Selector

Open the GoLess dashboard, click the button in the sidebar, and GoLess will inject an element selector into the current page. Click or press the space key to choose an item. It will automatically produce a selector for the chosen element.

Element picker

Also, you can find the "Select an element" button when working with a block. When you click it, it will inject the element selector to the current page, choose an element, and click the "Select element" button in the element selector.

Select an element button

Custom Selector Syntax

Also, GoLess supports a non-standard syntax to support standard CSS Selector and XPath expression:

• iframe-selector |> element-selector: can select an element within an iframe element. For instance, iframe.result |> button.primary-btn

• :contains(TEXT): choose an element based on the text. For instance, p.description:contains("cat")

• shadow-dom-selector >> element-selector: choose an element inside a shadow DOM. For instance, div.app-container >> h1.title