This will show you how to do heavy multiplatform QA on a browser from OSX, especially when the page you want isn’t public or requires user action, like a login. We’ll cover IE6 and up, Android, iOS on multiple devices, and MS EDGE.
So this comes up pretty often: you want to make sure that your cool new interface works everywhere. Your site is used by the public, and it turns out people who have IE 7 are also not the smartest shoppers, making them good customers! So how do you do this starting on OSX?
So there are several tools that will load a site from a URL you feed it and show you the output in many browsers, but I’m going to dismiss those because I’ve never ever been able to use them. Why?
Multi-browser testing sites are worthless
- Almost everything I work requires a login. None of these services support this without some goofy scripting
most show you a .png of the site as it loaded. Okay, do the drop-downs work? How does the site handle window resizing (on IE 8 and later, earlier and there’s no media calls)? Can you open the file that your cool gif-making site spits out?
My site isn’t publicly avaialable at a all! Somehow these tools don’t accept
so your mileage may vary but I’ve tried and failed to use these so many times I just quit. Here’s how I do it:
The right way: virtual machines and lots of them.
Part the first: Windows
It might be tempting to think of using boot camp, the super-cool tool that lets you install Windows on your mac, but don’t do that. After a very long process installing windows, you’ll find it’s very difficult to change versions of Internet explorer on one install of Windows, and there’s no single OS on which you can test IE 6 all the way up to EDGE (or even IE 8 and higher), so you’d have to install several boot camp images, which will totally fill your hard drive before long.
Let’s start with the hardest things to test: IE on Windows. For these, Microsoft has a cool service set up. All you gotta do is:
- Go get the virtual machine tool VirtualBox and install it. Virtual Box is a tool set for running and organizing virtual machines. If this sounds like gibberish: virtual machines are a copy of all of the hardware of a computer in a virtual environment, borrowing resources from the real machine. Virtual box needs an ‘image’ to run, though you can download free OS’s like ubuntu and install them to make your own virtual computer.
Go grab some Mac virtual machine images from Microsoft at https://dev.modern.ie/tools/vms/mac/, they’re big files so it will take some time, but look at all these options!
- Talk to your team about what ones you need to test, these images are free moneywise but they’re a hassle to manage, you don’t want ones hanging around you don’t need.
- open one of these images with Virtualbox. little niggles:
* one of the set didn’t open for me until I got The Unarchiver
* these images are big! clear off your hard drive if you want to keep this stuff around. The nature of virtualization means there’s no real way to avoid storing an entire OS on each of these images
- BOOM! Windows! Most front-end people don’t consider it necessary to test Firefox and Chrome separately on Windows, but you can install software as normal on these machines if you need to test software installs or files opening
Part the second: Android
I’m going to be a bit lazy here, and use Bluestacks, which is its own funny build of Android specially adapted for playing on the PC. The main problem (that I’m aware of) is that the screensize is just some arbitrary size, though of course you’re not testing for any weird bugs with certain Android versions. To do both of those kinds of testing, use Android Studio which can run tons of different size devices and different Android versions. The thing is this process is a hassle and I was never able to find a bug like this.
However if you’re supporting a fleet of kiosks with an exact pixel size, use Android Studio
Part the Third: Soooooo many ipads
We’ll launch our iOS simulators from XCode, a process that has actually gotten much easier in the last year since XCode now lets you start in ‘playground mode’ without creating a whole project you’ll never use.
You may need to fully install/update Xcode to get it working, and in classic Apple fashion the button keeps
- launch XCode and select ‘playground mode’
- Xcode > Open Developer Tool > Simulator
By default it will load into the iPad Retina simulator, but you can go to Hardware>Device and go all the way back to the 4s. Cool, right? Not really! all of these versions will be great for checking display size, but they all run the same version of iOS. Beyond finding an old device, I’m not aware of a great way to test before iOS 8.1, but if you go to ‘manage devices’ you can add an iOS 8.1-8.4 device.