Easy Way to Run JavaScript Tests On Multiple Browsers Using Free Tools

tl;dr

• I though of an interesting idea that helps me test my JavaScript code simultaneously on multiple browsers using two free tools ngrok and screenshots from BrowserStack.
• Simply pipe your JavaScript tests running on localhost through ngrok to make them accessible to the real world. Then use that link on BrowserStack to generate screenshots on multiple browsers running on multiple environments.

The problem

I have to manual run my tests across multiple browsers to make sure that they are passing under different environments.

For example, let’s imagine I wrote the following test to make sure that I can use ogg video type across multiple browsers.

describe('browser', function() {
    it('should support ogg video', function() {
        var vidTest = document.createElement("video");
        var oggTest = vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
        assert(oggTest === 'probably', "ogg video is not supported");
    });
});
Code language: JavaScript (javascript)

As you can see from http://caniuse.com/ogv the answer is no. But bear with me for the sake of this example.

To make sure that ogg format is sufficient, I would need to run this test in every browser that I want to support. Obviously, this can get old fast.

The Solution

A while back I wrote about a great tool, called ngrok that lets you pipe your localhost to the real world. You can read more about it here.

You also may have heard of a site called Browserstack that allows you to generate screenshots of your site running on multiple environments.

If you combine the two, you can pipe your tests running on the localhost to ngrok. Then use that link to go to BrowserStack and run your test on whichever environments they support.

Sample Result

In my example above, I pipped my test runner through ngrok, copied the link, went over to BrowserStack and selected IE10, Chrome, and Firefox running on Windows 7.

I got the following results.

From a quick glance at the results, it is easy to tell that something is wrong with IE. If I click on the test results I’ll see that in fact, IE does not support ogg filetype.

I can then fire up Windows 7 with IE10 on a virtual machine, and debug the issue further.