Skip to main content

Jun 30, 2020 - 2 minute read - Selenium WebDriver FAQs Test Automation

WebDriver Amend JavaScript

Amending the page under test can introduce risk, but if we know what we are doing, then it can make automating some conditions easier.

Why would you want to change the JavaScript of a web application you have to test?

Well, if you want to test that events get triggered correctly, and the basic structure of the page, rather than the actual functionality implemented by the JavaScript?

Perhaps the JavaScript does something that you can’t handle with the automation tool, but you still want to cover the basics of the page? This code snippet shows one way to do it.

One of the example applications that I use to illustrate principles when training has basic JavaScript validation functionality.

https://testpages.herokuapp.com/styled/basic-javascript-validation-test.html

This example has a function to validate a value in an input field:

function checkGT30(value) {
		if (value>30)
			alert("Enter a value less than 30");
	}

For the purposes of this example I will change the function so that it always issues an alert saying “changed function” instead of validating the value.

function checkGT30(value) {
		alert("changed function");
	}

You can find the full source at the bottom of this post.

Changing JavaScript

Changing javascript in general is pretty easy, we just allocate new code to the function name

e.g. you could run this code in the browser dev console and change the JavaScript

window.checkGT30 = function(value){alert("changed function");};

Execute JavaScript from WebDriver

We can do the same thing from WebDriver if we cast the driver to JavascriptExecutor.

((JavascriptExecutor)driver).executeScript(
  "window.checkGT30 = function(value){alert(\"changed function\");};"
);

Testing Changed JavaScript

@Test
public void canAmendJS(){

    final ChromeDriver driver = new ChromeDriver();

    driver.get("https://testpages.herokuapp.com/styled/basic-javascript-validation-test.html");
    
    // change the function by running a script to amend the existing
    // reference in the dom to a new anonymous function

    ((JavascriptExecutor)driver).executeScript(
       "window.checkGT30 = function(value){alert(\"changed function\");};"
    );

    final WebElement input = driver.findElement(By.id("lteq30"));
    input.sendKeys("450");
    driver.findElement(By.name("submitbutton")).click();
    
    Assertions.assertEquals("changed function", 
                driver.switchTo().alert().getText());
    
    driver.switchTo().alert().dismiss();
    driver.close();
}

We can do an awful lot with the JavascriptExecutor functionality in Selenium and they make extending the functionality of WebDriver easier.

Full Source

The full source for this is in my Webdriver Java FAQs project:

Specifically:

If you want to learn how to use Selenium WebDriver with Java then check out our online courses.


You will need a Github account to comment. Or you can contact me with your comment.

I reserve the right to delete spam comments e.g. if your comment adds no value and its purpose is simply to create a backlink to another site offering training, or courses, etc.