Shadow DOM element automation using Selenium

[Dinu Vijayan]

Hi Everyone,

Our test application was recently upgraded to new UI with Shadow DOM elements. Am unable to find elements in Shadow DOM using normal locators like xpath, css, name, classname etc. When I searched in forums I came across JavaScriptexecutor.Queryselector function using which we can locate elements. It is identifying element but not entering the value in application. The value appears as entered in UI but when we click save the value gets erased. Could you please let me know if there is any methods to handle Shadow DOM in selenium.

Thanks in advance

[Andrei Solntsev]

Just FYI, there is a Selenide library built upon Selenium webdriver. 

Selenide already has methods for operating Shadow DOM elements:

$(shadowCss("#anyButton", "#shadow-host")).click();

$(shadowCss("p", "#shadow-host")).shouldHave(text("Inside Shadow-DOM"));

$(shadowCss("p", "#shadow-host", "#inner-shadow-host")).shouldHave(text("The Shadow-DOM inside another shadow tree"));

See https://selenide.org/2020/03/18/selenide-5.10.0/

Andrei Solntsev

чт, 4 мар. 2021 г. в 10:10, Dinu Vijayan <vdi...@gmail.com>:

Hi Everyone,

Our test application was recently upgraded to new UI with Shadow DOM elements. Am unable to find elements in Shadow DOM using normal locators like xpath, css, name, classname etc. When I searched in forums I came across JavaScriptexecutor.Queryselector function using which we can locate elements. It is identifying element but not entering the value in application. The value appears as entered in UI but when we click save the value gets erased. Could you please let me know if there is any methods to handle Shadow DOM in selenium.

Thanks in advance

--
You received this message because you are subscribed to the Google Groups "Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/cd685dfd-3614-44af-b0cf-afc9ecfe5f89n%40googlegroups.com.

[Dinu]

Thanks Andrei, is it possible to integrate Selenide into my existing selenium java framework without migrating my whole project into selenide?

You received this message because you are subscribed to a topic in the Google Groups "Selenium Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/selenium-users/ZTe35AIRugA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAE7WSaGvtfKHtFDvfcvnzW_R7xr11AoL8uNxKbWPLiH2zGmb%2Bw%40mail.gmail.com.

[Andrei Solntsev]

Hi Dinu.

Yes, it's possible.

See from slide 52: https://docs.google.com/presentation/d/1RFeSu0qfkw5w8MUpjCYU_wWqALQXtJpy6jeaJjU_JsE/edit?usp=drivesdk

пт, 5 мар. 2021 г., 08:00 Dinu <vdi...@gmail.com>:

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAA7CoJi06QaHuncddDrTGL5UDqZe_zjS2CfLGq2txXhW_%2BEkDw%40mail.gmail.com.

[Dinu]

Thanks Andrei,

I have tried executing using Selenide too but Selenide is also not able to identify the element in shadow DOM and its throwing element not found error.

$(shadowCss("component-id=chrome-add-new-button", "sn-workspace-tabs", "sn-workspace-tab-bar", "now-icon")).should(Condition.visible, Duration.ofSeconds(30));

$(shadowCss("component-id=chrome-add-new-button", "sn-workspace-tabs", "sn-workspace-tab-bar", "now-icon")).click(); 

I have tried the above code.

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAE7WSaHb-cqd0EAKL996O0jdNa%2BZutYKoOWamvcc2dcPYdA1xQ%40mail.gmail.com.

--

Regards,

Dinu V

Test Lead,

Infosys Ltd | dinu_v...@infosys.com

Mobile: 9633733183 | 07708494402

[Andrei Solntsev]

Hi. I guess you are using the wrong selectors. 

For instance, what is "sn-workspace-tabs"? If this is CSS class name, then you should write ".sn-workspace-tabs". 

Andrei Solntsev

вт, 9 мар. 2021 г. в 07:01, Dinu <vdi...@gmail.com>:

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAA7CoJgLsca1SH2f2DyqYA7vxt1jeeA0ghtw3YWPZNEvPd7Arg%40mail.gmail.com.

[Dinu]

Hi.. Its the tagName. Please find below screenshot.

You received this message because you are subscribed to the Google Groups "Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAA7CoJgLsca1SH2f2DyqYA7vxt1jeeA0ghtw3YWPZNEvPd7Arg%40mail.gmail.com.

--

You received this message because you are subscribed to a topic in the Google Groups "Selenium Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/selenium-users/ZTe35AIRugA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to selenium-user...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAE7WSaEaBjO2Y3a_XJyp4pNrSwCTcoh9fPeeXUDw0VovpAp7Hw%40mail.gmail.com.

[Tony Williams]

You have to handle only with Javascript. There is no default method available in selenium.

Regards,

Tony Williams

[Dinu]

Hi Andrei..

Sorry, i was wrong. There were issues in the css selector used. I am now able to click on the shadow DOM element. But am not able to enter text in input field. I have tried both setValue and sendKeys methods. Is there any other methods for entering text to a shadow dom input?

--

Regards,

Dinu V

[Dinu]

Hi Tony,

I have used Javascirpt, but the text is not getting entered in the actual input field. In front end it seems like its being entered but it will get cleared if focus moves to the next element.

You received this message because you are subscribed to a topic in the Google Groups "Selenium Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/selenium-users/ZTe35AIRugA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CACWHBq_Kho_P7ek%2Bemc%3DThEN76fbeeXXgy9gqUatN5o2i3hgvw%40mail.gmail.com.

--

Regards,

Dinu V

[Dinu Vijayan]

Hi Andrei.. 

Please let me know if there are any other methods for entering text to a shadow dom input?

[Andrei Solntsev]

Hi Dinu!

How exactly did you try to enter the text?

пт, 12 мар. 2021 г., 08:55 Dinu Vijayan <vdi...@gmail.com>:

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/bc5c9ced-2355-4db2-8b5e-b20f1a7ad21cn%40googlegroups.com.

[Dinu]

Hi Andrei,

I have tried the below two ways: But unfortunately both didn't work.

$(shadowCss("input[name=short_description]", "sn-workspace-content", "sn-interaction-custom-renderer",
        "now-record-form-connected", "sn-form-internal-workspace-form-layout", "now-record-form-blob", "sn-form-internal-tabs", "sn-form-internal-tab-contents",
        "now-record-form-section-column-layout", "sn-record-input-connected")).sendKeys("Test value");

$(shadowCss("input[name=short_description]", "sn-workspace-content", "sn-interaction-custom-renderer",
        "now-record-form-connected", "sn-form-internal-workspace-form-layout", "now-record-form-blob", "sn-form-internal-tabs", "sn-form-internal-tab-contents",
        "now-record-form-section-column-layout", "sn-record-input-connected")).setValue("Test value");

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAE7WSaGMZUvn9enPr%3Di%3DoyBCaE2LdHDMW161WzjCeyDbZZRE2Q%40mail.gmail.com.

--

Regards,

Dinu V

[Andrei Solntsev]

Hi Dinu!

Both $.sendKeys() and $.setValue() work for me inside Shadow Dom.

See my (working) code samples in https://github.com/selenide/selenide/pull/1432/files.

If you found some case where it's not working, please register a github issue at https://github.com/selenide/selenide/issues/new, providing your code and html. 

Andrei Solntsev

пт, 12 мар. 2021 г. в 10:41, Dinu <vdi...@gmail.com>:

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAA7CoJhjfUSko-6wqF4q%3DR%2BMTziOQx9P29M-33HamZU3%3Dqz8BQ%40mail.gmail.com.

[Dinu]

Thanks Andrei,

Am able to enter text in Chrome. Is there anything specific which should be done in Safari browser. I am facing issue in Safari browser. Created a new issue- Please check. 

https://github.com/selenide/selenide/issues/1434

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAE7WSaELVA5K4Nav6wxVmp-2xQYzWX%3DU064tzBeVKjnA3W2%3DnA%40mail.gmail.com.

--

Regards,

Dinu V

[Dinu]

Hi Andrei, 

Do we need to do something extra if we are executing scripts in Safari browser? 

[Andrei Solntsev]

Only a general safari setup (like, you should enable automation somewhere in safari settings). Nothing specific to Selenide.

I saw you registered an issue in Selenide GitHub. Thanks. It needs to be investigated. It seems that shadow Dom and pseudoelements work differently in safari. Probably some functionality doesn't even work at all. 

For example, Firefox driver doesn't allow "sendKeys" inside of shadow Dom, and we can do nothing about it. :(

пн, 15 мар. 2021 г., 14:17 Dinu <vdi...@gmail.com>:

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAA7CoJgE57oCNKK-sCZH8Sq5CvVBjHpihumC86_LEY89KFVYuw%40mail.gmail.com.

[Dinu]

Thanks Andrei,

I have tried the solution suggested by you in the git issue. But the text entered is getting cleared on subsequent action. Could you please help me with some other solution?

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAE7WSaEza-VP%2BZb7xDqfZW-Eoo%3DXeE0QEY89WUL%3D3%3De7gbU%2BaQ%40mail.gmail.com.

--

Regards,

Dinu V

[Andrei Solntsev]

Do you really think I can help more?

You need to research what is the misterious next action and why it clears the text.

вт, 16 мар. 2021 г., 05:50 Dinu <vdi...@gmail.com>:

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAA7CoJhrVkrmph0dXUKR6MEbZ-6VpCj2QnjiysqWv4VEV2gTFQ%40mail.gmail.com.

[Dinu]

🙂 Thanks Andrei.. was just checking if any other options available.

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/CAE7WSaFtiAHHSZvzhLw%3DLnNmnHHuoRDHGZ3ZAuAU9kcFuK-Zag%40mail.gmail.com.