How to recognize web elements

[Mabwa_Neek]

Using the internal picker

1. Click on “Pick New Element”

2. Hover your mouse over the page to see the elements highlighted. Focus on your target and press Ctrl + X
   

   

3. A pop-up appears to indicate that the element was captured. Press “Save”

Using XPath

1. Go to the web page from which you need to select the element

2. Right-click on the web element whose XPath you need to get

3. Choose the option “Inspect”

4. After identifying the element in the code, right-click on it and choose Copy → Copy full XPath

5. On Studio Pro, choose Elements → Add new Element → Browser Element

6. Add the element name and choose the option “Xpath”

7. To finish, you need to paste the XPath value you copied from the web page on the “Set a value“ field:

Now you can use this element in your web activities.

Using CSS selectors

1. Create a new Web Element as demonstrated in the XPath part, but choose the CSS Selector instead

2. Go to the web page and press F12

3. Select the element and click on Copy → Copy selector:

4. Paste it into the web element “Value” field

Tip: There are many ways to interact with web elements using XPath and CSS. Find more examples in this web page.

Happy Automation with ElectroNeek!!