Detecting javascript errors using JSErrorCollector in firefox with cucumber and selenium or watir-webdriver

Apr 23

Detecting javascript errors using JSErrorCollector in firefox with cucumber and selenium or watir-webdriver

Automation, Cucumber, Domain Expertise, Javascript, Ruby, Tools, Watir Add comments

Introduction

Hi All,

In this post we explain how to detect Javascript Errors in firefox using selenium, watir webdriver and cucumber. If you are unfamiliar with these frameworks you can read up on our previous post about Web testing with cucumber.

Get JSErrorCollector

First, you need to get JSErrorCollector.xpi which you can get here. Then, store it under features/support/extensions in your cucumber project location.

Add JSErrorCollector.xpi to your browser profile

require 'rubygems'
require 'selenium-webdriver'
require 'watir-webdriver'
require 'logger'
 
#Start the logger
$log = Logger.new('log/selenium.log')
#Create a profile
profile = Selenium::WebDriver::Firefox::Profile.new
 
#Add JS error detection to the profile!
profile.add_extension "features/support/extensions/JSErrorCollector.xpi" rescue p "Cannot add JSErrorCollector.xpi to profile"

Launch a browser using the profile you created

Now you can launch a new browser instance using:

$BROWSER = Watir::Browser.new 'firefox', :profile => profile
$BROWSER.goto "http://www.spritecloud.com"

When the JSErrorCollector is installed successfully, you will see the error collector counter in the bottom right of the launched browser as displayed in the image below.

Collect the JS errors

First off, we create a separate method to get the JS errors formatted how you want to display them when one or more JS errors are detected.

#Function that returns a string that presents the details of the occurred JS errors
def get_js_error_feedback()
  jserror_descriptions = ""
  begin
    jserrors = $BROWSER.execute_script("return window.JSErrorCollector_errors.pump()")
    jserrors.each do |jserror|
      $log.debug "ERROR: JS error detected:\n#{jserror["errorMessage"]} (#{jserror["sourceName"]}:#{jserror["lineNumber"]})"
 
      jserror_descriptions += "JS error detected:
   #{jserror["errorMessage"]} (#{jserror["sourceName"]}:#{jserror["lineNumber"]})
"
    end
  rescue Exception => e
    $log.debug "Checking for JS errors failed with: #{e.message}"
  end
  jserror_descriptions
end

Raise exception when JS error is detected

When using cucumber, you can create a hook after every teststep. In this hook we raise an exception when one or more JS errors are detected.

AfterStep do |scenario|
  raise get_js_error_feedback() unless get_js_error_feedback().empty?
end

Note that this is a Collector, so at the end of each execution, the JS errors of all the visited pages are collected. For speeding up the tests, you can do the check after the end of each scenario (use hook AfterScenario) and cleanup the list after that.

Good Luck!

6 Responses to “Detecting javascript errors using JSErrorCollector in firefox with cucumber and selenium or watir-webdriver”

near says:

May 29, 2012 at 10:47 am

very good ，thx 。Hope to have more knowledge to learn
Dan says:

September 7, 2012 at 10:26 pm

There’s an error in your example.

$BROWSER = Watir::Browser.new ‘firefox’, :profile => $profile

should be

$BROWSER = Watir::Browser.new ‘firefox’, :profile => profile
barzilay says:

September 14, 2012 at 10:35 am

Thanks for the feedback Dan, has been adjusted!
Mickael says:

December 12, 2012 at 5:44 pm

Thank you for the article.

I was trying to use this setup on my project, where we are using Capybara; but now the visit(“http://….”) method fails with:

undefined method `visit’ for # (NoMethodError)

Any idea why that could be and how to workaround the problem?

I think what’s causing the problem is this line, as commenting it out doesn’t throw the error:

profile.add_extension “features/support/extensions/JSErrorCollector.xpi” rescue p “Cannot add JSErrorCollector.xpi to profile”
Mickael says:

December 12, 2012 at 6:27 pm

When I got the error above I had the profile.add line before:

Capybara::Selenium::Driver.new(app, :profile => profile)

Now that I’ve put the following:

Capybara.register_driver :selenium do |app|
profile = Selenium::WebDriver::Firefox::Profile.new
#Add JS error detection to the profile!
profile.add_extension “features/support/extensions/JSErrorCollector.xpi” rescue p “Cannot add JSErrorCollector.xpi to profile”
….

I’m getting this error:

Zip end of central directory signature not found (Zip::ZipError)
Naveen says:

May 14, 2013 at 2:21 pm

Thank you for the post.. It works like charm.
It will surely save several hours of my time.

Thanks again