_java

Example

First let's import our requisite classes (for annotations (e.g., org.junit.After, etc.), driving the browser with Selenium (e.g., org.openqa.selenium.WebDriver, etc.), and matchers for our assertions (e.g., org.hamcrest.CoreMatchers, etc.)) and start our class with some setup and teardown methods.

// filename: Growl.java
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Growl {
    WebDriver driver;
    JavascriptExecutor js;

    @Before
    public void setUp() throws Exception {
        driver = new FirefoxDriver();
        js = (JavascriptExecutor) driver;
    }

    @After
    public void tearDown() throws Exception {
        driver.quit();
    }
// ...

Next we'll need to visit the page we want to display notifications on and do some work with JavaScript to load jQuery, jQuery Growl, and styles for jQuery Growl. After that, we can issue commands to jQuery Growl to make notification messages display on the page.

// filename: Growl.java
// ...
    @Test
    public void growlTest() throws InterruptedException {
        driver.get("http://the-internet.herokuapp.com/");

        // Check for jQuery on the page, add it if need be
        js.executeScript("if (!window.jQuery) {" +
                "var jquery = document.createElement('script'); jquery.type = 'text/javascript';" +
                "jquery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js';" +
                "document.getElementsByTagName('head')[0].appendChild(jquery);" +
                "}");

        // Use jQuery to add jquery-growl to the page
        js.executeScript("$.getScript('http://the-internet.herokuapp.com/js/vendor/jquery.growl.js')");

        // Use jQuery to add jquery-growl styles to the page
        js.executeScript("$('head').append('<link rel=\"stylesheet\" href=\"http://the-internet.herokuapp.com/css/jquery.growl.css\" type=\"text/css\" />');");

        Thread.sleep(5000); // Adding 2 seconds of extra time

        // jquery-growl w/ no frills
        js.executeScript("$.growl({ title: 'GET', message: '/' });");

        Thread.sleep(5000); // Adding 2 seconds of extra time to see 'GET' message
// ...

And if we wanted to see color-coded notifications, then we could use one of the following:

// filename: Growl.java
// ...
        // jquery-growl w/ colorized output
        js.executeScript("$.growl.error({ title: 'ERROR', message: 'your error message goes here' });");
        js.executeScript("$.growl.notice({ title: 'Notice', message: 'your notice message goes here' });");
        js.executeScript("$.growl.warning({ title: 'Warning!', message: 'your warning message goes here' });");
        Thread.sleep(5000);
    }

}

The Thread.Sleep(5000); is there for demonstration purposes. It will keep the Growl notifications on the page for 5 seconds, so they're easier to see. However, if your test fails due to growl, you can also use Thread.Sleep(5000); to add some more time to your test.

Expected Behavior

When you save this file and run it (e.g., mvn clean test from the command-line) here is what will happen:

• Browser opens
• Visit the page
• Make sure jQuery is on the page, add it if it's not
• Add jQuery Growl to the page
• Display a set of notification messages in the top-right corner of the page with jQuery Growl
• Notification messages disappear after 5 seconds
• Browser closes

Summary

In order to use this approach, you will need to load jQuery Growl on every page you want to display output to -- which can be a bit of overhead. But if you want rich messaging like this, then that's the price you have to pay (unless you can get your team to add it to the application under test).

I'd like to give a big thanks to Jon Austen (Twitter, GitHub, Blog) for giving me the idea to use jQuery Growl with Selenium and Roman Isko for contributing the code to port this tip to Java. Want me to cover more tips in Java or other programming languages? Send me a pull request for an existing tip and I will! All code examples are open source and available here.

Happy Testing!