Selenium Example – How to Amend the JavaScript of the Web Application Under Test

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 in Selenium Simplified has basic Ajax functionality.

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

To play along at home you need to setup Java, an IDE, have Selenium Server and Selenium Java Client in your build path. And add Junit 4 to the build path If you don’t know how to do this then the instructions in the preview from Selenium Simplified should help – you can find the preview on Scribd here.

I will include the full source code for the example so you can cut and paste it in to your buy inderal online usa IDE. This example starts up the selenium server automatically.

package com.eviltester.selenium.junit.javaScript;
import static org.junit.Assert.*;
import org.junit.After;
import org.junit.AfterClass;
import org.junit.BeforeClass;
import org.junit.Test;
import org.openqa.selenium.server.SeleniumServer;
import com.thoughtworks.selenium.DefaultSelenium;
import com.thoughtworks.selenium.Selenium;

public class ChangeJavaScript {

	static SeleniumServer server;
	Selenium selenium;

	@BeforeClass
	public static void startServer() throws Exception {

		server = new SeleniumServer();
		server.start();

	}

	@Test
	public void overwriteTheJavaScript() {

		selenium = new DefaultSelenium("localhost", server.getPort(),
				"*iexplore", "http://www.eviltester.com");
		selenium.start();
		selenium.open("/selenium/basic_ajax.html");

		// check existing function
		selenium.type("lteq30", "400");
		selenium.fireEvent("lteq30", "blur");
		assertEquals("Enter a value less than 30", selenium.getAlert());

		// change the function by running a script to amend the existing
		// reference in the dom to a new anonymous function

		selenium.runScript("window.checkGT30 = function(value){alert(\"changed function\");};");
		selenium.type("lteq30", "500");
		selenium.fireEvent("lteq30", "blur");
		assertEquals("changed function", selenium.getAlert());
	}

	@After
	public void stopSelenium() {

		selenium.close();
		selenium.stop();

	}

	@AfterClass
	public static void stopServer() {

		server.stop();

	}

}

 

This example:

  • starts up selenium server in the @BeforeClass
  • In the test, starts a selenium session and opens the page
  • checks that the javascript function currently works as expected by generating an alert when the entered value compares greater than 30
  • replaces the code of the function with our own code
  • triggers that function and checks that the alert generated read “changed function”
  • in the @After stops the selenium session
  • in the @AfterClass stops the selenium server

We can do an awful lot with the Javascript functions in Selenium and they make extending the functionality of Selenium-RC easy. Hope that helps.

This entry was posted in Selenium Simplified Blog, Selenium-RC. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *