Error in JavaScript: Null element detected while accessing Shadow DOM element

Currently, I am developing an automation script in Javascript for the website . The main objective is to implement cookies when a user visits the site for the first time.

Below is an excerpt of the code that I have written to retrieve cookies:

JavascriptExecutor js = (JavascriptExecutor)webdriver;
WebElement element= (WebElement) js.executeScript("return document.getElementById('usercentrics-root').shadowRoot.querySelector(\"[data-testid='uc-accept-all-button']\");");
            element.click()

The code successfully identifies the element in the browser:

https://i.sstatic.net/cFyRG.jpg

However, when executing the script in Intellij, I encounter the following error:

java.lang.NullPointerException: Cannot invoke "org.openqa.selenium.WebElement.click()" because "element" is null

https://i.sstatic.net/tUGx0.jpg

javascriptjavaselenium

Answer №1

If you are working with Java, start by creating a browser instance and locating elements:

System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");           
WebDriver driver = new ChromeDriver(); 
driver.get("http://www.google.com/");   
WebElement WE = driver.findElementByCss("YourCSSSelector"); 
WE.click();

For those using JavaScript, adjust your code as follows:

WebElement element = (WebElement) js.executeScript
("document.getElementById('usercentrics-root').
shadowRoot.querySelector(\"[data-testid='uc-accept-all-button'])\");

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

Tips for customizing the appearance of a React-Table header when sorting data

How can I change the header's background color in react-table based on a selected item? For example, if I click on ID, the ID header should change its background color to red. I have tried various methods to update the background color upon selection ...

javascriptcssreactjsreact-table

Instructions for extracting and storing values from a JSON response into an array

Utilizing react-select async feature to fetch options from an input provided via an API. The JSON response contains a list with a "FullName" field, which I aim to extract and store in an array to be used as options. Within the JSON structure, there is a l ...

javascriptarraysjsonreactjsreact-select

Learn how you can modify the default value of a Boolean column in a database table when a button is clicked with the help of JQuery or Codeigniter

When using Codeigniter datatable, I am looking to "disable" a specific row when the delete button is clicked (without erasing data from the database). To achieve this, I have added a column in the database named 'deleteflag' with datatype boolea ...

javascriptphpjquerydatabasecodeigniter

Utilizing the focus or click functionalities in Internet Explorer when working with a datepicker

Encountering an issue with the datepicker in IE8+. The code functions properly in all other browsers tested, but unfortunately our client is limited to using IE8. The problem occurs when clicking on the field to bring up the datepicker. Attempting to sele ...

javascriptjqueryclickdatepickerfocus

Tomcat hosting a dynamic duo: Spring Boot and React!

Exploring the world of Spring Boot application development with a React client using Gradle is an exciting journey for me as I navigate through these new technologies. My current progress includes successfully creating a WAR file that encompasses several i ...

javascriptspringreactjstomcatweb-deployment

Executing a JavaScript file within the Meteor JS ecosystem

Is there a way to execute a JavaScript file on the server side in a meteor JS environment? Providing some background information: I am looking to automatically insert a document into a mongo database. While I know how to do this in meteor through event-dr ...

javascriptnode.jsmeteorheroku

Can someone provide an explanation of the Typescript peerDependencies in Angular, specifically comparing versions tslib 1.* and 2.3.*?

I am in the process of starting a new angular project, but I'm facing difficulties in importing the localStorage feature. I referred to an existing project that utilized localStorage in the following way: import { Injectable } from '@angular/core ...

javascriptangulartypescript

Conceal only the anchor tag's text and include a class during the media query

In the anchor tag below, I have a text that says "Add to cart," but on mobile view, I want to change it to display the shopping cart icon (fa fa-cart). <a class="product"><?php echo $button_add_to_cart ?></a> Currently, the variable $bu ...

javascriptphpjqueryhtmlcss

Using Three.js to establish coplanarity of points and project coplanar points onto the XY plane

Looking to determine if a set of Vector3 points are co-planar in a specific plane and then project them onto the XY plane while maintaining their scale. Any suggestions on how to accomplish this efficiently using three.js? ...

javascript3dthree.js

The correlation between subject matter and the workflow of resilience

I am seeking clarity on how Subjects behave when used with the resiliency operators, specifically retry and retryWhen. The code samples below may differ slightly from the JSBin examples as I have used arrow functions and types for better understanding. Th ...

javascripttypescriptreactive-programmingrxjsfrp

JavaScript Library function in Angular Component throwing Type Error: Function is Not Recognized

I created a custom Javascript library to group together essential functions that many Angular Components require. The library called calcs.js includes functions like this: function calculateCosts(object) { do some stuff..... return answer; } To use t ...

javascriptangular

jquery toggleClass not retaining previous click event

I came across a show/hide function that seemed promising for my issue, which I found here (credit to the original author). Inspired by this, I created a demonstration on JSFiddle (https://jsfiddle.net/q7sfeju9/). However, when attempting to show rows, it d ...

javascriptjquerycssasp.net-mvc

Tips on moving information from one form to another after referencing the original page using Javascript and HTML

Imagine this scenario: A page with three text fields, each with default values. There is also a hyperlink that performs a database lookup and returns parameters to the same page where the hyperlink was clicked. The goal is for the text boxes to be automa ...

javascripthtmlperl

Custom directive not invoking function in $parsers-array

To monitor the change of a value in a customized directive, I am utilizing the $parsers unshift-function to incorporate my own function. Unfortunately, my custom function is not being triggered! Below is the code snippet for my view: <div ng-controll ...

javascriptangularjsangularjs-directive

The Power of Symfony Combined with jQuery's Data Handling Function

My app features an ajax navigation system. Each ajax link is given the class ajax, and the page it should load is stored in an aurl attribute, as shown below: <a class="ajax" aurl="/user/posts/3/edit">Edit Post</a> The element's aurl is ...

javascriptjqueryajaxsymfony1

There seems to be a glitch with jQuery on my Angular.js website

I'm trying to implement Masonry.js on my website, and although I've managed to make it work, the solution feels like a messy workaround and I can't quite figure out why it's functioning (and not functioning well). The primary issues I& ...

javascriptjqueryangularjs

Is there a variation in IE6 versions depending on the operating system used?

It's puzzling to me that customers are reporting bugs on W2K machines in IE6, yet when I test locally on a WinXP System, everything appears normal. Could it be possible that there are differences in JavaScript Execution between the two systems? I do ...

javascriptjqueryinternet-explorerframes

Utilizing React's useCallback with dependencies based on a function called within the callback

I've been working on a web application using React and came across an interesting implementation. Here's how it looks: const onAddNewAccount = useCallback(async () => { await refetch(); setOtherState((prev) => {...}); }, [refetch]); ...

javascriptreactjstypescriptreact-hooks

What is the best way to refresh my view model while using chained promises?

I've recently started learning about promises and I'm facing a challenge with updating an object in my view from two chained promises: function Test($resource, FC, UserDetailsService) { 'ngInject'; var self = this; se ...

javascriptangularjspromiseangular-promise

An illustration using Three.js

Could someone please guide me on extracting the threejs.org example showcased at this URL: . ...

javascriptthree.js