Selecting locators for an element is a trial and error process. Also, the ratio for a locator of an element is not always 1:1, it means that for a single element there can be more than one way of getting its locator.
Steps:
1. Open developer console (F12)
2. Go to “Elements” tab
3. As you hover over the divs etc on the elements tab, certain parts/sections of the site is highlighted
4. If you want to select a specific element, click this:
5. After clicking that tool, you can now hover to an element in the site and it will highlight that element in the elements tab
6. When you click on the element you want to, you can now start getting its locator from the highlighted element in the elements tab.
7. Another way is you can just right click on the element you want and choose “Inspect” and it will open the developer tools and highlight that element.
Examples of different element locators:
1. CSS - by classes and by ids
If id is present always choose the id as it is more specific to that element
For ids we define them as “#” and for classes we define them as “.”
To verify if the locator you got is present, go to “Console” tab in the developer tools and for css we use the format - $$(‘your css’)
2. Xpath - by classes, tag types and ids
To verify if the locator you got is present, go to “Console” tab in the developer tools and for xpath we use the format - $x(‘your xpath’)
3. Xpath - by parent classes or ids plus child classes or ids
Since the DOM provides class hierarchies, we can get the parent classes or ids specific to an element
4. Xpath - by classes or ids with string
Xpath also provides a way to get locators with their specific string set
5. Xpath - by parent classes or ids, child classes or ids with string
Xpath also provides a way to get locators from parent to child with their specific string set
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
Locators
