BrowserStack is the herculean all-platform solution for cross-browser testing. You can see and test your browser, quite literally, in every web browser.
Cross-browser testing is super complex, and thankfully the advancements in HTML and browser implementation have made cross-browser implementation take less time than it used to.
Nonetheless, only a fool wouldn’t test their website in a cross-section of the browsers they know are visiting their website. How do you know who’s visiting your website? An upcoming post on Google Analytics will show you how to see your traffic in a pie chart by web browser. I recommend you test any browser that shows 5% of more of your traffic, as a good starting benchmark. [Sign up for the email list now to keep up-to-date.]
When you sign up for BrowserStack’s free trial, it asks you to set a preference if you are testing first for web or mobile (a trick question, so click “Skip”)
Now you come to the main screen. Here you will see the Platforms on the left: Android, iOS, Windows, Windows Phone, and Mac OS/macOS:
You’ll want to start by selecting the platform you want to test on the left.
Next on the right, you’ll see a bunch of devices if you are selecting a mobile platform.
Desktop Browser Testing
When you choose Windows or Mac (which are desktop platforms, not mobile ones), you’ll also need to select which version of the operating system.
Finally, choose the browser to test against. Here, let’s select Firefox version 78
Next, BrowserStack will actually startup a real (virtual) instance of macOS Catalina for you! Then it will launch Firefox browser where you can test your staging (or development) site.
Mobile Browser Testing
On mobile, the most important thing to note is that there are two kinds of testing: (1) Simulated, and (2) on-device. Simulated means a computer in the sky runs a virtual session of your mobile operating system. On-device means that a real device is actually being remotely controlled (they are controlled via connections to computers) available to you as you test. It is really the real thing— sitting in a giant data cluster somewhere— and when you load web pages on it you get the true results. Simulated results aren’t quite as good, so it’s often best to use real devices.
You can see the real devices because they have a tiny little blue “device” icon next to them:
To see the similuated environments, you click here:
Local Testing, Screen Recording, and More
As a developer, you can use BrowserStack to connect to your local machine running at 127.0.0.1:3000. It’s quite easy actually, it’s called “Interactive Testing” and it works great. From any environment, you’ll have a small control panel that will let you control BrowserStack. Look for the “Local testing” option
You will then need to download and install some software on your machine.
Once installed, launch BrowserStackLocal
Once installed & launched, from back within BrowserStack, you’ll just go directly to 127.0.0.1:3000
Here you can see I’m running the default Rails app on my local machine.
BrowserStack can even do screenrecording and more fancy things like Selenium testing against different browsers too.