Robot Framework doesn’t provide any out-of-the-box solution to handle shadow doms, hence we will use the document.queryselector and shadowroot web APIs.

Let’s automate a simple scenario where will use these api’s against shadow dom elements:

1. Go to https://shop.polymer-project.org/list/mens_outerwear
2. Validate the Title of the first product in the list to be Men’s Tech Shell Full-Zip

Next, we will look into our HTML DOM. To get the title of the first product we will have to traverse through 6 different elements (marked below):

So, to reach step-6, we have to traverse through some elements with shadow dom and some without. Hence, the final script will look like:

1
2
3
4
5
6
document.querySelector('shop-app').shadowRoot //1
.querySelector('iron-pages') //2
.querySelector('shop-list').shadowRoot //3
.querySelector('ul > li:nth-child(1)') //4
.querySelector('shop-list-item').shadowRoot //5
.querySelector('.title') //6

 
We will then verify this script in the browser console. It should give us the text Men’s Tech Shell Full-Zip.

shadow dom query selector console output

Let’s write the Robot framework script for the same.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
*** Settings ***
Documentation  Shadow DOM in Robot Framework
Library  SeleniumLibrary

*** Variables ***
${JSPath}=  document.querySelector('shop-app').shadowRoot  #1
    ...  .querySelector('iron-pages')  #2
    ...  .querySelector('shop-list').shadowRoot  #3
    ...  .querySelector('ul > li:nth-child(1)')  #4
    ...  .querySelector('shop-list-item').shadowRoot  #5
    ...  .querySelector('.title')  #6

*** Test Cases ***
Verify the item title by traversing Shadow DOM
    [documentation]  This test case verifies the item title by traversing through the shadow dom.
    [tags]  Smoke
    Open Browser  https://shop.polymer-project.org/list/mens_outerwear  Chrome
    Element Text Should Be  dom:${JSPath}  Men\'s Tech Shell Full-Zip  timeout=5
    Close Browser

*** Keywords ***

robot framework shadow dom test script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
*** Variables ***
${JSPath}=  document.querySelector('shop-app').shadowRoot  #1
    ...  .querySelector('iron-pages')  #2
    ...  .querySelector('shop-list').shadowRoot  #3
    ...  .querySelector('ul > li:nth-child(1)')  #4
    ...  .querySelector('shop-list-item').shadowRoot  #5
    ...  .querySelector('.title')  #6

*** Test Cases ***
Verify the item title by traversing Shadow DOM
    [documentation]  This test case verifies the item title by traversing through the shadow dom.
    [tags]  Smoke
    Open Browser  https://shop.polymer-project.org/list/mens_outerwear  Chrome
    Element Text Should Be  dom:${JSPath}  Men\'s Tech Shell Full-Zip  timeout=5
    Close Browser

> We have initialized a scalar variable ${JSPath} with our document.queryselector statement. Since our query is too long for a single line, so in order to write it in multiple lines, we have added three dots followed by two spaces at the beginning of each new line.

> Verify the item title by traversing Shadow DOM – Test case name.

> [documentation] This test case verifies the item title by traversing through the shadow dom. – More details about the test case. Useful for reports.

> [tags] Smoke – Test case tagged as ‘Smoke’.

> Open Browser https://shop.polymer-project.org/list/mens_outerwear Chrome – Opens the given url in chrome browser.

> Element Text Should Be dom:${JSPath} Men\’s Tech Shell Full-Zip timeout=5 – In the Selenium Library docs, under Explicit Locator Strategy section, its mentioned that dom: is used for writing dom expression(refer Image below). Hence we have used dom:${JSPath}.

robot framework selenium library explicit locator strategy

Then finally using Element Text Should Be we are validating the title to be Men\’s Tech Shell Full-Zip. The timeout is 5 seconds.

> Close Browser – Closes the current browser.

After Execution:

robot framework shadow dom test execution

Do check out 🙂

Github: https://github.com/alapanme/Robot-Framework
All Robot Framework Articles: https://testersdock.com/robot-framework-tutorial/