Navigating shadow dom elements in HTML with Selenium WebDriver

public WebElement retrieveShadowRootElement(WebElement element) {
    WebElement shadowRoot = (WebElement) ((JavascriptExecutor)driver)
        .executeScript("return arguments[0].shadowRoot", element);
    return shadowRoot;
}

WebElement rootElement= driver.findElement(By.xpath("(//div[@id='accordionSearch']//descendant::input[@class='form-control'])[1]"));
WebElement shadowRootElement= retrieveShadowRootElement(rootElement);
WebElement targetElement= shadowRootElement.findElement(By.cssSelector("div[id=editing-view-port]/div"));
targetElement.click();

Encountering issues with the code above.

https://i.sstatic.net/jf6nA.png https://i.sstatic.net/Sqwx8.png

javascriptjavaselenium

Answer №1

I encountered a similar issue recently and found that the best solution for me involved using Javascript. I utilized this Java code snippet to extract the <div id="details"> element from the first item on Chrome's download page and store it as a WebElement.

WebElement details = (WebElement) ((JavascriptExecutor) driver).
executeScript("return document.querySelector('downloads-manager').
shadowRoot.querySelector('#downloads-list downloads-item').
shadowRoot.querySelector('#content #details')");

https://i.sstatic.net/tdCgw.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the identical ReactJS hook across multiple components

I've created a hook that pulls data from an API and stores the result in my component's state using setAllCommunitiesFromSponsor. Now I want to use this same hook in another component. Instead of copying and pasting, what is the best way to imp ...

javascriptreactjsreact-hooks

Troubleshooting a Java Switch menu error and effectively invoking a method from a separate class

Hey there! I'm currently diving into the world of Java and tackling an assignment that involves creating a Menu to call various methods. Within this assignment, I have three classes - Contacto, Agenda, and Principal. The main focus is on understanding ...

javamethodsmenuswitch-statement

Troubleshooting issue with Gulp watch on Node v4.6.0

I'm currently facing a frustrating situation. I had a project up and running smoothly with a functioning gulpfile.js file, everything was perfect until I updated node to version 4.6.0. When I tried to report this issue on Gulp's git repository, t ...

javascriptnode.jsgulpgulp-watchgulp-sass

Implementing inline styles in the HEAD section of a Next.js website

I currently have a blog hosted on Jekyll at , and I'm looking to migrate it to Next.js. My unique approach involves embedding all the styles directly into the HEAD element of each HTML page, without utilizing any external stylesheet files. However, wh ...

javascriptreactjsnext.js

What is the best way to retrieve the content from the MongoDB Document in my GET request?

I encountered an issue while attempting to access the Question field within the JSON document body stored in a MongoDB database. Upon executing the GET request, the result displayed as follows: { "_readableState": { "objectMode": true, "highWaterM ...

javascriptnode.jsmongodbexpress

Using html tags in JTextArea in Java is a simple process that involves setting

Is there a way to change the color of text in a JTextArea similar to how it can be done for JLabel or JButton? When I attempt to change the color using: textArea.setText("<html><font color=\"red\">Hi</font></html>"); The ...

javahtmlswingjtextareajtextcomponent

What is the reason behind using AJAX to attempt sending a new URL request on

Having a strange issue with my product list. When trying to edit a product by clicking on it, I am redirected to the product form where an AJAX request is supposed to be sent to getFiltersGroup. However, on error, the AJAX request is somehow being sent to ...

javascriptjqueryajax

JQuery hover effect for dynamically added elements

Currently, I am working on a webpage that will trigger an ajax call upon loading. The response data in JSON format will be processed and the elements will then be added to the DOM as shown below: $.ajax({ type: 'POST', url: "http://mysite.de ...

javascriptjquerycssajax

Creating a new Selenium class instance

Hello, I am encountering an issue while trying to utilize a method from a newly instantiated class. As someone who is relatively new to both selenium and C#, here is the code snippet that I have put together... First Class [TestClass] public class U ...

c#selenium

Are Css3 Transition and Transform properties dysfunctional in older versions of IE?

Snippet of HTML Code: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/demo.css" /> </head> <body> <div></div> </body> </html> CSS Snippet: div { width: 100p ...

javascriptjqueryhtmlcss

What steps can be taken to issue an alert when the table does not contain any records?

Upon clicking the submit button, the value from the database is retrieved based on the hidden field ID and displayed in a table. If the value is present, it should load in the table; otherwise, an alert saying 'there is no record' should be displ ...

javascriptjqueryasp.netasp.net-mvc

The function and if-else statement are experiencing malfunctions

Currently in the early stages of learning coding, I've been focusing on building a solid foundation by practicing with CodeWars. Utilizing this platform for practice has been beneficial because it offers solutions for guidance. While attempting to wor ...

javascriptarraysfunctionloops

Issue with process.env.NODE_ENV not functioning appropriately in NodeJS when utilizing package.json scripts

I currently have three separate databases configured for testing, development, and production purposes. My goal now is to make my express app switch between these databases based on the script that is being executed. These are the scripts I am using: "s ...

javascriptnode.js

Getting started with Babylon.js using npm: A step-by-step guide

I recently posted about my struggles with setting up Babylon.js using npm on Stack Overflow. Since I haven't received any answers yet, I was hoping to rephrase my question: Can someone provide a detailed step-by-step guide on how to set up Babylon.js ...

javascriptnpmbabylonjs

Iterate through an array to dynamically assign values to variables using string elements

I'm facing a challenge here. I need to generate 4 new elements with the same class but different IDs without repeating code. Unfortunately, my loop doesn't seem to be working as expected. I've spent the last 2 hours trying to crack this puz ...

javascriptarrays

Exploring jQuery: Techniques for Hovering, Changing, and Toggling Images

Currently, I am busy working on my project and I am attempting to achieve this by... I ideally want everything to be operational through click actions for each individual image, allowing them to have their unique "paper". I am aiming for a hover effect an ...

javascriptjqueryhtmlcss

Is it possible to execute a Google Script on the last row of a spreadsheet exclusively

I have an email script that is functioning correctly, but I only want it to run through the last row with data in it. If there is no data in a row, then I do not need the script to run for that specific row. How can I modify the example script below to ref ...

javascriptfor-loopgoogle-apps-scriptgoogle-sheets

Encountered a 'cannot focus element' error when attempting to upload a file with Selenium automation

When attempting to upload an attachment, the issue arises when trying to send the keys instead of opening the OS-based file explorer window. Sending the path to the file would be a simpler solution. Various element identifiers were tested, but sending the ...

seleniumselenium-webdriver

Having trouble getting the jQuery/JS redirect button to function properly

I'm fairly new to working with jQuery. My current challenge involves unsetting a cookie and then navigating to the next page. There are numerous resources discussing this topic online, but what seemed like a simple task has turned into a two-hour hea ...

javascriptjqueryhttp-redirect

Is it possible for my WebDriver script to detect an event triggered by the webpage?

Is it feasible for my WebDriver script to carry out specific tests after a particular event is triggered on the webpage? Within the WebDriver script, I envision some form of event listener: document.addEventListener("hello", function(){ console.log(" ...

javascriptseleniumselenium-webdriver