How to test your websites synchronously on different devices

Today, more than ever, it is very important to test all your websites on as many different devices as possible (smartphones, tablets and desktops, fridges, cars, ...), and not only on desktop browsers like Firefox, Chrome or Internet Explorer. Nowadays, testing has become a very complex issue. One of our goals for the Open Device Lab Frankfurt is to make the testing of your hard work an easy and pleasant experience. Here's what we came up with for the moment:

Adobe Edge Inspect and Ghostlab - a web developer's best companions

Currently we use two main applications that assist us in this test adventure. The first one is Adobe Edge Inspect.

"Wirelessly pair multiple iOS and Android devices to your computer. With Edge Inspect, you browse in Chrome, and all connected devices will stay in sync." – Adobe Edge Inspect

With Adobe Edge Inspect you have synchronized browsing and refreshing, remote inspection and a bit of magic: by pressing a single button you can grab screenshots from all your connected devices easily, pretty fast, and conveniently stored on the central machine - let's call it our "hubbie" for the moment.

As with every piece of magic, it also comes with a salt of grain:

  • You have to install the Edge Inspect client app on every device first.
  • It only runs on iOS (Version 4.3 and higher) and Android.
    So for example the app cannot be installed on our old iPod Touch (iOS 4.2.1), or on any Blackberry or Windows device (both of which we're lacking at the moment... can you help? - let's contact :-)).
    Hopefully Adobe will support more than iOS and Android in the near future, because testing on other mobile operating systems is important, too.

Our second application for synchronous testing is Ghostlab by Vanamco. After installing and running the the Ghostlab server application on our main testing machine (the hubbie, you remember?), it syncs pages from your local directory, your localhost Apache setup, or any server in the world to all mobile and desktop devices in our ODL network.

"Ghostlab synchronizes scrolls, clicks, reloads and form input across all connected clients. This means what you're testing is not the simple page load, but the full user experience." – Ghostlab by Vanamco

Some advantages of Ghostlab compared to Adobe Edge Inspect

  • Synchronized scrolls, clicks, reloads and form input across all connected clients are awesome! Really? - Yes, it means you can scroll on any testing device, start to fill out a form on device 1 and finish it on IE8 running in a VirtualBox. How cool is that?! :-)
  • Ghostlab runs on any JavaScript-enabled browser, not limited to iOS or Android. And because it runs in the browser, no app installation is needed. Tested browsers as mentioned on the Ghostlab website are: Firefox latest, Chrome latest, Safari latest, Internet Explorer 8/9/10, Opera Mobile, Opera 11, FireFox Mobile, Blackberry, Windows8, Safari mobile, Android 2.3 through 4.2.

Compared to Adobe Edge Inspect there's one main disadvantage of Ghostlab, though: You cannot grab screenshots from all your connected devices. This can be pretty helpful if you have to send some examples to clients or team members. I hope the people behind Ghostlab will add this feature in future versions. Another disadvantage may be that Ghostlab only runs on a Mac at the moment. If you'd like to have Ghostlab for Windows or Linux, you can vote for it here. We currently use a Mac, so it's just fine for us as is. :-)

After using the demo for a few days, I can say it's pretty convincing so far. A close runner for the »The-must-have-app-for-every-Open-Device-Lab-Award«, if you ask me.

Our test-setup for the Open Device Lab Frankfurt

We have a Mac Mini as our main testing machine (aka "the hubbie"). Why a Mac Mini? Because we work with Macs here and we needed a Mac to run Ghostlab. Fortunately there was a Mac Mini within the office of bnt.de, which served as an on-/off working place, and was not in permanent use. So, when nobody was around, we snatched it and assimilated it into the ODL cube ;-). As comfortable as this arrangment is for the moment, we're funding for a "real" ODL hubbie-machine, so if you want to sponsor, or have connections to someone who can, please get in touch.

The following tools and applications are installed on the testing machine:

  • Adobe Edge Inspect
  • Ghostlab
  • MAMP - Webserver including Apache, PHP and MySQL
  • All modern desktop browsers running natively on a Mac (Safari, Google Chrome, Mozilla Firefox, Opera)
  • Developer tools for every browser (Firebug, Web Inspector e.g.)
  • VirtualBox for testing on all versions of Internet Explorer
    -- IE6 - Windows XP
    -- IE7 - Windows Vista
    -- IE8 - Windows XP
    -- IE9 - Windows 7
    -- IE10 - Windows 8

Last but not least

Our testing machine sports a static IP (e.g. 192.168.200.100). All other devices within the ODL network receive their IP over DHCP. Now, every device gets the 192.168.200.100:8080 (8080 is the port for the Ghostlab server) as bookmark or as its browsers starting page, so the Ghostlab server can be accessed from every device as fast as possible.

So this is it for the moment. Fluent and dynamic as our industry is, we don't expect our setup to be final. Tools will be refined, new ones will arise to help with new challenges, mindsets will change, and the Do of today may be tomorrow's Don't.

What's your take on testing? Let's chirp on twitter.

Happy Devices illustration by wondertom