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.

javascriptjavaselenium

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

Ways to Retrieve the Text From the Selected Index in Datalist Element

I need to extract the inner text of the option tag using pure JavaScript This is the HTML code I am working with: <input list="in" name="i_n" class="form-control" placeholder="Enter Item Name" required> <datalist id="in" onChange="rate(this)"&g ...

javascripthtml

Tips for modifying configuration properties within a Jenkins Pipeline using a Groovy script

As a newcomer to Jenkin Pipeline, I am faced with the task of integrating our maven-based selenium-java Automation framework into the pipeline using a groovy script. Within the framework, we utilize a config.properties file to store crucial information su ...

javaselenium-webdriverjenkins-pipelinemaven-2jenkins-groovy

Fetching Data from Response Headers in Angular 4.3.3 HttpClient

(Text Editor: Visual Studio Code; TypeScript Version: 2.2.1) The main objective here is to fetch the headers of the response from a request Let's consider a scenario where we make a POST request using HttpClient within a service: import { Injec ...

javascriptangulartypescriptrequesttypescript2.0

Creating a resizable SVG rectangle element with React

Hey, I'm a beginner in Svg and currently learning ReactJs. I have a question that I'm not sure is possible or not. I have an Svg element with its children wrapped inside a g. The g element contains a rect element that I want to make resizable usi ...

javascriptreactjssvg

If other options fail, Else If may not be a suitable choice

This is the process: switching from Issue: x==0||1 to x==0||x==1 etc. This code runs from an .html file <body> <div class="" id="pimg1"> </body><script> var x=new Date().getMonth(); if (x == 0||x == 5||x == 2){docu ...

javascripthtmlcsslogical-operators

Tips for restricting additional input when maximum length is reached in an Angular app

In my Angular 6 application, I am working on implementing a directive that prevents users from typing additional characters in an input field. However, I want to allow certain non-data input keys such as tab, delete, and backspace. Currently, I have an if ...

javascripthtmlangulartypescript

What is the best way to obtain a unique identifier for an element?

I'm facing a tricky situation where the id keeps changing randomly, making it impossible to use find_element_by_id. There are several divs above, <div class="x-tree-view x-fit-item x-tree-view-default x-unselectable" id="treeview-2234" tabinde ...

pythonseleniumselenium-webdriver

An ELIFECYCLE error was encountered during the production deployment process, resulting in error number

I am currently struggling with a perplexing issue and urgently need to resolve it, so any guidance would be greatly appreciated. My project is built using Laravel and Vue, with Docker managing the image container. The application is deployed on AWS. The ...

javascriptnode.jslaravelvue.jswebpack

I am looking to insert an array of a specific type into a Postgres database using Node.js, but I am unsure of the process

query.callfunction('fn_create_mp_product', parameters, (err, result) => { if (err) { console.log(err) callback(err); } else { if (result.status == 'success') { callb ...

javascriptnode.jsarrayspostgresql

Using React to trigger a child component's function upon clicking a tab

I need assistance with creating a React app that includes two tabs (Tab1, Tab2). When Tab2 is clicked, I want a message to appear in the console saying 'Function A is called'. Unfortunately, the code I have currently does not display the message ...

javascriptreactjsreact-hooksjsx

I have developed a function that adds up price values, but for some reason it is always lagging one step behind

I am facing an issue with my React container that has add and subtract functions. These functions are triggered whenever a user clicks on '+' or '-' spans, to calculate the total 'price' of three different 'products' ...

javascriptreactjsfunctionreact-redux

Having trouble resolving errors in Visual Studio Code after failing to properly close a parent function? Learn how to fix this issue

Here we have the code starting with the construct function followed by the parents function public construct() //child { super.construct; } protected construct() //parent { } The issue arises where I am not receiving an er ...

javascripttypescriptvisual-studio-codeerror-handling

How can JavaScript be used to make an AJAX request to a server-side function?

I am diving into the world of AJAX and feeling a bit uncertain about how to structure my AJAX call. $.ajax({ type: "POST", url: "Default.aspx/function", data: '{ searchBy: id }', contentType: "application/json; charset=utf-8" }). ...

javascriptjqueryajax

What is the best way to retrieve environment variables from an NPM package in an Angular 5 application

Is there a method for my node module, created from an Angular 5 application, to access the environment variable from the Angular 5 application (environments/environment.ts)? Perhaps Angular 5 exports its environment variables to JavaScript global variables ...

javascriptangularnpmnode-modulesangular5

Trouble with VueJS refresh functionality

I am facing an issue with a method that needs to run on route load. Despite attempting to call it from the updated hook, it is not functioning as expected. Additionally, I have encountered an ESLint error. methods: { getDeals (key, cb) { this.dealsR ...

javascriptvue.jsvuejs2

Error in Angular: Http Provider Not Found

NPM Version: 8.1.4 Encountered Issue: Error: Uncaught (in promise): Error: Error in ./SignupComponent class SignupComponent_Host - inline template:0:0 caused by: No provider for Http! Error: No provider for Http! The error message usually indicates the a ...

javascriptangularhttptypescript

Utilize JavaScript to parse JSON response data, calculate the average of a specified field while keeping track of

The data returned from the API call is structured as follows: var array = {"scores":[ { userid: "1", mark: 4.3 }, { userid: "1", mark: 3.8 }, { userid: "2", mark: 4.6 }, { userid: "2&quo ...

javascriptarraysjson

What's causing the failure in the execution of the "Verify version" step?

Upon reviewing the 3DSecure GlobalPay documentation, my team decided to integrate it using JSON, incorporating our own client-side implementation. This decision was made because we already have another integration with a different 3DS verification service ...

javascriptvue.js3d-securerealex-payments-apiglobal-payments-api

Using the @ symbol in jQuery within an MVC framework can be achieved by first ensuring that

I'm attempting to incorporate the @ symbol into a JavaScript if condition, but I keep receiving an error. if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) { alert('yes'); ...

javascriptjqueryasp.net-mvc

Updating a component with React JS setState() must be done on a mounted or mounting component

I encountered an issue where I am getting the error message setState(...): Can only update a mounted or mounting component., but I am struggling to find a solution. import React, { Component } from 'react'; import Loading1 from '../images/ ...

javascriptreactjsjsx