How to manually create XPath locators based on HTML tags using Chrome

[Dave_Evers]

How to manually create XPath locators based on HTML tags using Chrome

Create a manual ‘Username’ locator using the <input> tag:

1. Open OrangeHRM
2. Press F12 (opens Dev-Tools).
   Right-click on the ‘Username’ input field and click ‘Inspect’, the following HTML code is selected:
   <input class="oxd-input oxd-input--active" name="username" placeholder="Username" autofocus="" data-v-1f99f73c="">
3. Press CtrlF and input the following into the search field.
4. //input and press Enter until the ‘Username’ field is highlighted.
5. //input[@name='username'] and press Enter, (note that 1 of 1 displays in the search results).
6. Other attributes can be added to make your search more unique e.g., //input[@name='username'][@placeholder="Username"]
   Note ‘contains’ locators can also be used: e.g., (//input[contains(@class,'oxd-input')]) , (note that 1 of 2 displays in the search results).
   If a ‘contains’ locator is shared by other objects an index can be used, e.g., (//input[contains(@class,'oxd-input')])[1]

Create a manual ‘Login’ button locator using the <button> tag:

1. Open OrangeHRM
2. If required press F12 (opens Dev-Tools).
3. Right-click on the ‘Login’ button and click ‘Inspect’, the HTML code is selected:
4. Press CtrlF and input the following into the search field.
5. //button and press Enter until the ‘Login’ button is highlighted.
6. //button[@type='submit'] and press Enter, (note that 1 of 1 displays in the search results).
   Note ‘contains’ locators can also be used: e.g., (//button[contains(@type,'submit')]) or (//button[contains(@type,'sub')])

Create manual div locator using the <div> tag:

1. Open OrangeHRM
2. If required press F12 (opens Dev-Tools).
3. Press CtrlF and input the following into the search field.
4. //div and press Enter 25 times to find the logo.
   The locator can be written as (//div)[25][contains(@class,'logo')] or (//*[contains(@class,'logo')])[1]

Create a manual Header locator using the <h5> tag:

1. Open OrangeHRM
2. If required press F12 (opens Dev-Tools).
3. Press CtrlF and input the following into the search field.
4. //h5 and press Enter until the ‘Login’ header is selected.
   The locator can be written as (//h5[contains(@class,'login-title')])

Experiment with other tags for the pages in your AUT (App Under Test).
E.g., using //a Enter as a search will find anchor tags on a page.
//a[contains(@href,'facebook')] or //a[contains(@href,'orangehrm.com')]
Others:
//*[contains(@anyTagname,'targetText')]
//button[starts-with(@type,'sub')]
(//*[contains(@class,'login-layout')])[1]

Username field using: //input[@name='username']

Username field using: //input[@name='username'][@placeholder="Username"]

Username field using: (//input[contains(@class, 'oxd-input')])[1]

Login button using: //button[@type='submit']

Login button using: (//button[contains(@type, 'submit')])

[Elly_Tran]

Awesome @Dave_Evers ! Thank you for sharing such an interesting guide.

[dineshh]

nice article!!

[atul.rai]

Great @Dave_Evers