Cross-browser testing Windows, iOS, and Android from macOS

If you’re a web developer or have worked on a web project, you might already be aware of the inconsistencies between browser implementations of HTML, CSS, and JavaScript. These differences in implementation can cause your websites or apps to break unexpectedly when they are used on different devices or software versions. For a great intro on why these inconsistencies exist, and why you should be cross-browser testing, checkout Mozilla’s introduction to cross browser testing.

As developers, it’s our responsibility to ship code that runs everywhere. Usually this means implementing a testing strategy, which in many cases will mean loading your webpage on different operating system and browser combinations and testing manually. There are services like BrowserStack that will let you connect and interact with these devices over the internet in your browser, and offer a variety of features will little effort on your part. However, the online services can often feel laggy, and often don’t give you realistic frame rates. This can be become frustrating if you are debugging performance, jank, or interacting heavily with the UI and development tools.

In this three part series I am going to cover my workflow for cross-browser testing on three of the most widely used operating systems from your computer running macOS. I’ll be walking through the setup and basic test workflow for testing Windows, Android, and iOS, using Virtual Machines and Emulators which can be freely downloaded from the internet.