Skip to content

Selector guide

Description

When working with playbrowser commands, the majority of them requires a selector to do an action on. The way you can retrieve the selectors can be simple, but sometimes by following the first method of getting the selector does not work, then it requires you to do some research on how selectors work so that you can build your own selector string to target a specific element or elements on the page.

Info

This example used has an iframe, if you want to read the text using Robotuer, remember to get the iFrame selector and the Element selector when targeting the text.

How to get a selector value

  1. Open a browser on the page you want to automate or follow this example
  2. Press F12 to open the developer tools
    devTool
  3. Press ctrl + shift + c to activate the action that enables you to select a element inside of the page
    selectorElement
  4. Left click on the element you want to do an action on
  5. Go to the element tab inside the developer tools and right click on the code of the element you want to get the selector of.
    selectElement
  6. Click copy
    clickCopy
  7. Click copy selector
  8. Example selector body > h1
  9. Now you can paste the selector into the Roboteur command as a Element selector value

Quicker way to get the selector value

  1. Right click on the element inside of the web page and select inspect
  2. Right click on the elements code
  3. Click copy
  4. Click copy selector
  5. Example selector body > h1
  6. Now you can paste the selector into the Roboteur command as a Element selector value

Manually construct a selector

  1. Right click on the element inside of the web page and select inspect
  2. Right click on the elements code
  3. Click copy
  4. Click copy full xpath
  5. Example full xpath /html/body/div[3]/main/div/div[1]/div/div/nav/ul/li[7]/nav/ul/li[1]/nav/ul/li[9]/a
  6. Convert xpath to selector html > body > div:nth-child(3) > main > div > div:nth-child(1) > div > div > nav > ul > li:nth-child(7) > nav > ul > li:nth-child(1) > nav > ul > li:nth-child(9) > a
  7. Now you can paste the selector into the Roboteur command as a Element selector value

How to know if an element is inside of an iframe

  1. Follow the How to get a selector value to find and copy the iframe element
  2. When you see the <iframe> code, you know that the element you are looking for is inside of an iframe
    clickCopy
  3. Example iframe selector #iframeResult
  4. Now you can paste the selector into the Roboteur command as an iFrame selector value