mobile dev hint #2 – Use Browsersync for mobile testing

While testing mobile websites on different devices and browsers, testing time grows exponentially. You need to duplicate click-through movements on all the devices, fill out forms many times and do all the user interaction for too many times. This is where Browsersync starts, it cuts out all the repetitive manual tasks. You can mirror all interactions on your testing devices and you  can integrate Browsersync in your web platform and build tools easily. The CLI usage is simple and developer friendly and the great UI can help the testers to interact with the software live during the testing.

Installation

Browsersync is a Node.js module and can be installed through the npm system. For a global installation use:

The prefered way is to install Browsersnyc locally for every project:

Notice: Browsersync is injecting an asynchronous scrip tag right after the HTML body element during the initial request. So you need a body tag in your page or customize Browsersyncs snippetOptions.

Usage

Right after the installation you can start a local instance of Browsersync in your current directory with:

You can now point all your browsers on the different devices to the Browsersync instance on your local machine (for example http://mydevmachine.local:3000)

All interaction on one device will now be mirrored to all other devices connected to the Browsersync machine. For a quick configuration, you can visit the configuration page visiting http://mydevmachine.local:3001

 

debug2-1

You will see a dashboard with all the important information at a glance, for example the currently connected devices. In the interface, you can easily configure the mirroring (sync) options. You can define which interactions should be mirrored to all devices.

  • CodeSync — Reload files on change
  • Clicks — Mirror all click events across the devices
  • Scroll — Mirror all scroll events across the devices
  • Forms — Mirror the different form events (submit, input, toggle) across the devices

 

debug2-2

A cozy configuration option is the network throttle because it’s applied to all connected devices — a comfortable way to test your page or web application, even on slow network connections.

Even the option to activate throttle is nice, because you can build a setup with „normal speed“ on default port 3000 and add a throttled version, limited to GPRS, for example on port 3002.

 

debug2-3

You can also set some advanced debug options directly from within the configuration interface, like integrating your weinre debugger, adding a CSS (depth) outlining or display an overlay CSS grid on all your devices. Which can be helpful, especially for responsive web layouts.

There are also a handful of plugins you can add to your Browsersync instance to access special features like adding a latency to a specific app route. You will find all the plugins in the npm directory. They can be installed through npm easily and will be integrated into your Browsersync installation automatically.

This is just a rough overview over the immense feature set of Browsersync. You can integrate it directly into your gulp or grunt build chain or you can customize every detail while using the CLI interface or your own configuration files.

The documentation found on browsersync.io is detailed and has also some great examples and use case, where you can get a blueprint for your own project.

Happy debugging!

Dieser Eintrag wurde veröffentlicht in Development, English Articles, Mobile und verschlagwortet mit , von Steffen Hartmann. Permanenter Link zum Eintrag.

Über Steffen Hartmann

Steffen Hartmann betreut als Product Owner (Scrum/CSPO-zertifiziert) gemeinsam mit seinem agilen Team anspruchsvolle Kundenprojekte für die Mayflower GmbH. Seine über zehn Jahre bereits auf Kundenseite gereifte Erfahrung fließt heute in die Entwicklung und Ausgestaltung großer E-Commerce-Environments – dazu steht Steffen nicht nur intern, sondern auch auf Konferenzen und Workshops als Speaker und Trainer zur Verfügung und setzt seine individuellen Schwerpunkte auf die Themen User Experience, Mobile und Teamkommunikation.

Für neue Blogupdates anmelden:


Ein Gedanke zu “mobile dev hint #2 – Use Browsersync for mobile testing

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.