How to use javascript to set attribute of selected web element using selenium Webdriver using java?

Question

I want to use javascript to set attribute for selected element on webpage.

I have found 2 ways to set attribute using javascript

1

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

2

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

But I want to apply javascript to specific webelement which i have found using selenium webdriver

as an example i have select one link using selenium webdriver

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

Now I want to set attribute of this webelement using javascript

but I don't know how to combine both

please help me to find solution

score 32 · Accepted Answer · edited May 12 '15 at 21:54

32

Along the lines of:

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

edited May 12 '15 at 21:54

alecxe

462,703
120
1,088
1,195

answered Nov 12 '13 at 16:40

nilesh

14,131
7
65
79

score 1 · Answer 2 · answered Jul 06 '20 at 05:38

I have also faced a similar issue and I have used the javascript Executor

so in my case, I have a list of elements on which I have to change one property

here first I am finding the element, then traversing through the list, and creating a javascriptExecutor object and then executing the script on that particular element

//arguments[0] means the element
//arguments[1] means the property
//arguments[2] means the new value of the propert


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"));

        }

score 0 · Answer 3 · answered Sep 04 '20 at 10:38

As per your code trials:

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

The innerHTML seems to be set as Click ME.

So, to set a new value e.g. 10 as the innerHTML you can use the executeScript() method of the JavascriptExecutor interface and you can use the following solution:

Using innerHTML:

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

Ideally, you need to you need to induce WebDriverWait for the elementToBeClickable() and and you can use the following 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);

Reference

You can find a relevant detailed discussion in:

Selenium Datepicker using JavascriptExecutor

How to use javascript to set attribute of selected web element using selenium Webdriver using java?

3 Answers3

Reference

Linked