Java script offers methods like isDisplayed, isEnabled, and isSelected specifically for interacting with shadow DOM elements in selenium testing

Selenium Version: 4.0.0

Are there alternative methods to implement isDisplayed, isEnabled, isSelected using Java script for shadow dom elements in Selenium?

I attempted the steps below but unfortunately they did not work. Any advice would be appreciated.

Code:

   public void isEnabledUsingJavaScript() {
    JavascriptExecutor js = (JavascriptExecutor) driver;
    Boolean test= (Boolean) js.executeScript("document.querySelector("foo >boo").shadowRoot.querySelector("foo>boo>span").enable()");
    System.out.println(test);
}

Note: Due to being within a shadow dom, regular XPATH or CSS selectors cannot be used.

Error:-

org.openqa.selenium.JavascriptException: javascript error: document.querySelector(...).shadowRoot.querySelector(...).enable is not a function

Although I understand the issue, I am unsure of which appropriate method in JavaScript can be utilized in such scenarios.

Answer №1

To ensure proper functionality, it is important to cast the variable returned as a webElement. This will allow you to execute all operations that are typically performed on a webElement.

As an example, consider a scenario on the website (https://www.studydrive.net), where a Accept cookie button is nested under a shadow root. By leveraging a JavaScript executor, this button can be located on the page and then typecasted to a web element.

driver = new ChromeDriver();
driver.get("https://www.studydrive.net/") ;
driver.manage().window().maximize();
JavascriptExecutor js = (JavascriptExecutor) driver;
Thread.sleep(30);
WebElement element = (WebElement) js.executeScript("return document.querySelector('#usercentrics-root').shadowRoot.querySelector('#uc-center-container > div.sc-jcVcSv.gBDztr > div > div.sc-giImIA.jqkmtR > div > button.sc-gsTEea.ffHglG')");

if(element.isDisplayed()) {
System.out.println("element is displayed");
element.click();
System.out.println("element is clicked");
} else {
 System.out.println("element is not visible");
}

Program Output:

element is displayed
element is clicked

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 optimal number of selenium test scripts that can smoothly execute using Jenkins and Maven?

Situation My Java test scripts are stored in one package on Bitbucket with all the necessary libraries. I use Testng specified in my pom file and run the tests via headless Firefox on Jenkins. Recently, after adding a larger batch of tests, I encountered ...

Problem with internationalization parsing

I receive JSON data from the backend that needs to be parsed on the user interface. I have to translate all the keys from the JSON and display them on the UI. For example: i18n.t('key') will provide me with the translated value. However, for c ...

Enhancing User Experience with Spacing in Dropdown Selections

I'm having an issue with my drop down select menu that is populated with values from the database. The text looks squished as it appears without spaces like 'TitleIsAvailable'. I tried to add spaces using the console, but the changes are not ...

Vue alert: Issue encountered in watcher 'childItems' callback - 'TypeError: Unable to access property 'tag' as it is undefined'

I am currently in the process of developing the Store page for a web application. I am utilizing Axios to retrieve product data and display it in a Vue template. While the backend functionality is working correctly and the frontend is rendering successfull ...

Conceal the input field prior to making a selection from the dropdown menu

I have implemented a drop-down menu for selecting dependencies, similar to how it functions in JSFiddle. $('#user_time_zone').on('change', function() { dateCalender = $(this).val(); if (dateCalender == 'Single Date') { ...

Are backbone models causing hiccups in productivity?

Currently, I am working on a GPS data visualizer project using Backbone. Each GPS datum is stored in a backbone model and all of the data is saved in a collection. I am curious to know the kind of overhead involved in this process compared to using an arra ...

Issue with template updating when utilizing ui-router and ion-tabs in Ionic framework

CODE http://codepen.io/hawkphil/pen/LEBNVB I have set up two pages (link1 and link2) accessible from a side menu. Each page contains 2 tabs: link1: tab 1.1 and tab 1.2 link2: tab 2.1 and tab 2.2 To organize the tabs, I am utilizing ion-tabs for each p ...

What is the process for importing the util module in Node.js?

I attempted to use the isDeepStrictEqual() method for object comparison but encountered this error: util.isDeepStrictEqual() is not a function After checking the official documentation, I found out that this method was introduced in Node.js v9.0.0 w ...

HTML5sortable is causing JavaScript to run twice when the sortupdate event is triggered

Having a sortable list on my aspx page, created using this specific plugin, I encountered an unusual issue. <ul id="sortableQueue" class="sortable"> <li style="cursor: move" data-shotid="1">Shot Name - 1</li> <li style="cursor ...

Analyze the text to extract the desired information

I am trying to extract the user values from multiple links: var one = '/news/local/edit?user=marcus&owner=ffff'; var two = '/news/other/edit?user=josh&owner=ddd'; var three = '/news/local/edit?user=john'; var four = & ...

What is the process for converting a negative decimal number into hexadecimal format?

hex = Number(-59).toString(16) The hexadecimal value of -59 is -3b But it should actually be ffffffffffffffC5 Any assistance on this matter would be greatly appreciated! ...

What could be the reason behind getting a blank email?

Why am I receiving empty emails without any field values? HTML <div class="contact-form wow fadeIn" data-wow-duration="1000ms" data-wow-delay="600ms"> <div class="row"> <div class="col-sm-6"> <form id="main-contact-form" ...

Cloud function -> time stamps evaluation

I've been working on a cloud function to delete items in the "links" collection that have an end time older than the current timestamp. Although my function runs without any errors, it's not deleting the items as expected and is causing me quite ...

Converting Celsius to Fahrenheit using AngularJS

As a beginner in programming, I am eager to create a program similar to the one shown in the image below. https://i.sstatic.net/HvLyH.png In my 'converter.component.html' file, I have written the following code: <html> <head></hea ...

How can you disable listeners and minimize performance impact in concealed React components?

In order to meet our requirements, we need to display the same react component in various positions on our grid and toggle their visibility based on screen width. For example, our product module component will be displayed at position 3 on mobile devices a ...

Endless jasmine timeout

This question is a continuation of a discussion on the Remove timeout for single jasmine spec GitHub issue. Query: Can a single test be configured to never time out? The Issue: While it's possible to set a global timeout value using DEFAULT_TIMEOU ...

Tips for waiting for a page to load in Selenium using Java

I am currently seeking a method to delay page execution until all elements have been fully updated. An example scenario would be waiting for a screen value to change after clicking a button, thus ensuring that the new value has been displayed. My objectiv ...

Express POST request body is required

I am starting to learn nodejs and express, and while reviewing some code I found this interesting snippet. Can someone please explain what it means and how I can send a POST request to it using cURL? There are no specified data fields. app.post('/&apo ...

Changing text content of an element with dynamic formatting

When a link is clicked on, I want to dynamically set the text. Here is the current code: <a href="www.somelinkhere.com" onclick="getElementById('setText').innerHTML='text to replace'" target="someIFrame" ...

Adding an additional stroke to a Material-UI Circular Progress component involves customizing the styling properties

I am attempting to create a circular progress bar with a determinate value using Material-UI, similar to the example shown in this circular progress image. However, the following code does not display the additional circle as the background: <CircularP ...