Crossbrowser Testing Localhost on Sauce Labs

Ran into a pesky bug on Internet Explorer 11 this past week. Being on a Mac, and without access to a machine that runs Windows 10 with Internet Explorer 11 I decided the easiest route was to use one of the cross-browser testing services.

There are now a handful of them out there - Browserstack, Sauce Labs, Cross Browser Testing, among others. Most share a similar feature set - manual and automated testing of sites and apps, but there are some differences. For example, Sauce Labs offers Real Device testing - allowing you to upload a mobile application to test on actual devices.

Anyway, I needed to test a local app running on localhost:3000 on IE11/Windows 10. In the past I've always used a hack-ish method to test localhost apps - ngrok.

The hack method

ngrok is an app to create secure tunnels to localhost, allowing you to expose local apps to the internet. It's great for demoing local apps to remote teams and is super simple to setup. Just download and install ngrok, then ngrok http [PORT] to open a specific port to the interwebs. ngrok will return a publicly accessible URL you can share with others to view your local app.

To test localhost apps in the past I've fired up ngrok, and used that URL in the remote browsers. This works, and for simple, manual tests its probably good enough. Also, some of the cross-browser services try to make you upgrade to a paid tier to test localhost. This method will get around that, so it could save you a few bucks.

The pro method

The above method works just fine for simple tests but if you need to run automated tests it might become a hassle. For that reason I decided to follow Sauce Labs' preferred setup for testing localhost apps.

Sauce Labs provides Sauce Connectâ„¢ - a "proxy server that opens a secure connection between a Sauce Labs virtual machine running your browser tests, and an application or website you want to test that's on your local machine or behind a corporate firewall."

Note: the instructions below are for Mac.

First, download Sauce Connect and unzip the directory. Then open terminal, cd into the new directory and enter the follow command:

bin/sc -u USERNAME  -k ACCESS_KEY

and replace USERNAME with your Sauce Labs username, and ACCESS_KEY with your Sauce Labs access key, which you can find in your User Settings.

After a minute you'll receive confirmation via a terminal response the tunnel is ready for action.

Next, start a new manual test in Sauce Labs - enter your localhost URL, like http://localhost:3000, select the OS and Browser you want to test in, then select your running tunnel from the SAUCE CONNECT PROXY dropdown. Like this:

At this point Sauce Labs will fire up the new session, open the browser and you're localhost app should appear.

Test away!

Comments