Reading JavaScript variables using Selenium WebDriver

JavascriptSeleniumTestngSelenium Webdriver

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

All you have to do is:

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

That will give you what you are looking for.

Solution 2 - Javascript

No JavaScript functions need be defined. Nor is alert() needed.

Object result = js.executeScript("return globalVar");

For Python:

result = driver.execute_script("return globalVar")

Solution 3 - Javascript

In Ruby you can use page.execute_script to evaluate a JavaScript variable (if it is accessable from the scope of the web browser). It looks like there is a similar method in Java here.

Edit: This might be a use case that is more suited to a JavaScript unit testing framework such as Jasmine.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFilmiHeroView Question on Stackoverflow
Solution 1 - JavascriptJose SutiloView Answer on Stackoverflow
Solution 2 - JavascriptwtrView Answer on Stackoverflow
Solution 3 - JavascriptMartin FootView Answer on Stackoverflow