Tools & Techniques for Cross Browser Testing
One of the unique job responsibilities of a front-end developer is to make the sites we build work “acceptably” across the browsers the project has decided to support. Generally, more than one!
Not long ago, right here on this blog, we covered testing on iOS with a simulator or real iDevice. Turns out you can do that for free on a Mac. But what if you have a PC? Or what if you have a Mac and you want to test in Internet Explorer 11? Or you’re on Linux and you want to test in Firefox on a Mac?
There are tools!
This never ceases to amaze me. No matter what platform you are on, right through the web, we can test on other platforms and browsers. That’s through the help of these amazing services which saw the need for this and stepped in to help. They spin up the test environment for you, in most cases a real machine running that real platform and real browser, and then visually pipe what is happening to you over to your browser to see and interact with.
LambdaTest
Let’s look at this very blog in LambdaTest. They have a generous free plan in which I can test for 60 minutes a month, and have paid plans if you need more than that.
I can select the browser, platform, and version, drop in the URL:
Then it spins it up for me! Check me out – looking at Windows 8.1 running Internet Explorer 11, and I’m looking at it in Chrome on my Mac:
I’ve opened up the IE DevTools there just to show you the page is totally interactive and I can do testing that way. Clicking on things, checking the console, perusing the DOM, etc.
BrowserStack
BrowserStack has no free plan unless you’re an open source maintainer, but it was the first one on the scene as far as I can remember. Same deal – I can test live in thousands of different browsers, mobile and desktop. I’ll peek in at CSS-Tricks here on a Samsung Galaxy Note 8 using Chrome:
Definitely worth noting here is that these apps, BrowserStack included, offer local tunnels, so that you aren’t limited to only testing live URLs. Through a browser extension, you can activate the tunnel, meaning you can test local development URL’s as well. That’s probably even more useful than testing live URLs.
CrossBrowserTesting
CrossBrowserTesting has the clearest name of all, doesn’t it? It does what it says on the box. It has loads of browsers you can live test in, of course. I’ll pop open CodePen here on a Linux machine running Firefox:
Another service that all of these apps offer, including CrossBrowserTesting, is automation tools for doing things like running your tests across your selected browser suites. Perhaps you have some JavaScript unit tests? It’s nice to run those across all the browsers you support, not just one set. Or perhaps even more ambitiously, you have Selenium tests (Selenium is a language that controls browsers, you can give it instructions like where to move to and click). Those tests are even more important to run across a suite of browsers.
Having tests that test the features of your website across multiple browsers every time you push code is a pretty dang amazing thing.
One more thing to mention! As cool as it is to live test and automated test running, another thing you should know is that these apps can generate screenshots for you across a huge range of browsers. That way you can get a broad overview of how you are doing visually without having to spin up live tests for each one and look. Because that would be slow. This is fast:
Any more?
Those are the big three that I’ve used before. But just in Googling around a little, there are more. Looks like Ghost Inspector, Browserling, Testing Bot, and Experitest turned up just on the first page of results. Have any of you used these? Have a favorite?
Click here to build your next great project on Media Temple.
