Reading JavaScript variables using Selenium WebDriver

Question

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 1

All you have to do is:

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

That will give you what you are looking for.