Advanced Usage

Now we will see that how to use our web extension in advanced mode. We recommend you to read the basic usage to better understand this part. With advanced mode, you can edit your selector by seeing the matched elements instantly. So, lets start

When you clicked the inspect element (2. step at basic usage) you see that the web elements are wrapped with colored rectangles. Now you should click an element by pressing the CTRL key. You will see that the advanced inspect editor will be occurred.

Advanced Inspect Editor on stackoverflow.com

As you can see above, our inspect editor consists of 5 parts:

  • Editable Text Area = The xpath of the clicked element is showed in this area. It is editable. You can change the xpath whatever you want.

  • Element Attributes = Web elements have some attributes. They can be used in the xpath expression. You can include the listed attributes to your xpath expression by clicking the select button.

  • Count = The number of elements which are matched in the page.

  • Select Button = If you decide that the xpath in the editable text area is convenient for you, you click the select button. Your designer page automatically becomes active page and the selected element's image and xpath expression are automatically filled to node body and information respectively.

  • Cancel Button = After opening the inspect editor, you decide to give up inspecting element. So you should click the cancel button. Your designer page automatically becomes active page.

If you change the xpath expression in the editable text area, the matched elements are wrapped with colored rectangles. If it matched more than 1, all of them are wrapped with rectangles. Additionally the number of matched elements is placed to the count part. Lets show an example.

The last form of thepage after editing editable text area part

As you can see that, I have updated the editable text area part with //div[@class='question-summary narrow tagged-interesting' ] x path expression. When I change it, the number of matched elements were wrapped with colored rectangles. Also, we can see that 91 different elements exist which were matched with our xpath expression.

However, we want to use an xpath expression that is matched only 1 element since preventing the ambiguous. So I will use another property of our advanced xpath editor which is selecting element attributes. I will select the id and class attributes of my element for obtaining only 1 matched element. The last form of my page is like following:

The last form of the page after selecting id and class attributes

As you can see that when I select the id and class attributes, they were added to my xpath expression. Additionally the number of matched element become 1. Also, only 1 element were wrapped with colored rectangle which is the element I want to interact in my flow. That is great!

Finally, I obtain an xpath that is matched only 1 element. So I can select it to use in my flow. When I click the select button, my designer page automatically becomes active page, and it seems like following:

The view of the node and it's property after selection operation

That' s all. Congratulations👏You selected the element by using Robomotion Advanced Inspect Editor