Skip to main content

Catching java script errors with WebDriver

The topic of catching java script errors with webdriver has been discussed time and again. This was also a hot topic during the days of Selenium RC. There have been quite a few approaches to catch java script errors with WebDriver, like  -


  • Adding extra script to web page and using JavascriptExecutor to retrieve them. I won’t recommend this approach as it requires application code to be changed to be able to test it
  • Using Firefox extension to catch the java script errors
  • And of late, there has been a beta feature available in WebDriver APIs which lets you capture browser console log. Using this you can capture browser level logs. I like this approach as it does not require application code to be modified or adding extra extension to a browser. I experimented this approach with FF 47.0.1, Chrome 50 and Selenium 2.53.1 and worked like a charm.
Let’s consider blog - https://rationaleemotions.wordpress.com/ which has a 404 error and it is visible on console. (By the very useful blog, you may like to follow it if not already :)) -
Screenshot from 2016-07-11 16:54:06.png
Browser console is also the place where javascript error would logged. Let’s catch and print this error on Chrome. Here is a sample code to do this -


package com.seleniumtests.tests;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.logging.LogEntries;
import org.openqa.selenium.logging.LogEntry;
import org.openqa.selenium.logging.LogType;
import org.testng.annotations.Test;
public class JavaScriptErrorTest {
  WebDriver webDriver;
  LogEntries logEntries;
  public static void logConsoleEntries (LogEntries logEntries) {
      for (LogEntry logEntry : logEntries) {
          System.out.println(String.valueOf(" Time Stamp: " + logEntry.getTimestamp()));
          System.out.println(String.valueOf(" Log Level: " + logEntry.getLevel()));
          System.out.println(String.valueOf(" Log Message: " + logEntry.getMessage()));
      }
  }
  @Test
  public void catchJavaScriptError() throws Exception {
      String url = "https://rationaleemotions.wordpress.com/";
      System.setProperty("webdriver.chrome.driver",
              "chromedriver");
      webDriver = new ChromeDriver();
      webDriver.get(url);
      logEntries = webDriver.manage().logs().get(LogType.BROWSER);
      logConsoleEntries(logEntries);
      webDriver.quit();
  }
}
And following message is printed -


Time Stamp: 1468249126412 Log Level: SEVERE Log Message: https://s0.wp.com/wp-content/themes/pub/themorningafter/inc/style-wpcom.css?ver=4.5.3-20160628 0:0 Failed to load resource: the server responded with a status of 404 ()
You can build your assert statement around log.
Let’s see an example of javascript error now and this time with Firefox browser. We will consider website - http://www.softwaretestingtricks.com/ for testing and it seems to have quite a few java scripts errors. Lets update our test to use Firefox driver -


@Test
public void catchJavaScriptError() throws Exception {
  String url = "http://www.softwaretestingtricks.com/";
  webDriver = new FirefoxDriver();
  webDriver.get(url);
  logEntries = webDriver.manage().logs().get(LogType.BROWSER);
  logConsoleEntries(logEntries);
  webDriver.quit();
}
This would print lots of logs and one log would be a js error -


Time Stamp: 1468310250086 Log Level: SEVERE Log Message: TypeError: $(...).flexslider is not a function
If you want to restrict the amount of logs then you can restrict the logs to a given level when instantiating your driver -


DesiredCapabilities desiredCapabilities = new DesiredCapabilities();
LoggingPreferences loggingPreferences = new LoggingPreferences();
loggingPreferences.enable(LogType.BROWSER, Level.SEVERE);
desiredCapabilities.setCapability(CapabilityType.LOGGING_PREFS, loggingPreferences);
webDriver = new FirefoxDriver(desiredCapabilities);
And now you would only have sever errors printed. I am reluctant to use this method of restricting amount of logs as I see different results in chrome and firefox. For example logging SEVERE errors reported following on chrome -


Time Stamp: 1468311387330 Log Level: SEVERE Log Message: http://reportage.wp-theme.pro/wp-content/themes/reportage/images/social/facebook.png 0:0 Failed to load resource: net::ERR_NAME_NOT_RESOLVED Time Stamp: 1468311387331 Log Level: SEVERE Log Message: http://reportage.wp-theme.pro/wp-content/themes/reportage/images/social/twitter.png 0:0 Failed to load resource: net::ERR_NAME_NOT_RESOLVED Time Stamp: 1468311387331 Log Level: SEVERE Log Message: http://reportage.wp-theme.pro/wp-content/themes/reportage/images/social/vimeo.png 0:0 Failed to load resource: net::ERR_NAME_NOT_RESOLVED Time Stamp: 1468311387331 Log Level: SEVERE Log Message: http://reportage.wp-theme.pro/wp-content/themes/reportage/images/social/linkedin.png 0:0 Failed to load resource: net::ERR_NAME_NOT_RESOLVED Time Stamp: 1468311387331 Log Level: SEVERE Log Message: http://reportage.wp-theme.pro/wp-content/themes/reportage/images/social/googleplus.png 0:0 Failed to load resource: net::ERR_NAME_NOT_RESOLVED Time Stamp: 1468311387584 Log Level: SEVERE Log Message: javascript 1:187 Uncaught TypeError: Cannot read property 'title' of undefined Time Stamp: 1468311387859 Log Level: SEVERE Log Message: javascript 1:4571 Uncaught TypeError: Cannot read property '0' of undefined
And following on firefox -


Time Stamp: 1468311872314 Log Level: SEVERE Log Message: TypeError: entry is undefined Time Stamp: 1468311872464 Log Level: SEVERE Log Message: TypeError: json.feed.entry is undefined Time Stamp: 1468311873221 Log Level: SEVERE Log Message: TypeError: json.feed.entry is undefined Time Stamp: 1468311873969 Log Level: SEVERE Log Message: SyntaxError: missing ) after argument list Time Stamp: 1468311876268 Log Level: SEVERE Log Message: TypeError: $(...).flexslider is not a function
Hence I prefer to not restrict the amount the log, print all the log and parse log for possible errors.
Form the above example, it is clear that we can capture logs for both Firefox and Chrome browser. But beware that this function is yet beta (at the time of writing this post) and you may encounter unexpected errors.

But collecting browser logs for javascript errors on each event would result in lots of extra code and corresponding checks. What if we could automate javascript error check which takes place on each test method? I can think of listener doing this for us. What do you think?
Labels:

Popular posts from this blog

Verify email confirmation using Selenium WebDriver

Note: If you are new to java and selenium then start with selenium java training videos .   How to Verify Email Confirmation Using Selenium 4 and JavaMail (2026 Guide) Email confirmation is a critical part of most registration flows — account activation, password reset, multi-factor authentication, and onboarding. Every automation engineer eventually faces the same challenge: How do you verify an email confirmation link inside a Selenium test without making it slow and flaky? The wrong instinct is to automate Gmail's UI with Selenium. It's fragile, slow, and breaks constantly. The right approach: Use Selenium for browser automation Use JavaMail (IMAP) to read the email directly Extract the confirmation link Continue the test in Selenium Why Not Automate Gmail UI With Selenium? Automating the Gmail UI means logging in, searching, clicking a message, and parsing content from a third-party interface that changes frequently. This leads to: Flaky...
13 comments
Read more

Using xPath to reach parent of an element

Note: If you are new to java and selenium then start with selenium java training videos .   I generally prefer CSS selectors over XPath when writing Selenium locators. CSS selectors are concise, readable, and usually provide everything I need. However, there are situations where XPath is a better fit—particularly when I need to navigate through an element's hierarchy, such as moving from an element to its parent, grandparent, or sibling. This post shows one such real-world example. The Problem I came across a situation where I needed to click a link based on the value of an input field. The HTML structure contained multiple similar groups of elements. The input field and the link I wanted to click were not directly related, but they shared a common parent structure. In the following example above, the input element is highlighted, and I need to click the corresponding anchor ( <a> ) element . The challenge is that there may be multiple similar structures on the page. I th...
Read more

Real Time JMeter Result Using Backend Listener

Since JMeter 2.13 Backend Listener has been available to create real time graph of JMeter Test. Following tutorial explain the entire process in detail. At the end of this tutorial you would be able to create JMeter Live Test Result dashboard similar to following - This tutorial borrows information from many sources and my own experiments with JMeter live reporting dashboard. I have added source of information wherever applicable But before we can build such a snazzy JMeter Live Reporting dashboard we need to understand two more components - influxDB (a time series database) and Grafana Dashboard This is a big tutorial, so take deep breath :-) and follow on. Once you complete set up specified in this tutorial then you can watch JMeter Training Video Tutorial to watch this in action. What is Time Series Database? A time series is a sequence of data points , typically consisting of successive measurements made over a time interval . Examples of time ...
Read more