A guide to cross-browser testing: installing all the things

David Gilbertson
Feb 5, 2017 · 14 min read
Image for post
Image for post

  • Edge 14 and 15
  • Chrome for Android
  • Chrome for Windows
  • Chrome for macOS (macOS users only)
  • Chrome for iOS (macOS users only)
  • Safari for macOS (macOS users only)
  • Safari for iOS (macOS users only)
  • Firefox for Windows
  • Firefox for macOS (macOS users only)

Choose your browser support

Step uno is deciding to care. If you’ve got a bad attitude towards users of inferior browsers and operating systems, that’s going to slow you down.

  • Shopping site: Needs JavaScript. The site behaves the same in all browsers from IE11/Safari9+. The purchase journey can be completed on IE8/Safari 7 although the site might look a bit crappy.
  • know-it-all.io: “if your browser is more than three weeks old you don’t belong here
Image for post
Image for post
Not an IE in sight, God bless you all

Maximize the use of your favourite browser

I used to think the responsible way to work was to share my development time between all the browsers I endeavored to support.

Apple vs Microsoft

There’s a nugget of truth in the old anthropomorphic trope: Apple the cool kid and Microsoft the nerd.


Windows on macOS

There should not be a single web developer on the planet that does not have access to Windows.

All the Windows browsers

As a macOS user, you of course want Windows so that you can test Edge and IE. But you also need Windows to test the Windows version of Chrome and Firefox, since they are different to Chrome and Firefox on macOS.

Image for post
Image for post
Simulator on macOS
Image for post
Image for post
Chrome on macOS
Image for post
Image for post
Chrome on Windows

Finding your way around unfamiliar browsers

If you don’t know how to inspect your JavaScript in some foreign browser’s dev tools but want a breakpoint, just put the keyword debugger in your code. You can even do a fakey ‘conditional breakpoint’.

Image for post
Image for post
Ah yes, I suppose my element ID isn’t “appnpm run dev”

macOS on Windows

As I hurtle towards 40 I have grown unwilling to do anything where the first step is “do a full backup of your system”. And since there is no official way to install macOS on Windows, this is the best you’re going to get.

iOS on macOS

Getting access to a virtual iPhone and iPad is vurry easy. You will use Simulator, which ships with Xcode (it’s so hard to keep track of where the capital letters go in Apple products).

Image for post
Image for post

Dev tools for Safari on iOS on macOS

If you want to inspect your site while it’s running in iOS Safari, you can use the macOS Safari Web Inspector. The process is the same for Simulator as it is for a real iOS device that’s plugged in.

Image for post
Image for post
Image for post
Image for post

Android on macOS and Windows

For your benefit, dear reader, I have installed Google’s Android Studio to take a peek at it’s built in emulator. It was dead simple to install and the emulator is fast (~20 second startup). It’s several gigs though, so don’t do this if you’re on a metered connection. Or in North Korea.

DevTools for Chrome on Android (macOS and Windows)

Connect your Android device via USB and have your site open on the phone.

Image for post
Image for post
Image for post
Image for post
Hey, what’s that Terminal tab?
Image for post
Image for post
Garfield comics get real deep when you remove Garfield

Filling the gaps with BrowserStack

I put off paying for BrowserStack for a long time. And I still question if I should keep up my monthly payments every time the bill arrives. But I simply need to remind myself: BrowserStack enables me to produce higher quality results, and increase my understanding of browser quirks.



#1 During development

When I’ve finished with some particular task (after testing on all the browsers I have available locally) I’ll check out a few of the major devices not covered. This is based on my site’s analytics and is usually the Samsung phones and IE6 on XP for the lulz.

  • Click the button
  • Click IE9 in Windows 7
Image for post
Image for post
  • Do some testing then: Switch > Samsung Galaxy S7
  • 16 seconds later the phone is there with my site loaded in Chrome
  • Do some testing then: Switch > iPad Air 2
  • 32 seconds later a real iPad is there with my site in Safari 8
  • Do some testing then: Switch > iPhone 6s
  • 13 seconds later a real iPhone … you get the idea

#2 Sanity check

Screenshots is a neato feature that also works for localhost, I must learn how they do this one day. It has one big letdown though — they appear to have stopped updating the devices. The newest iOS version is 8.3.

Image for post
Image for post

#3 When learning

Recently, I was working out how to make a pie chart. So, I took it out into jsbin, got my head around the best way to do it, then transplanted it into the site I was working on.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
XP can suck a bag of lollipops

Sauce Labs

Just like BrowserStack, there’s a free trial, it’s free for open source, and their website probably has a page with pricing details.

  • 1 minutes 29 seconds later the phone opened.
  • The lag is about the same as BrowserStack — 1 second.
  • I got distracted and somehow found myself reading about the disputed zone between Venezuela and Guyana. They’re trying to resolve it peacefully thank God.
  • Came back to an error “Your test errored. Test exceeded maximum duration after 660 seconds”.
    (Turns out that’s not 660 seconds of idle, that’s 660 seconds total before you get booted. I might be just a limitation of the trial.)
  • Opened up a Simulated iPhone 7 — oh I can have two simulations at once, that’s nice.
  • 3 minutes and 35 seconds later the simulator opened — I wonder if those 215 seconds count towards my 660 seconds before I get kicked out?
  • Although it’s in Simulator, it’s not in a normal macOS instance, so I can’t open Safari to get the devtools. That’s a dealbreaker.

Conclusion

There isn’t really a ‘conclusion’, I just didn’t want to end on the low note of not having anything nice to say about Sauce Labs. Mother always said “if you don’t have anything nice to say, make it funny”, but I fear I wasn’t even that.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

HackerNoon.com

#BlackLivesMatter

Sign up for Get Better Tech Emails via HackerNoon.com

By HackerNoon.com

how hackers start their afternoons. the real shit is on hackernoon.com. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

David Gilbertson

Written by

I like web stuff.

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

David Gilbertson

Written by

I like web stuff.

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store