Using WebDriver to automatically check for JavaScript errors on every page

Alister Scott — Wed, 19 Dec 2012 11:51:10 +0000

One of the benefits of using a page-object model is that you can perform certain actions on every page in your application that you visit, such as checking for accessibility.

One such check is automatically checking for JavaScript errors on page load. There’s a couple of approaches out there, one involves copying and pasting a small snippet of JavaScript into each page. Since our application we are working on uses a standard template for every page, we simply add some JavaScript to the common page header that is the first thing to load on the page, and catches any JavaScript errors that occur:

define(["amdUtils/string/interpolate"], function(interpolate) {
    window.jsErrors = [];

    window.onerror = function (errorMessage, url, lineNumber) {
        var message = interpolate("Error: [{{0}}], url: [{{1}}], line: [{{2}}]", [errorMessage, url, lineNumber]);
        window.jsErrors.push(message);
        return false;
    };
});

It’s then a matter of checking the jsErrors each time we visit a page, this is example C# code we use in the base page class for every page.

var js = driver as IJavaScriptExecutor;
ICollection javascriptErrors = null;
for (var i = 0; i < 20; i++)
{
  javascriptErrors = js.ExecuteScript("return window.jsErrors") as ICollection;
  if (javascriptErrors != null) break;
  System.Threading.Thread.Sleep(1000);
}
Assert.IsNotNull(javascriptErrors, "Can't seem to load JavaScript on the page to find JavaScript errors. Check that JavaScript is enabled.");
var javaScriptErrorsAsString = javascriptErrors.Cast<string>().Aggregate("", (current, error) => current + (error + ", "));
Assert.AreEqual("", javaScriptErrorsAsString, "Found JavaScript errors on page load: " + javaScriptErrorsAsString);

This code waits until it can read the jsErrors on the page. If it can’t, it means that JavaScript didn’t load and this is an error. Once it gets the jsErrors, it checks that there are none.

This code has been very useful for us. It has caught a number of JavaScript errors, and is especially great for finding cross browser JavaScript issues, as we run our acceptance tests in 5 different browsers.

Sample Page Object Model for Watir-WebDriver

raveendran — Tue, 31 May 2011 10:37:57 +0000

This is the sample code for creating the page objects in separate file.

page_object_sample.rb

def config
  #common Settings
  @browser="ie"
end

def google_homepage
  #Web Application URL details
  @url="http://google.com"
  #Google Homepage Page Object Models
  @search_field=$browser.text_field(:name,'q')
  @search_button=$browser.button(:name => 'btnG')
end

def bing_homepage
  @url = "http://bing.com"
  @search_field=$browser.text_field(:id,'sb_form_q')
  @search_button=$browser.button(:name => 'go')
end

———————————————————————————————————

Code.rb

require 'watir-webdriver'
require 'd:\\page_object_sample.rb'

config
  $browser = Watir::Browser.new @browser.to_sym
google_homepage
  $browser.goto @url
  @search_field.set("Raveendran - Watir Webdriver")
  @search_button.click
  puts $browser.title

bing_homepage
  $browser.goto @url
  @search_field.set("Raveendran - Watir Webdriver")
  @search_button.click
  puts $browser.title

  $browser.close

NOTE:

a. We can create the page object model with,
     1. IE Developer tool bar for IE browser
     2. Firebug for Firefox browser.
b.  This is the sample and basic page object model code. 
We can customize/develop depends up on our requirement.

c. If the page object will change in future then No need
 to worry about the actual script. Just updating the page
 object model will fix those kind of issues.

page-object-model « WordPress.com Tag Feed

Using WebDriver to automatically check for JavaScript errors on every page

Sample Page Object Model for Watir-WebDriver