Monday, November 27, 2017

Evaluating element locators in Chrome Developer Tools.

When working on test automation, one of the main tasks is finding the right element locators.
So in order to validate you are working with the correct elements you could take advantage of some Dev Tools features.


Finding locators by using the Inspector:

1. Open the Chrome Dev Tools by pressing F12.
2. At the top-left side you will find the selector icon.
3. Click on it and then the element selector you want to get.



Evaluating locators in the Elements panel:

1. By pressing Ctrl+f you will invoke the Find bar.
2. So you can use it to test either your locator is present in the DOM or if it is unique.



Evaluating locators via the Console:

If you prefer to do it via the Console panel, you can use the following syntax:

$x(locator)

e.g. Finding element by its class name: $x("//input[@class='single-data']")