AI Element Selectors

# AI Element Selectors

HARPA AI uses AI Element Selectors to find elements on the page. These selectors are used in EXTRACT, CLICK, TYPE, WAIT steps.

You can use the "Grab" button to select an element from page, or customize the selector manually in the YAML file.

AI Element Selectors are based on the YAML format, and can be used to find elements by tag, class, text, content, role, style, anchor, css, xpath etc.

# Selectors Cheat Sheet

Most common selectors are:

1. Search elements containing text

   My Account
   

2. Escaping numbers, dates, etc.

   Total views: {{data}}
   

3. Find an element closest to $anchor

   $anchor: username
   

4. CSS Selector $css

   $css: div.views-count > span
   

5. XPath Selector $xpath

   $xpath: //div/span
   

6. Parse number from element with $parse selector. Parse options include: number, date, time, prices, currency, text.

   - Total views: {{data}}
   - $parse: number
   

7. Take 4th matching element

   - $css: h2
   - $at: 3
   

8. ARIA role selector

   $role: button
   

# AND operation

To find elements that match two selectors, combine them into an object:

- $css: h2
  $text: My Account

# OR operation

To find elements that match either of two selectors, combine them into an array:

- $css: h2
- $text: My Account

# Selector $matches

Special $matches selector is used to check for multiple selectors at once. It is useful when you need to find an element that matches multiple attributes. This is usually more reliable than using a single selector.

There is a min parameter that specifies the minimum number of selectors that element must match to be found

- $matches:
    - $tag: H1
    - $role: heading
    - $class: PostContent__title
    - $style: Poppins:48px:600:normal
    - $content: Extract & Content Steps
    - $class: PostContent__header
      traverse: '1'
    - $class: PostContent__content
      traverse: '0:1'
    - $class: PostContent
      traverse: '1:0:1'
    - $class: Page__content
      traverse: '0:1:0:1'
    - $class: Page
      traverse: '0:0:1:0:1'
    - $anchor: CONTENTS
      shift: 79:-132
    - $text: CONTENTS
      traverse: '-3:0:1'
    - $anchor: HARPA.AI
      shift: '77:150'
    - $text: HARPA.AI
      traverse: '-3:1:0:1'
    - $anchor: Overview
      shift: 67:-184
    - $text: Overview
      traverse: '-4:0:1'
  min: 5

# Selector $size

Special $size selector is used to ensure that the number of elements found is within the specified range. This is useful when you need to find a single element only.

- $css: h1
- $size: 1

To check for a range of elements, specify min and max parameters:

- $css: a
- $size:
    min: 1
    max: 5

If the number of elements found is not within the specified range, the selector will return no elements.