Types of Testing

Real Device Testing

Always test on real devices. Don't waste time on manually setting up each testing device. Choose tools that let you test across many devices in one-click.

TL;DR

  • There's no substitute for real device testing. You must test on real devices.
  • You don't need to dread the set-up and manual testing process anymore. Testing your site on real devices need only be a click away.
  • Choose a testing solution that has live reloading. Change in one place and see those changes everywhere.
  • Synchronized testing lets you test user interaction on all devices at the same time.

Set up device testing in one click

If you’ve started testing your site on different devices within the last two years, it’s likely you’ve gone through set up steps for the different platforms multiple times.

You’ve experienced the frustration of using your site on a device, seeing something wrong, having to switch back to your development environment, fix it, rebuild, push to each device again, maybe having to repeat some or all of the set-up steps.

Testing on a mobile device away from your development environment isn’t a practical workflow.

developer struggling to test on mobile manually

What you need is a tool that lets you connect to any device in one-click. Once connected to any device, changes made in your development environment are automatically pushed to connected devices.

The Web Starter Kit has a built in HTTP Server for previewing your site. This means that you can test your pages on any device without messing with other tools. So long as your development environment and devices can be on the same network, you can access the same local version of your site on any external devices.

Live browser reloading

Arguably the biggest frustration with testing on real devices is the inability to quickly fix a bug that you see on the real device in your source code.

With live browser reloading, debug your source code on your development machine and see the changes instantly on your mobile device. As you change your source code, any instance of your site opened on any device is automatically reloaded live.

The Web Starter Kit takes reloading that bit further. As you change your source code, the tools compile Sass into CSS, minify and concatenate JavaScript, CSS, HTML, and images and push the optimized site.

Synchronize testing across devices

Sync clicks, scrolls, and navigation between devices so you can see exactly what breaks and what visually needs improvement.

Powered by BrowserSync, the Web Starter Kit synchronizes clicks, scrolls, forms and live-reload across multiple devices as you edit your project.

Which devices you need and how to get them

The Web Starer Kit supports the following devices:

  • IE10, IE11
  • FF 30, 31
  • Chrome 34, 35
  • Safari 7, 8
  • Opera 23, 24
  • iOS Safari 7, 8
  • Opera Coast
  • Android / Chrome 4.4, 4.4.3
  • Blackberry 1.0
  • IE Mobile 10

Brad Frost’s Test on Mobile Devices without Breaking the Bank is a good starting point for deciding which devices you need and provides links to get those devices. But it’s not always possible to own the devices you’re targeting, especially if you’re a freelancer or don’t work for a large company.

There are an increasing number of open device-labs that can loan you hardware, but even if you do own your target devices, it can be a tedious process setting them all up for testing.

The next guide covers a range of cloud testing services that can get you most of the way in terms of testing on a range of devices without actually having those devices.

Note

  • If interested in running unit tests across browsers/devices, you’ll need a test runner that can run your test suite on these platforms. Some options for this include Karma, Yeti and Thrill.

Summary of device testing tools

Inspired by Synchronized Cross Device Testing, here’s a summary of cross-device testing tools:

Cross-device Testing Tool Description
Web Starter Kit Point any device to local version of your site. Update source files and tool automatically optimizes and pushes content to browser. Synchronized testing across devices. Develop on Mac, Linux, or Windows platforms; it's free.
Grunt + LiveReload Similar to Web Starter Kit, you can enable cross-device testing where each change you make in your editor causes a reload in any device you've opened your local site on. Some set-up required to get this going.
Adobe Edge Inspect Loads the URL from your current Chrome tab onto any local device into a Webview inside the Adobe Edge Inspect app. You need to install each device manually and use specific clients on each single device. Requires a subscription to Creative Cloud.
Remote Preview You host the tool's html page and content and point your device's browser to it. The tool regular checks a file for a URL and loads it into an iframe. Light-weight tool great for chaining devices together and easily changing URL across all of them. Doesn't support synchronized testing though.
Ghostlab (commercial) Creates a local server from within the app for any directory. Any connected browser will sync interactions with the page. Only available for Mac; purchase fee.

Updated on 2014-05-29

Authors

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.