Reading JavaScript variables using Selenium WebDriver

FilmiHero picture FilmiHero · Dec 21, 2012 · Viewed 90.7k times · Source

I'm using Selenium WebDriver (Java) and TestNG to do some testing on a website I created. In this website, I also have JavaScript and in some of the functions, it returns values and also outputs values to the browser console through console.log().

I was wondering if there is an easy way for Selenium WebDriver to access some of this JavaScript information so I can perform assertions using TestNG.

I'm quite new to Selenium but I understand that you can do something like:

WebDriver driver = new ChromeDriver();
driver.findElement(By.id("btn")).click();

So is there anything similar I can do using WebDriver to read the JavaScript on the site?


Clarification

It looks like people are making the assumption that I'm trying to "execute" JavaScript code through Selenium.

Thats not the case. Instead, I'm trying to store already-defined JavaScript variable using Selenium.

Basically, I want Selenium to be able to grab the JavaScript variable's value, store it locally, and then do an assertion test on it.


Attempt 1

Say I have the following JS code for my website:

$(document).ready(function() {
    var foo = $(#"input-field-val").val();

    function returnFoo() {
        return foo;
    }
});

From what I've reading and understanding, in my seperate Selenium test file (Selenium.java), I should be able to do something like this?:

public class Selenium {
    WebDriver driver = new FirefoxDriver();
    JavascriptExecutor js = (JavascriptExecutor) driver;

    @Test
    public void testSample() {
        driver.get("www.mywebsite.com");
        js.executeScript("alert(returnFoo());");
    }
}

I do something similar to what's above but no alert box pops up. Instead, I get an error message:

Exception in thread "main" org.openqa.selenium.WebDriverException: ReferenceError: returnFoo is not defined

I'm pretty sure I'm not understanding what it means when its said that the JS variable

should not be part of a closure or local variable

I have also tried defining a global variable above the $(document).ready(function()... and setting is within function returnFoo() but still doesn't work.


Attempt 2

I've moved both foo and returnFoo() outside of the $(document).ready(function().... That has fixed ReferenceError message that I was getting in Attempt 1 above.

I hav also given foo a value so my JS code looks something like this:

var foo = "Selenium test run";

$(document).ready(function() {
...
});

function returnFoo() {
    return foo;
}

Now, I'm having a tough time assigning the return of returnFoo() to a local variable within my Selenium test. Here's what I've attempted:

public static void main(String[] args) {
        WebDriver driver = new FirefoxDriver();
        JavascriptExecutor js = (JavascriptExecutor) driver;

        driver.get("http://localhost:8080/HTML5TestApp/prod.html");
        Object val = js.executeScript("window.returnFoo();");
        System.out.println(val);
    } 

But the console display null instead of the actual value of "Selenium test run".

Attempt 2 - SOLUTION

It looks like if I do Object val = js.executeScript("alert(returnFoo());"); I get the value of foo.


SOLUTION

So here's the solution I've come up w/ to my problem thanks to the solution by Martin Foot below.

In my JavaScript file, I created a var and a setter/getter function like so:

index.js

var seleniumGlobal;

$(document).ready(function() {
...
)};

function setSG(toSet) {
    seleniumGlobal = toSet;
}

function getSG() {
    return seleniumGlobal;
}

SampleTest.java

// Do all the necessary imports

public class SampleTest {
    WebDriver driver = new FirefoxDriver();
    JavascriptExecutor js = (JavascriptExecutor) driver;

    @Test
    public void testPrintVal() {
        String sgVal = (String) js.executeScript("alert(getSG());");
        Assert.assertEquals("new value for seleniumGlobal", sgVal);
    }
}

So whenever some code in my JavaScript sets my seleniumGlobal variable through the setter method, I can call it through my Selenium test and do assertions on it.

This is probably not the most efficient way to do but if someone else has a better solution, please let me know.

Answer

Jose Sutilo picture Jose Sutilo · Feb 15, 2013

All you have to do is:

Object val = js.executeScript("return returnFoo();");

That will give you what you are looking for.