Making web applications is fun. Well, it should be fun, but it’s often not. It’s not, because there’s so many browsers, operating systems, and devices to cater to. And who has the resources to cater to every device configuration and operating system setup which the average user is likely to have? Can anyone truly cover them all?
Yet despite this challenge, it’s our responsibility to deliver the best possible experience; and to do that, we need to find a way to do reliable browser testing.
So in this post, I’m going to show you how to get started by providing you a step-by-step guide to cross-browser testing packed with tips, metrics and tools. When you’re finished, you’ll have all you need to start.
So what is browser testing? Known by many names, including browser compatibility testing and user experience testing or website application testing, it is testing to ensuring that a website or web-application works, as expected, in a given browser.
This is based on a range of metrics, including:
Now let’s look at the two basic types of testing: automated and manual. Automated testing is the ability to setup tests which can be run with little, or no, deliberate human intervention.
Manual testing, on the other hand, as the name implies, requires the deliberate involvement of a human tester to verify the functionality of an application or website.
That’s a good question, but not one necessarily easy to answer. To help you out though, here’s a list of questions to ask, either yourself or your team, to know which one would work best.
This is something only you and your team can answer. But the simplest way to know is by referring to your design specification. If it only mandates that the application only has to work on your company’s intranet, then that’s all you need to care about.
However, if your specification mandates the latest version of every browser, across the desktop as well as iOS, Android, even Windows Phone, then you need cross-browser testing.
If you need to do cross-browser testing, then the best time to start is as soon as possible. Whilst the need may not be present yet, it will likely come sooner or later.
Having at least made a start can only be of help; even if that’s only in Chrome and Firefox — which ensures a comparison of different rendering engines.
Like anything, don’t leave it till the last minute. Get started and in the process, make more robust sites.
Now that we’ve covered the groundwork, let’s look at 7 tools which can help you out with testing.
Once you identify issues in your design, make sure that you’re able to report them quickly and effectively. By integrating the Usersnap – Feedback Widget with your site or application, you’ll be able to supply a wealth of information to your team as and when needed.
For example, as your QA team is testing your site, as they find issues they can log annotated screenshots, outlining the issues discovered. Along with screenshots, a host of system information, such as operating system, browser, screen resolution and so on, will also be stored. This information will be available, in the Usersnap dashboard, for your entire team to use.
SauceLabs is one of the premiere tools available for browser testing, sporting automated testing for Selenium and Javascript tests, testing of native and mobile applications across a range of iOS and Android devices, as well as manual testing on a wide range of browsers and platforms.
BrowserStack is definitely the biggest and well known of the browser testing tools available today, and for good reason. It offers the ability to test a site in nearly any version of any desktop or mobile browser, across a nearly ubiquitous array of hardware device configurations. What’s more, it also allows for testing of local or private setups.
Whilst not as sophisticated in appearance as the previous two, Browserling offers an impressive array of features for an impressive price. They offer support for testing across all of the latest browsers as well as good support for previous versions. SSH tunnels can be set up for local or private testing. And soon they’ll be offering take screenshots and record videos of sessions as well.
Browser shots is a little different from the previous options. Instead of providing the ability to view your site or application near natively, Browsershots creates screenshots of the url you provide across the range of browsers requested which you can later view.
Ghostlab is different again. Able to be installed as a local application, it provides a number of advanced features, including synchronized testing and JavaScript inspection. It also provides for creating and restoring a set of custom browser configurations, so that testing remains consistent across sessions. What’s more, it also takes care of filling forms, saving you the effort of doing so.
Responsinator is a great tool for getting a good understanding of what your site will look like across some of the most popular devices. From the iPhone6 Plus in portrait mode to a first generation Android in landscape mode, it shows you what your site’s likely to look like.
And that’s the basics of cross-browser testing in the modern age. Whilst definitely a challenge, given all of the browser, hardware, and device options, the tips, metrics, and, tools we covered today provide an effective way to get started today.
If you’ve not done so already, check out the tools we’ve covered and see how the quality of your browser testing improves. But whilst you’re getting started, make sure you keep track of your situation.
What’s better for you, manual or automated testing? Do you need to actually do cross-browser testing? Or is your application able to just focus on one browser and a limited hardware selection? Make sure you do expend your efforts wisely.
This article was brought to you by Usersnap – a visual bug-tracking and browser-testing tool for every web project. If browser testing isn’t part of your business, that’s completely fine. You might enjoy our email list of great web development news, web design tips, and tech articles.
Start with Usersnap to deliver what your users want. Collect your first 20 feedback items for free, then upgrade to keep leveraging these insights.
Release notes aren't just a list of changes—they’re a key touchpoint in the customer journey,…
Product updates aren’t just a box to check—they’re your chance to connect. And a changelog?…
What’s the point of launching a great feature if no one notices? The real magic…
Ever wonder how some companies make product updates feel like the highlight of your day? …
Picture this: You’re in the middle of a hectic workday, balancing strategic decisions with daily…
Ever wish customer feedback came with subtitles? With the right feedback analytics tools, you can…
