Skip to main content

Identifiers

Identifiers are used to locate specific web elements for automation testing. They allow the system to uniquely pinpoint elements on a webpage, enabling consistent interaction and validation. This page provides a breakdown of all supported identifiers, organized into categories for easy reference.

Text Based Identifiers​

Text-based identifiers rely on the visible or descriptive text associated with an element. These identifiers are ideal for elements with distinct, stable text attributes.

For example: Text Based Identifiers

In the above image, "Action Name" and "Value" are labels of the text fields and "Enter action name" and "Enter text to fill" are the placeholders. These visible text attributes can be used to identify the elements.

Tacl supports the following text-based identifiers:

Alternative Text​

The Alternative Text identifier locates elements based on the value of the alt attribute, commonly used for identifying images or icons.

Example: An HTML element with alt="Profile Picture" will look like:

<img src="profile.jpg" alt="Profile Picture" />

To identify an element with alternative text:

  • Select the Identify By dropdown and choose Alternative Text.
  • Enter the alt text value in the Alternative Text field.

Alternative Text Identifier

Alternative Text Options:

  • Strict Match
    Select this option to match the alt text exactly, with case sensitivity. Note that white spaces are automatically trimmed.

Label​

The Label identifier locates elements based on the associated label text, commonly used for identifying form inputs and controls.

Example: An HTML element with label text "Email" will look like:

<label for="email">Email</label>
<input type="text" id="email" name="email" />
...
<label> Email <input type="text" name="email" /> </label>

To identify an element by label text:

  • Select the Identify By dropdown and choose Label.
  • Enter the label text value in the Label Text field.

Label Identifier

Label Options:

  • Strict Match
    Select this option to match the label text exactly, with case sensitivity. White spaces are automatically trimmed.

Placeholder​

The Placeholder identifier locates elements based on the placeholder attribute, commonly used for identifying input fields where placeholder text guides user input.

Example: An HTML element with placeholder text "Enter your name" will look like:

<input type="text" placeholder="Enter your name" />

To identify an element by placeholder text:

  • Select the Identify By dropdown and choose Placeholder.
  • Enter the placeholder text value in the Placeholder Text field.

Placeholder Identifier

Placeholder Options:

  • Strict Match
    Select this option to match the placeholder text exactly, with case sensitivity. White spaces are automatically trimmed.

Text​

The Text identifier locates elements based on their visible text content, commonly used for non-interactive elements such as div, span, and p. While it can identify interactive elements like button, a, and input, we recommend using Role locators for these elements to ensure more robust identification.

Example: An HTML element with visible text "Welcome" will look like:

<div>Welcome</div>

To identify an element by visible text:

  • Select the Identify By dropdown and choose Text.
  • Enter the visible text value in the Text text field.

Text Identifier

Text Options:

  • Strict Match
    Select this option to match the visible text exactly, with case sensitivity. White spaces are automatically trimmed.

Title​

The Title identifier locates elements based on the title attribute, commonly used for identifying elements with additional descriptive text, such as icons or images.

Example: An HTML element with title text "Comments" will look like:

<span title="Comments"> 10 Comments </span>

To identify an element by title text:

  • Select the Identify By dropdown and choose Title.
  • Enter the title text value in the Title Text field.

Title Identifier

Title Options:

  • Strict Match
    Select this option to match the title text exactly, with case sensitivity. White spaces are automatically trimmed.

Attribute Based Identifiers​

Attribute-based identifiers use the properties or attributes assigned to elements. These identifiers are versatile for elements with unique attributes set by developers.

For example:

<button id="login-button" class="btn btn-primary" role="submit">Login</button>

In the above example, the button element has the following attributes:

  • id: login-button
  • class: btn btn-primary
  • role: submit

Attribute-based identifiers can be used to locate elements based on their attributes or properties.

Tacl supports the following attribute-based identifiers:

Role​

The Role identifier locates elements based on the role attribute, which is often used to define the interactive nature of elements like buttons, links, and input fields. Using Role locators is recommended for interactive elements to ensure accurate identification, as it aligns with accessibility standards.

Roles work in conjunction with Accessible Names, which provide context to users and assistive technologies. Accessible names are determined by various attributes, including aria-label, aria-labelledby, and inner text, depending on the element type.

For more details on supported roles and accessible names, refer to:

Example: An HTML element with role="button" will look like:

<div role="button">Click Me</div>

To identify an element by role:

  • Select the Identify By dropdown and choose Role.
  • Enter the role attribute value in the Role text field.
  • Enter the accessible name in the Name text field. In the example above, the accessible name is "Click Me".

Role Identifier

Role Options:

  • Strict Match
    Select this option to match the name attribute exactly. Note that this option will match only elements with the specified role attribute.

  • Checked (Optional)
    Indicates whether the element is checked. Typically used with checkbox controls.

  • Disabled (Optional)
    Indicates whether the element is disabled. This is usually set with aria-disabled or the native disabled attribute.

  • Expanded (Optional)
    Indicates whether the element is expanded. Commonly used with elements that have aria-expanded attributes.

  • Include Hidden (Optional)
    Controls whether hidden elements are matched. By default, only non-hidden elements are matched by the role selector.

  • Pressed (Optional)
    Indicates whether the element is pressed. Often used with elements that have aria-pressed attributes.

  • Selected (Optional)
    Indicates whether the element is selected. Commonly applied to elements with aria-selected attributes.

  • Level (Number, Optional)
    Specifies the heading level, often used for elements with roles such as heading, listitem, row, or treeitem. For example, <h1> to <h6> elements have default values for this attribute.

note

Optional elements with switch option has three states.

  • Gray: No value is set in the options.
  • Indigo: Value is set to true in the options.
  • Red: Value is set to false in the options.

Test Id​

The Test Id identifier locates elements based on a data-testid or similar custom data-* attribute, often specifically added to elements for testing purposes. Using a test ID is highly reliable, as it is typically unique and does not change with the page's content or styling.

Example: An HTML element with a test ID of data-testid="submit-button" will look like:

<button data-testid="submit-button">Submit</button>

To identify an element by Test Id in tacl.io:

  • Select the Identify By dropdown and choose Test Id.
  • Enter the data-testid attribute value in the Test Id text field.
info

The default attribute name for Test Id is data-testid. However, you can customize the attribute name in the execution profile settings. For more information, refer to the Execution Profile documentation.

Test Id Identifier

Id​

The Id identifier locates elements based on their unique id attribute, which is commonly assigned to elements for specific identification. Using an ID is one of the most straightforward ways to identify elements, but please note that it is possible to have multiple elements with the same ID, which is not recommended.

Example: An HTML element with an ID of submit-button will look like:

<button id="submit-button">Submit</button>

To identify an element by Id in tacl.io:

  • Select the Identify By dropdown and choose Id.
  • Enter the element's id attribute value in the Id text field.

Id Identifier

Name​

The Name identifier locates elements based on their name attribute, commonly used for form fields and interactive elements. Using the name attribute is useful for identifying elements, but please note that it is possible to have multiple elements with the same name, which is not recommended.

Example: An HTML element with a name of username will look like:

<input type="text" name="username" />

To identify an element by Name in tacl.io:

  • Select the Identify By dropdown and choose Name.
  • Enter the element's name attribute value in the Name text field.

Name Identifier

Intelligence​

This category provides an identifier for automated detection, using intelligence to select elements based on advanced logic.

Auto Identify​

The Auto Identify option uses intelligent algorithms to locate elements based on natural language prompts provided by the user. This is useful for complex or dynamic pages where traditional identifiers may be less reliable.

Example: To identify a specific element, you might provide a prompt like "submit button in the login form." The system will then locate the element based on this description.

To use Auto Identify in tacl.io:

  1. Select the Identify By dropdown and choose Auto Identify.
  2. Enter a descriptive prompt in the Auto Detection Prompt text field, such as "submit button in the login form."

Auto Identify

note

Subscription Requirement:
The Auto Identify feature is available only in selected subscription plans. For more information, visit our Subscription Plans.

Other Identifiers​

For some reason if you are unable to identify the element using the above identifiers, you can identify the elements using CSS Selectors and XPath Selectors. CSS and XPath are tied to the structure of the HTML document, allowing you to target elements based on their position, attributes, or relationships with other elements.

warning

Please be cautious as these selectors are less reliable and can break easily if the page structure changes. It is recommended to use other identifiers that are based on visible texts or attributes whenever possible.

note

For most scenarios, try using the visible texts on the page using identifiers like Label, Placeholder, Text etc. If you are unable to identify the element using these identifiers, then a recommended approach is to use attribute-based identifiers like Role, Test Id, Id, Name etc. Opt for CSS and XPath selectors only when other identifiers are not feasible.

CSS Selector​

The CSS Selector identifier allows you to locate elements using CSS selector syntax, enabling flexible and specific targeting based on element attributes, hierarchy, classes, IDs, and more. CSS selectors are powerful, but they can be tightly coupled to the structure of the page, making tests less stable if the DOM structure changes frequently.

Example: A CSS selector to locate various elements might look like:

form .submit-button
button.submit
#header .nav-item

To identify an element by CSS Selector in tacl.io:

  1. Select the Identify By dropdown and choose CSS Selector.
  2. Enter the CSS selector in the CSS Selector text field.

CSS Selector Identifier

warning

Avoid using lengthy CSS selectors that rely on nested hierarchies, as these can lead to fragile tests if the page structure changes.

Examples of Fragile CSS Selectors:​

#main > div.content > div > form > button.submit;

Long, complex selectors like this can easily break if any part of the structure changes, leading to unstable tests.

XPath Selector​

The XPath Selector identifier allows you to locate elements using XPath expressions, which navigate elements based on their hierarchy and relationships. XPath selectors are versatile, especially for elements not easily targeted by other attributes, but they can also be closely tied to the DOM structure, leading to unstable tests if the structure changes.

note

XPath selectors should start with // or ..

warning

XPath does not pierce the shadow DOM. If the element is inside a shadow DOM, it cannot be identified using XPath.

Example: An XPath expression to locate a submit button might look like:

//button[@class='submit-button']

To identify an element by XPath Selector in tacl.io:

  1. Select the Identify By dropdown and choose XPath Selector.
  2. Enter the XPath expression in the XPath Selector text field.

XPath Selector Identifier

warning

Avoid using deeply nested XPath expressions, as these can break if any part of the structure changes. Opt for shorter, simpler expressions when possible to create more stable tests.

Examples of Fragile XPath Selectors:​

//*[@id="main"]/div[2]/form/div/input[@type="submit"]

Complex and deeply nested expressions like these are prone to failure if the page’s DOM structure is modified, leading to unstable tests.

Filters on Identifiers​

Filters allow users to apply additional conditions when locating web elements to further refine the selection of elements. For example if the identifier returns more than one element, you can apply filters to the result of the identifier to select the specific element you want.

note

When multiple filters are applied, they are executed in the order they are added. The result of the previous filter is passed to the next filter.

By Position​

The Filter by Position option allows you to specify the position of an element in the result of the identifier. This is useful when the identifier returns multiple elements, and you need to select a specific element based on its position in the DOM.

note

Positions are zero-based index, meaning the first element is at position 0.

To use Filter by Position in tacl.io:

  1. Select the Identify By dropdown and configure your primary identifier.
  2. Click on Add Filter and select Position.
  3. Enter the desired position number to specify which instance of the element to locate. For example, to select the second element, enter 1.

Filter by Position

By text​

The Filter by Text option allows you to locate elements based on specific text content within the element. This filter provides two options:

  • Has Text: Locate elements that contain the specified text.
  • Has Not Text: Locate elements that do not contain the specified text.

These filters are useful when multiple elements share similar identifiers but can be distinguished by unique inner text, or when you need to exclude elements with certain text.

To use Filter by Text in tacl.io:

  1. Select the Identify By dropdown and configure your primary identifier.
  2. In the Filter Options, choose either Has Text or Has Not Text.
  3. Enter the specific text content to match for Has Text or to exclude for Has Not Text.

Using Has Text and Has Not Text filters provides greater control and precision, especially on pages with similar elements that need refined targeting.

Filter by Text

What's Coming Next?​

What are we working on?

Some of the upcoming features include:

  • Tagging and Grouping: Organize and categorize elements using tags and groups for better management.
  • Custom Identifiers: Ability to define custom identifiers based on specific attributes or properties.
  • More Filters: Additional filters to refine element selection based on various criteria.

If you like to upvote or suggest a feature, please visit our Feature Requests page.

Next Steps​