In this article we will learn how to generate XPaths or CSS Selectors using one or more attributes.

Refer to <Create UI Identifier manually> to learn the other options available to create UI Identifier.

Navigation: Test Development > UI Identifiers

1. On the  UI Identifiers page, click on Create button to start creating the UI Identifier.

2. Select the 'Using multiple attributes of the element' option.

3. Select the Identifier Type as 'XPath' or 'CSS Selector'.

4. Enter the values as shown below:

  • Target Element: Select HTML Element Type from the drop-down box. This is mostly the tag name of the HTML Element. Possible tag names are link, image, textbox, heading, list, button, date selectors e.t.c.
  • Attribute: Select Attribute from the drop-down box. Attributes are properties of the HTML Element such as id, name, title e.t.c.
  • Operator: Select Operator from the drop-down box. An operator determines how the given value compares with the actual Attribute value for the Element. It can be one of Equals, Starts with, or Contains.
  • Value: Enter the value to be compared with the actual Attribute value. 

Note: You may also use different Test Data Types to make it dynamic. Please check the below guide to know more about creation of dynamic UI Identifiers using Test Data:
Creation of Dynamic Xpath using Parameter Test Data
Creation of Dynamic Xpath using Runtime Parameter Test Data

Note: We can use the Developer Tools in your Google Chrome or Firefox browser to get the values for Element Type, Attribute and Value. Please check the following article for more details on using developer Tools to get the Attribute name and Attribute value of an Element - How to get UI Identifier using Inspect Element option in Chrome Developer Tools?

5. Click on the plus icon on right to add more attributes.

6. Repeat the above steps 4 and 5 to add multiple attributes as shown below:

7. Tick the attributes that you need to include and click on Generate XPath or Generate CSS Selector to get the final value.

Note: Here's the same attributes with CSS Selector. You may edit and switch the selector type when you want.

8. Finally, click on Create button to create the UI Identifier. You can see the success notification with newly created UI Identifier and you will be taken to the UI Identifiers page.