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

What is the best way to extract attribute values from a CodeIgniter calendar using the Ajax success result?

What is the method in JavaScript for a child function to trigger a Return statement in its parent function?

Creating a dual-column checkbox design with CSS only

Is there a way to add a new Date to Spring Data MongoDB easily?

How about "Temporary and localized responses with Discord.JS?"

Which is the Better Choice for an MMO WebSocket Server: Node.js or C++?

Angular Automatically Generated Identifier for Event Detection

Error message: The "spawn" function is not defined and is causing a TypeError to be thrown in

Styling a textbox within a gridview using JavaScript

Solving layout issues / Techniques for determining element heights

The xslt code is failing to invoke the JavaScript function

Continuing a Sequelize transaction after a loop

Add a directive on the fly, establish a connection, and display it dynamically

Tips for dynamically updating an HTML value with Javascript

Transform an { Key : Value } Object into Regular Variables using jQuery

When accessing the webpage directly, WebDriver is able to locate elements that it was previously unable to find

Enhance Your jQuery Skills: Dynamically Apply Classes Based on URL Like a Pro!

Updating the key within an array of objects

What is the best way to divide a string into an array containing both linked and non-linked elements?

Guide on incorporating geolib into React Native for distance calculation of two locations