How can Selenium interact with various shadow DOM elements within a dropdown menu?

I am attempting to interact with a dropdown menu in order to track activity on the page when clicking on one of its items.

Here is an overview of my HTML structure:


    <slot>
    #shadowroot
    <myoption-cmp> #shadowroot <some anchor text>
    <myoption-cmp> #shadowroot <some anchor text>
    </slot>

However, when using findElements(By.cssSelector('myoption-cmp')), I keep encountering the error "org.openqa.selenium.WebDriverException: javascript error: Cannot read property 'querySelectorAll' of null". Below is a snippet of my Selenium code:


WebElement slot = parentElement.findElement(By.cssSelector("slot"));
WebElement shadowSlot = expandShadow(slot);
List<WebElement> menuCmp = shadowSlot.findElements(By.cssSelector("myoption-cmp"));

// Accessing the list of elements
WebElement shadow2 = expandShadow(menuCmp.get(0));
WebElement anchor = shadow2.findElement(By.cssSelector("a"));
anchor.click();  

I have tried using findElement and findElements methods, but both result in errors such as "org.openqa.selenium.WebDriverException: javascript error: Cannot read property 'querySelector/querySelectorAll' of null". Any tips or suggestions would be greatly appreciated.

I attempted utilizing findElement and findElements, however, encountered errors like "org.openqa.selenium.WebDriverException: javascript error: Cannot read property 'querySelector/querySelectorAll' of null".

If anyone can provide assistance or advice, it would be highly valued.

Answer №1

I successfully discovered the resolution by utilizing

findElementInShadowRoot(shadowSlot, By.cssSelector('myoption-cmp'));

This action allowed me to expand the element and gain access to the subsequent child elements beneath the second shadow layer.

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

What is the best way to call an Angular component function from a global function, ensuring compatibility with IE11?

Currently, I am facing a challenge while integrating the Mastercard payment gateway api into an Angular-based application. The api requires a callback for success and error handling, which is passed through the data-error and data-success attributes of the ...

Unusual performance issues observed in a flexbox when adjusting window size in mobile Chrome

Encountering an unusual issue with flexbox on a mobile browser. For a visual demonstration, view this gif Specifically happening on Chrome mobile on a Google Pixel phone. Using a resize script to adjust element sizes due to limitations with 100vh: windo ...

Issues with Ajax response being added to the table

I am encountering a technical problem with my university project. The task assigned by the professor is as follows: We need to create a static table that lists 3 domain names in order to enhance the performance of the domain availability API. <table&g ...

Displaying the unique values based on the key attribute

I'm developing a category filter and struggling to showcase the duplicate options. Within my array of objects: filterData = [ { name: 'Aang', bender: 'yes', nation: 'Air', person: 'yes', show: 'ATLA&apo ...

What is the best way to ensure the constant rotation speed of this simple cube demo?

Currently delving into the world of Three.js. I'm curious about how to make the cube in this demo rotate at a consistent speed rather than depending on mouse interactions. Any tips on achieving this? ...

Unable to display the Error 404 Component within a nested Component using React Router

When attempting to display the Error component if no matches are found, I encountered an issue - selecting a non-existing route only leads to a blank page. In the example, the Main component adds a sidebar menu and renders all its children inside it. If ...

Issue with selection sort algorithm arises when dealing with non-positive inputs

I'm encountering a perplexing issue with the selection sort algorithm when dealing with arrays that contain negative numbers and zeros. Surprisingly, it works flawlessly when all the elements are positive integers. I would really appreciate any feedba ...

Gathering the presently unfinished observables within a superior-level rxjs observable

As an illustration, let's consider a scenario where I have a timer that emits every 5 seconds and lasts for 10 seconds. By using the scan operator, I can create an observable that includes an array of all the inner observables emitted up until now: c ...

Transmit text and image data to PHP using Java programming language

As a newcomer to stackoverflow, I appreciate any feedback on how I present my question. So, here is the scenario: I am trying to send both text and an image to a PHP script on a server. I have successfully sent them separately, but I'm struggling to ...

Exploring Selenium: Techniques for examining the source code of an unidentified function

I'm fairly new to using Selenium. I have come across this javascript code snippet and I am attempting to use Selenium to inspect the script, but I haven't had much luck so far. My main goal is to employ Selenium to access/inspect the script in or ...

Error with redirect in Ajax request

I have a question regarding an Ajax issue (not using jQuery)... I am trying to extract the URL from a blog that has an RSS feed in XML format. I am attempting to access the link using Ajax, which is working fine most of the time. However, sometimes I enco ...

Converting a string date format to UTC: A step-by-step guide

In my Typescript code, I am trying to convert a date/time format from string to UTC format but currently facing an issue with it. The desired output is as follows: 2018/10/27+16:00 => 20181027T01000Z import * as moment from 'moment' dates=$ ...

Styling text using SVG in HTML

I'm trying to underline a text element in SVG using the text-decoration attribute, but I'm running into an issue with the color of the line not changing. Here is the code snippet I am working with: <svg id="svg" viewBox="0 0 300 ...

Retrieving information from Prismic API using React Hooks

I'm having trouble querying data from the Prismic headless CMS API using React Hooks. Even though I know the data is being passed down correctly, the prismic API is returning null when I try to access it with React Hooks. Here is my current component ...

Automating selection of dates with Selenium in C#

I am currently diving into Selenium and I am looking to hone my skills by automating the flight search process on a specific website, . Can anyone provide me with guidance on automating the start journey date picker in a way that allows for flexibility wit ...

Struggling to retrieve the Object from a JSON file located at a specific URL

Apologies if this comes across as naive, but my venture into javascript and json is just starting. I'm eager to access the JSON object from the twitter API after executing var myjson; $.getJSON('url of the Object', function(data) { ...

What is the best way to show the contents of an array after making a getjson request?

My function makes two getJSON calls and writes the responses to an array. At the end of the second getJSON call, I used the code snippet below: alert(files.length); print_r(files); console.log(files); However, the alert shows the correct number of items ...

MySQL field being updated upon page unload

I'm currently developing a Content Management System (CMS) that allows users to access and organize records within a MySQL database. One of the features I have implemented is a user login system for the CMS. As part of this project, I am working on in ...

Exploring JavaScript functions within the Rails 4 asset pipeline directory

I am facing an issue while trying to use a JavaScript function through the Chrome Console after embedding that function within the Rails Asset Pipeline Manifest. To achieve this, I followed these steps to create and set up a basic Rails 4.2.4 App: $ rails ...

How to unselect a radio button in Vue using a button, similar to using vanilla JavaScript

Looking to translate this vanilla JavaScript code into Vue, here's the original: const radio = document.querySelector('#radio'); const boton = document.querySelector('#boton'); boton.addEventListener('click', () => { ...