Detecting Application 404s with Siesta

Today we added a nice new feature to Siesta which makes it possible to detect loading errors of SCRIPT, IMG and LINK tags (and any other tags which fire the ErrorEvent). Detecting these kind of resource load errors when manually testing your application can be tricky and time consuming since normally we only see these 404s in the console of the browser.

How to use this feature
<!DOCTYPE html>
<html>
    <head>
        <link href="some-missing-stylesheet.css" rel="stylesheet" type="text/css"/>
        <img src="some-missing-image.png"/>
        <script src="some-missing-script.js" type="text/javascript"></script>
    </head>
    <body>
    </body>
</html>

If this was your application and you were lucky to have the console open, you would see this:

Screen Shot 2015-12-02 at 10.44.01

Having this kind of detection built into Siesta is a great new line of defense against simple mistakes that could be painful if they reach your production server. To detect this, Siesta injects a listener for the ‘error‘ event like this:

window.addEventListener('error', function(event) {
    // Optionally fail test
}, true);
Harness configuration

To activate this feature (disabled by default), just set the ‘failOnResourceLoadError‘ to true on your Harness:

var harness = new Siesta.Harness.Browser.ExtJS()

harness.configure({
    failOnResourceLoadError : true,
    ...
});
Browser support

Based on our experiments, this is only supported in the most modern browsers. This should not be a problem since detecting an invalid URL in a single browser is good enough. For further information on which browsers support Error events for scripts and link tags, please see this page.

Of course Siesta will detect any type of resource load error (500, 403 etc.) and not just 404s even though that’s probably the most common error we face. If you know any additional cool tricks you think Siesta should incorporate, please let us know!

Leave a Comment