What are tips to work with shadow-root elements?

There's a useful tip to locate any kind of element which is under a shadow DOM with a CSS locator. In order to use a custom CSS locator, you have to add a new attribute named “css” to the Object’s Properties table and activate it.

The condition must be “equals” and the value is a CSS selector string that points to the target element. If you are new to the CSS locator, you can refer to this document for more details CSS Selectors Reference

Please note that in order to use a custom CSS locator, you have to add a new attribute named “css” to the Object’s Properties table and activate it. The Condition must be “equals” and Value is a CSS selector string that points to the target element. If you are new to the CSS locator, you can refer to this document for more details CSS Selectors Reference.

 

• decrease the “wait for element timeout” in the project settings. However, it could affect other steps too, so try to keep it not too short.

 
Below is an example to work with shadow DOM elements:

1. Steps:

•  Access to https://www.ti.com,

• Click on "Ship to" dropdown

• Input a country text

• Select the country after search

 

2. How to identify the objects in the web page:

We have the following objects to interact with: "Ship To" dropdown, Search box, the returned country option on the Country menu.
When inspecting the elements, we see that these elements are under #shadow-root. Therefore, we named them as follows:

 

 
Each element is labeled as Ax_y in which

• x: the order of the element

• y: the parent order

 
For example:

• A1: is the shadow root parent

• A2_1: the "Ship To" dropdown. A2_1 means it is a child under the shadow-root A1.

• A3_1: is also a child under shadow-root A1, but it will be Shadow Root Parent of other element A4

• A4_3: the Search box. A4_3 means it is a child under the shadow-root A3. 

  A5_1: the returned after search country option on the country menu. A5_1 means it is a child under the shadow-root A1

3. Create the objects in KS:

To let KS recognize shadow elements, you need to add an attribute name CSS for the element as below:

• A1:

 

• A2_1:

 
      You can refer to this document for more details CSS Selectors Reference

• A3_1:

• A4_3:

• A5_1:

4. Create a script 

 

5. Set time out for the waiting element to a short time such as 3 seconds only to keep KS avoid waiting for the shadow element too long

 

6. Run the script

Here is the project sample:

https://drive.google.com/file/d/1tqUl83fqOVZ4UXYZHOuo0VEpFiDUxYaZ/view?usp=sharing