Handle similar elements in Low Code Automation

Learn how to reliably execute tests when there are similar elements in the webpage.

Some test flows require clicking one button among several that look the same. Let us look at a few examples:

Example 1: Consider the following e-commerce website with multiple Add to cart buttons that appear identical. You might click a specific Add to cart button based on the product name or because it’s the first item on the page.

Example 2: Consider the following page, where there are multiple Email buttons that look similar. You might click Email either because it’s in the first position or because it’s associated with a specific username.

The reason to select a particular element can vary from user to user. In automated tests, this similarity can cause the test to select the wrong button. This leads to inconsistent and unreliable results. To avoid this, you often need to define a specific element locator.

Low Code Automation solves this by smartly identifying the possible reasons why a user might have selected a specific button or element during test recording. It suggests factors such as the element’s position, visible text, parent container attributes, ID, and more. You can also add custom attributes to improve accuracy. Based on your intent, you can choose one or more reasons and add attributes to handle selection of similar-looking elements during test execution. This helps ensure tests are stable, reliable, and free from manual locator maintenance.

Improve element selection accuracy

Let us look at Example 1, where you click a specific Add to cart button among several that appear identical.

1. While recording, click the button you want to select.
   Low Code Automation automatically detects if there are similar elements on the page and opens the Improve element accuracy window to help you refine your selection.
   
2. In the Improve element accuracy window, select one or more reasons that best identify the element. In this example, it intelligently considers factors like:
   • The element’s position on the page
   • The element’s visible text
   • The element’s parent text
   • The element’s and parent’s attributes such as href (which defines the link’s destination URL)
     
3. If your intention is to click Potato Smart Container, select the Parent’s inner text checkbox. You can also choose to include the position, if required.
4. In addition to the reason, you can add other attributes captured during recording. To add a custom attribute, click + Add another attribute. This makes the selection more accurate.
5. In the Add attribute window, specify:
   • Attribute: The name of the HTML attribute used to identify the element, such as id, class, name, or aria-label. Choose an attribute that clearly distinguishes the element from others on the page.
   • Condition: The rule that determines how the attribute value is matched. Common options include equals, contains, equals, starts with, and more.
   • Attribute value: The specific value that the attribute should have based on the selected condition. This value is used to locate and accurately identify the element.
6. Click Save attributes.

In the following video, Low Code Automation accurately selects and clicks the button for the intended product.

All selected reasons and specified attributes are given equal priority when identifying an element. If Low Code Automation finds a match based on the specified reasons and attributes, it accurately selects the correct element during the test run. However, if no element matches the specified criteria, no element is selected, and an error appears during the test execution.

Configure element attributes for a step

You can configure attributes for any step of the test. Open the test, select the required step and click Configure attributes.

In the Improve element accuracy window, make the required changes and click Save attributes.

Configure reliable element attributes for your project

You can now run your tests more reliably by centrally managing which element attributes are considered reliable or unreliable for your application. For example, a class attribute across the application holds values like btn-primary _x9k23_gh7 active , where _x9k23_gh7 is a dynamically generated token that changes on each page load. This attribute can be marked as unreliable across the application so it is given lower priority during element identification.

To configure reliable element attributes at the project level:

1. Go to Settings > Element attributes.
2. Select one of the following tabs:
   • All URLs: The configuration applies to all URLs where the test runs within the project by default.
   • Selected URLs: The configuration applies only to the specified URLs.
3. Enter the reliable/unreliable attributes for configuration:
   • Reliable: Attributes that are unique and meaningful, and which should be prioritized when identifying elements during test execution. Example: data-testid used consistently across the application to represent specific elements.
   • Unreliable: Attributes that are dynamic or frequently change, making them less dependable for identifying elements.
     Example: class values that are auto-generated or that change between sessions.
4. If you have selected the Selected URLs tab, enter the URLs these rules apply to, and then repeat Step 3.
   • Specific URLs: Exact domain addresses where the configuration should be applied. For example, https://www.browserstack.com or https://staging.example.com.
   • Wildcard URLs: Use wildcard URL patterns to apply the configuration to multiple subdomains or similar URL structures. For example, https://*.example.com.
5. Click Save changes.