blog

Let's talk about testing

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

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!


  • near

    very good ,thx 。Hope to have more knowledge to learn

  • Dan

    There’s an error in your example.

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

    should be

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

    • Thanks for the feedback Dan, has been adjusted!

  • Mickael

    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

    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

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

    Thanks again

  • SunIT Labs

    Well written…..This is the best article which is useful to all Online Learners…

    Learn SELENIUM through Online for Details Please go through the Link

    SELENIUM Online Training in INDIA | USA | UK | AUSTRALIA | SINGAPORE | CANADA | EUROPE

  • sarose

    I am trying this code on a page with bunch of java script errors that I invoked, but it doesn’t seem to do log anything relevant that would indicate js errors collected. Can some one help?

Reputation. Meet spriteCloud

Find out today why startups, SMBs, enterprises, brands, digital agencies, e-commerce, and mobile clients turn to spriteCloud to help improve their customer experiences. And their reputation. With complete range of QA services, we provide a full service that includes test planning, functional testing, test automation, performance testing, consultancy, mobile testing, and security testing. We even have a test lab — open to all our clients to use — with a full range of devices and platforms.

Discover how our process can boost your reputation.