Back in the early 2000s, multi-browser testing wasn’t really a thing. Nearly 90-percent of web surfers used Internet Explorer and most of them had a Windows-based computer. All you had to do was make sure your site looked good on that setup and you were golden.
Today, though, customers look at your site through hundreds of combinations of browsers, devices, and operating systems. Sure, the majority of Internet users have shifted over to the Google Chrome browser (69-percent, according to w3schools.com), but the browser is only one piece of the puzzle. If you want to make sure your site looks good and retains functionality across all channels, you're going to have to do some testing.
(This is especially true in the personal finance industry, where a single bug can scare a person out of punching their personal and banking information into your website.)
It’s why we decided to invest in cross-browser compatibility software.
When we first set out to find software to help us test our websites across different browsers and devices, we were surprised at how many options there were. We heard good things about Ghostlab, so we tried that one first.
We liked that Ghostlab lets you view and use a page through several different browsers simultaneously. The pricing was good, too. But in the end we felt like the product didn’t offer enough features to meet our needs.
Here were the features that we wanted from a browser/device tester:
We looked at Sauce Labs, Broswershots, CrossBrowserTesting, Broswera, Broswerling, and Spoon, but we didn’t find the right fit until we tried BrowserStack.
We’ve been using BrowserStack for a few months now. There’s a lot we like, and a few things we don’t.
Let’s start with the user homepage – the screen that lets you choose between BrowserStack’s enormous selection of browsers and devices. Here’s what it looks like:
You start by selecting from: Android, Windows Phone, iOS, Windows 10, Windows 8.1, Windows 8, Windows 7, Windows XP, OS X El Capitan, OS X Yosemite, OS X Mavericks, OS X Mountain Lion, OS X Lion, and OS X Snow Leopard.
(For now, BrowserStack doesn’t officially support Linux. According to w3schools.com, currently about 5.6-percent of Internet users use a Linux run machine. So hopefully BrowserStack will add Linux soon.)
From there, you choose the device and browser you want to test. For example, if you select Windows 10, you’ll be presented with a slew of browser options.
If you find yourself using the same combination over and over, you can drag it to the “Drag to add to Quick Launch” section, and that option will show up on your Quick Launch screen.
After you choose a browser, the web-based system will launch it right on your browser. You don’t need to download any extra software.
Then, you’ll be able to test any site you want and it’ll look and react just like you were actually using the setup you selected.
You can use the BrowserStack toolbox to resize your test screen and see how a site looks at different resolutions. We like to look at the latest stats on screen size when using this feature.
The toolbox has a variety of other features as well. It lets you “capture a bug” by taking a quick screenshot of the page you’re on. The “Issue Tracker” lets you chronical your bugs to increase trouble-shooting efficiency. But the most useful part of the toolbox is the “SWITCH” button, which lets you quickly change to a different device or browser, all without leaving the page you’re testing.
It takes several seconds for BrowserStack to launch the new browser, which can get tedious during a long day of testing, but since the system is providing live, web-based testing, it’s hard to imagine how it could go much faster than it does.
The system allows for debugging thanks to pre-installed developer tools, like Microsoft Script Debugger, Firebug Lite, and more.
Like we said earlier, mobile is a very big deal to us. BrowserStack delivers in a big way by providing both mobile emulators and connection to physical devices.
The physical devices take a little time to load (if you’re in a hurry, the emulators are faster), but it’s nice to know that you’re seeing your site through an actual mobile device.
Here’s what our site looks like through an iPhone 6S Plus, as shown through BrowserStack:
You can scroll through the site using your mouse pointer in place of your finger. Scrolling isn’t as fluid as with an actual touchscreen, but for our purposes it gets the job done. You can use the toolbox to switch orientation.
Pro Tip: Be sure to click on the little gear icon in the toolbox to select your monitor size. This will make it so the phone is shown in actual size on your screen. (For some reason they don't have a 23-inch option, so it doesn't fully work for our screens.) You’ll also find the “idle session timeout” dropdown in this box. The “five minutes” default was a little short for us, so we bumped it up to 15 minutes.
BrowserStack has tablet options, too, including the iPad Air 2, iPad 4, iPad Mini 3, Nexus 9, and Galaxy Tab 4, amongst others.
At first we were a little skeptical that BrowserStack was using actual physical devices for mobile testing. So we clicked the home button and opened up the phone’s camera app. There was a fuzzy image for a second until someone’s hand quickly covered up the camera. So yeah, these are physical devices alright.
BrowserStack isn’t perfect. Here are a few of the biggest issues:
None of these issues are dealbreakers for us. Until someone figures out how to do mobile testing better, we’ll stick with BrowserStack.
BrowserStack offers an easy-to-use platform for testing your site across a wide range of devices and browsers. It includes mobile devices (including tablets) and lets you test through actual physical devices, increasing the chances that you’ll encounter issues that actual customers might stumble across. It’s our top pick for cloud-based, live website testing.
If you have any questions about our experience with BrowserStack, please feel free to reach out. We know this is an important decision for any company with a website, so we’d be happy help in any way we can.