Introduction

Enhance resilience and flexibility of your tests involving complex elements by configuring custom locator for steps.

Low Code Automation now allows you to configure your own locator for recorded steps. This is usually helpful when dealing with elements that

• Do not have any meaningful attributes
• Has dynamic class names, id’s & other attributes
• Can only be identified in relation to other element on the page

How to configure

1. Navigate to the corresponding step for which you want to configure your own locator
2. Click on the step to open the configuration details
3. Toggle the setting Override default locator
4. Select XPath or CSS from the dropdown
5. Provide your locator corresponding to the element which uniquely identifies that element

Locator Concatenation Syntax

To specify locators within iframes and Shadow DOMs, we use a concatenation syntax to distinguish between different levels. The syntax includes the following separators:

• <<: Denotes the transition between iframes.
• ||: Denotes the transition between Shadow DOMs.

Locators are defined in a hierarchical manner, first identifying the iframe or Shadow DOM and then specifying the element within.

Step by Step guide:

1. Iframe Example:

In this example, we want to target an input element with the class credit-card-number within the iframe with the ID payment-form.

• To find an element inside an iframe, we need to first find the iframe using the locator.
• The iframe element in the provided image is identified by the ID payment-form, and its corresponding CSS selector is #payment-form
• Now, find the targetted element inside this iframe
• The input element in the provided image is identified by the class credit-card-number, and its corresponding CSS selector is input.credit-card-number.
• Concatenate the two locators using separator << to form the final locator value as below

   #payment-form << input.credit-card-number
  

1. Shadow DOM Example:

In this example, we want to target an input element with id cardholder-name which is inside a shadow-root having parent element with id cart-checkout.

• To find an element inside a shadow-root, we need to first find the element which contains the shadow-root element.
• The shadow-root element in the provided image is present under element with ID cart-checkout, and its corresponding CSS selector is #cart-checkout
• Now, find the targetted element inside the shadow-root element
• The input element in the provided image is identified by the ID cardholder-name, and its corresponding CSS selector is #cardholder-name.
• Concatenate the two locators using separator || to form the final locator value as below

   #cart-checkout || #cardholder-name