Good test reports are a fundamental component of successful test automation. But running down a test failure by looking at a test report can be a real pain sometimes.
By leveraging something like jQuery Growl you can output non-interactive debugging statements directly to the page you’re testing. This way you can see helpful information and more likely correlate it to the test actions being taken.
This can be a boon for your test runs when coupled with screenshots and/or video recordings of your test runs
Below is the sample code of how to set this up.
Sample Code
Java
// 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();
}
@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\" />');");
// jquery-growl w/ no frills
js.executeScript("$.growl({ title: 'GET', message: '/' });");
// if we wanted to see color-coded notifications, then we could use one of the following
// 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);
}
}
Python
# filename: growl.py
import unittest
from selenium import webdriver
import time
class Growl(unittest.TestCase):
def setUp(self):
self.driver = webdriver.Firefox()
def tearDown(self):
self.driver.quit()
def test_example_1(self):
driver = self.driver
driver.get('http://the-internet.herokuapp.com')
# Check for jQuery on the page, add it if needbe
driver.execute_script(
"if (!window.jQuery) {"
"var jquery = document.createElement('script');"
"jquery.type = 'text/javascript';"
"jquery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js';"
"document.getElementsByTagName('head')[0].appendChild(jquery);}")
# Use jQuery to add jquery-growl to the page
driver.execute_script("$.getScript('http://the-internet.herokuapp.com/js/vendor/jquery.growl.js')")
# Use jQuery to add jquery-growl styles to the page
driver.execute_script(
"$('head').append('"
"<link rel=stylesheet "
"href=http://the-internet.herokuapp.com/css/jquery.growl.css "
"type=text/css />');")
# jquery-growl w/ no frills
driver.execute_script("$.growl({ title: 'GET', message: '/' });")
#jquery-growl w/ colorized output
driver.execute_script("$.growl.error({ title: 'ERROR', message: 'your error message goes here' });")
driver.execute_script("$.growl.notice({ title: 'Notice', message: 'your notice message goes here' });")
driver.execute_script("$.growl.warning({ title: 'Warning!', message: 'your warning message goes here' });")
time.sleep(5)
if __name__ == "__main__":
unittest.main()
C#
// filename: Growl.cs
using NUnit.Framework;
using OpenQA.Selenium;
using OpenQA.Selenium.Firefox;
using System.Threading;
public class Growl
{
IWebDriver Driver;
IJavaScriptExecutor JSDriver;
[SetUp]
public void SetUp()
{
Driver = new FirefoxDriver();
JSDriver = (IJavaScriptExecutor) Driver;
}
[TearDown]
public void TearDown()
{
Driver.Quit();
}
// ...
[Test]
public void GrowlNotificationExample()
{
Driver.Navigate().GoToUrl("http://the-internet.herokuapp.com");
// check for jQuery, add it if it's not on the page
JSDriver.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);" +
"}");
// add jQuery Growl to the page
JSDriver.ExecuteScript("$.getScript('http://the-internet.herokuapp.com/js/vendor/jquery.growl.js')");
// add jQuery Growl Styles to the page
JSDriver.ExecuteScript("$('head').append(\"<link rel='stylesheet' " +
"href='http://the-internet.herokuapp.com/css/jquery.growl.css' " +
"type='text/css' />\");");
// trigger a plain jQuery Growl notification to display on the page
JSDriver.ExecuteScript("$.growl({ title: 'GET', message: '/' });")
//If we wanted to see color-coded notifications we would use one of the following.
JSDriver.ExecuteScript("$.growl.error({ title: 'ERROR', message: 'your message goes here' });");
JSDriver.ExecuteScript("$.growl.notice({ title: 'Notice', message: 'your notice message goes here' });");
JSDriver.ExecuteScript("$.growl.notice({ title: 'Warning!', message: 'your warning message goes here' });");
Thread.Sleep(5000);
}
}
When you save this file and run it this 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 and its styles 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
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).