While automating applications, we might need to find the ID, Class Name or other Attribute values for generating locator strings using XPath or CSS Selectors. Using Chrome Developer Tools, it is fairly easy. The process is quite similar for Firefox browser too.

For demonstration, we will take the example of a simple Login button in the OrangeHRM Login page. We will try to get the Attribute values for Login button below:

1. Navigate to the page in your Google Chrome Browser.

2. Right-click on the element for which we need to find the attributes which in this case, is the Login button on OrangeHRM login page.

2. Select Inspect or Inspect Element option from the popup menu. A sub-window will open up on the right or bottom side of your web browser window and your clicked element will be highlighted in blue.

3. Check the highlighted text in the newly opened window. That is the HTML code for the selected Element.

The general format of HTML code for a HTML Page Element is:

<tag_name attribute1_name="attribute1_value" attribute2_name="attribute2_value" attribute3_name="attribute3_value" > value </ tag_name>

For Example,

This is the code for the LOGIN button on above OrangeHRM Web page.

<input type="submit" name="Submit" class="button" id="btnLogin" value="LOGIN">

In this case, the tag name is input. Attribute names are type, name, class, id or value and their respective values are the strings in quotes following their name and equal sign. For example, the value of name attribute is Submit.

Getting single unique Attribute

You can use the value of any one of the attributes for the particular element if its value is unique. ID locator is the most preferred and recommended single attribute as per W3C standards.

Getting multiple Attributes

You may use a group of attributes for the particular element if one of the attribute can't give a unique UI Identifier. Using the multiple attributes, you can generate XPath or CSS Selector using Testsigma UI Identifier Advanced Options:

Web Application - How to create Xpath/CSS Selector with Advanced Options?

Getting Link Text and Partial Link Text

You can use the text displayed in a hyperlink to use as UI Identifier. You may use the full link text or partial link text. For example,

In the below code,

<a href="/home" title="homepage" style="padding:0px;background:#FFF;color:#04b8e6;font-size:15px;" rel="nofollow">Report a Bug</a>

"Report a Bug" is the link text.

Getting XPath or CSS Selectors

In newer versions of Chrome and Firefox, it is quite easy to get the XPath and CSS Selectors using Developer Tools.

1. Coming from step 2 in the above section, right click on the highlighted text in the Developer Tools Console.

2. From the menu that opens up, hover over the Copy option and then select Copy XPath or Copy Selector.

You can use the XPath and CSS Selector values obtained in the Testsigma UI Identifiers field after selecting the corresponding Identifier type.

Also, you may check out this short video with an example of using the Chrome Developer Tools:

Happy Automation Testing!