Guide on utilizing JavaScript to modify the attribute of a chosen web element with Selenium WebDriver in Java

Question

Guide on utilizing JavaScript to modify the attribute of a chosen web element with Selenium WebDriver in Java

I am seeking a way to utilize Javascript in order to set attributes for the selected element on a webpage.

After some research, I have discovered two methods for achieving this with Javascript:

Method 1

   WebDriver driver; // Assigned elsewhere
    JavascriptExecutor js = (JavascriptExecutor) driver;
    js.executeScript("document.getElementByID('//id of element').setAttribute('attr', '10')");

Method 2

WebElement element = driver.findElement(By.id("foo"));
    String contents = (String)((JavascriptExecutor)driver).executeScript("return arguments[0].innerHTML;", element);

However, my challenge lies in applying Javascript to a specific WebElement that I have located using Selenium WebDriver.

For instance, after selecting a link with Selenium WebDriver:

driver.findElement(By.linkText("Click ME"))

I now wish to set an attribute for this particular WebElement using Javascript.

I am unsure how to merge these two approaches and would greatly appreciate any guidance in finding a solution.

java javascript selenium selenium-webdriver

Answer 1

Answer №1

Similar to this:

JavaScriptExecutor js = (JavascriptExecutor) driver;
WebElement clickElement = driver.findElement(By.linkText("Click Here"));
js.executeScript("arguments[0].setAttribute('value', '10')",clickElement);

Answer 2

Similar to this:

JavaScriptExecutor js = (JavascriptExecutor) driver;
WebElement clickElement = driver.findElement(By.linkText("Click Here"));
js.executeScript("arguments[0].setAttribute('value', '10')",clickElement);

Answer 3

Answer №2

I encountered a similar issue and tackled it using the JavaScript Executor.

In my scenario, I had a list of elements where I needed to modify a specific property. First, I located the element, iterated through the list, created a JavaScriptExecutor object, and then applied the script to that individual element.

//arguments[0] refers to the element
//arguments[1] refers to the property
//arguments[2] refers to the new value of the property

List<WebElement> unselectableDiv = driver.findElements(By.xpath("//div[@class='x-grid3-cell-inner x-grid3-col-6']"));

for (WebElement element : unselectableDiv) {

    // System.out.println( "**** Checking the size of div "+unselectableDiv.size());

    JavascriptExecutor js = (JavascriptExecutor) driver;

    String scriptSetAttr = "arguments[0].setAttribute(arguments[1],arguments[2])";

    js.executeScript(scriptSetAttr, element, "unselectable", "off");

    System.out.println(" *****   check value of Div property " + element.getAttribute("unselectable"));
}

Answer 4

I encountered a similar issue and tackled it using the JavaScript Executor.

In my scenario, I had a list of elements where I needed to modify a specific property. First, I located the element, iterated through the list, created a JavaScriptExecutor object, and then applied the script to that individual element.

//arguments[0] refers to the element
//arguments[1] refers to the property
//arguments[2] refers to the new value of the property

List<WebElement> unselectableDiv = driver.findElements(By.xpath("//div[@class='x-grid3-cell-inner x-grid3-col-6']"));

for (WebElement element : unselectableDiv) {

    // System.out.println( "**** Checking the size of div "+unselectableDiv.size());

    JavascriptExecutor js = (JavascriptExecutor) driver;

    String scriptSetAttr = "arguments[0].setAttribute(arguments[1],arguments[2])";

    js.executeScript(scriptSetAttr, element, "unselectable", "off");

    System.out.println(" *****   check value of Div property " + element.getAttribute("unselectable"));
}

Answer 5

Answer №3

Based on the tests you've run with your code:

driver.findElement(By.linkText("Click ME"))

The content inside innerHTML appears to be set as "Click ME".

If you want to update the value to, for example, 10 in the innerHTML, you can utilize the executeScript() method from the JavascriptExecutor interface by following these steps:

By utilizing innerHTML:

WebDriver driver;
WebElement element = driver.findElement(By.linkText("Click ME"));
JavascriptExecutor jse = (JavascriptExecutor) driver;
jse.executeScript("arguments[0].setAttribute('innerHTML', '10')", element);

It is recommended that you employ a WebDriverWait for the elementToBeClickable() function using this solution:

Using textContent:

WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.linkText("Click ME")))
((JavascriptExecutor) driver).executeScript("arguments[0].setAttribute('textContent','10')", element);

Resource

You can find further detailed discussions here:

Selenium Datepicker using JavascriptExecutor

Answer 6

Based on the tests you've run with your code:

driver.findElement(By.linkText("Click ME"))

The content inside innerHTML appears to be set as "Click ME".

If you want to update the value to, for example, 10 in the innerHTML, you can utilize the executeScript() method from the JavascriptExecutor interface by following these steps:

By utilizing innerHTML:

WebDriver driver;
WebElement element = driver.findElement(By.linkText("Click ME"));
JavascriptExecutor jse = (JavascriptExecutor) driver;
jse.executeScript("arguments[0].setAttribute('innerHTML', '10')", element);

It is recommended that you employ a WebDriverWait for the elementToBeClickable() function using this solution:

Using textContent:

WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.linkText("Click ME")))
((JavascriptExecutor) driver).executeScript("arguments[0].setAttribute('textContent','10')", element);

Resource

You can find further detailed discussions here:

Selenium Datepicker using JavascriptExecutor

Guide on utilizing JavaScript to modify the attribute of a chosen web element with Selenium WebDriver in Java

Answer №1

Answer №2

Answer №3

Resource

Similar questions

Next.js allows you to create a single page that corresponds to the root path '/' as well as a dynamic route '/param'

Transforming JSON data into Java objects is seamless with the JSON to Java Object Mapper that integrates smoothly with J2objc

Strategies for transferring information to a different component in a React application

React JS does not allow TextField and Select to change

Users are reporting that verification emails are not being sent when the Accounts.createUser function is used within

Is there a way to resolve the issue of my localStorage getting overridden on page refresh?

The inputs for Node express middleware are unclear and lack definition

Finding a problem in node.js

How can you rearrange the order of objects in an array to only include duplicates?

Bringing in a selection of functions as an object using ES6 imports

Using Node JS to retrieve JSON data from index.html upon button click

Angular: Struggling with Parent Component not recognizing changes in Child Component

Storing a group of IWebElements as a collection in C# with Selenium by utilizing the [FindsBy] attribute

What is causing express.js not to authenticate properly?

What is the best way to incorporate a dynamic background in NextJS using Tailwind?

Developing components with jQuery

Issue with sending functions to other components in Angular

Setting character limits within textareas based on CSS classes in a dynamic manner

Perform the function prior to making any adjustments to the viewmodel attributes

Efficiently extracting text data from extensive HTML documents using the BeautifulSoup library