How to get attributes values using Inspect Element?
While automating, we might need to find the ID, Class Name or other Attribute values for generating locator strings using XPath or CSS Selectors. Using Google Chrome Developer Tools, it is fairly easy. The process is quite similar for Firefox browser too.
We will try to get the Attribute values with the OrangeHRM Login page.
1. Right-click on the element whose text you want to check. Let us check the details of 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>
Note: It is important to note that some HTML tags doesn't mandate the use of a closing tag.
This is the code for the LOGIN button on above OrangeHRM Web page.
<input type="submit" name="Submit" class="button" id="btnLogin" value="LOGIN">
- 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.
How to get XPath or CSS Selector values using Inspect Element?
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.
Happy Automation Testing!