Cross-Browser Testing with BrowserStack

At Tivix, most of us use Macs for frontend and backend web development, but we regularly need to verify that our code is working across different browsers and operating systems.

One possible solution is to set up a virtual machine (e.g., install Parallels or Boot Camp) and buy a version of Windows to test a browser like Internet Explorer. This works until we need to test a different version of Windows than the one we purchased and installed. Then we would need to create new environments for each operating system. If we did that, we would then face the challenge of testing different browsers and their different versions. The number of possible combinations of operating system, browser, and version can get pretty large.

So instead of having multiple virtual environment setups, our solution is to use a cross browser testing tool. Currently, we’re using BrowserStack, a cloud-based testing tool that is powerful and easy to use.

Step 1: Select your system preferences

BrowserStack allows you to select the type of machine you want to emulate by specifying details like the operating system (e.g. OS X, Windows, Android, iOS, Windows Phone), the type of browser (e.g. Chrome, Internet Explorer, Firefox, Safari), and the browser version (e.g. Firefox 45, Chrome 49).

Browserstack choose emulator

Step 2: Let the system load

After making your selections above, the browser starts up with your preferences. This is all done in your browser!

Browserstack loading emulator

Step 3: Start Testing

You can now start testing. In this screenshot I have a server running on my local machine, which BrowserStack was able to find immediately without any setup (if this does not resolve automatically, check that your `Settings` > `Local` > `Server Testing` is checked). Some browser-testing software only takes screenshots, but what I like about BrowserStack is that you get to interact with the environment. If a tester has reported difficulty clicking on an input field, you can mouse over and try it yourself. BrowserStack offers additional features in case you want to take screenshots across multiple environments, or test your page’s responsiveness on multiple devices.

Browserstack local server

My main complaints are that BrowserStack can be a little slow, and there are occasional random disconnects. Despite these issues, BrowserStack is still a very useful web development tool.

Cross-Browser Testing with BrowserStack

Leave a Reply

Your email address will not be published. Required fields are marked *