Basic HTML and CSS testing

I recently gave a lab presentation that led users through a few basic approaches to testing web documents and apps. I focused on the following five techniques that beginning front-end developers could do on their own computers for free:

  • Desktop browsers
  • Device simulators
  • Virtual machines
  • Synced devices
  • Web-based services

Keep reading for details and links on the tools we used.

Desktop Browsers

This is the testing you do when you’re not doing any testing. All the major browsers are available for free. Starting with viewing your code in Firefox, Chrome, and Edge gives you an early heads up on how differences in the rendering engines affect your code.

Device Simulators

If you don’t have an armada of popular mobile devices at your disposal, a device simulator can give you a basic idea of how your code might be rendered for different mobile users. In my presentation, I led users through viewing code in Device Mode in Google Chrome:

  1. DeviceMode.pngOpen your document in Chrome.
  2. Open the Developer tools (Ctrl + Shift + I [Win] or alt + command + I [Mac]).
  3. At the top left of the Developer tools window, click the Toggle device mode button (or press Ctrl + Shift + M [Win] or command + shift + M [Mac]). Above the page contents, a bar now displays the dimensions of the simulated display, along with a menu of devices.
  4. Click the arrow next to Responsive, then select a device from the list.ResponsiveMenu.png

Virtual Machines

A virtual machine (VM) can be a cost-effective way to view your code on another operating system without needing to own multiple computers or set up a multiple-boot system. In addition to providing Mac users a Windows environment for testing, one of the primary uses of virtual machines in testing is to see how code renders in an older version of Internet Explorer. Microsoft has stepped up to the plate by providing free VMs for different combinations of Windows (7, 8.1, and 10) and browsers (IE8, IE9, IE10, IE11, and Edge). VMs are available for VirtualBox, VMWare, and Parallels. While VMWare and Parallels are commercial products available for purchase (and Parallels is available only for Macs), VirtualBox is a free solution that works well for many use cases.

To install and test on a virtual machine:

  1. Choose and install virtual machine software (VirtualBox, VMWare, or Parallels).
  2. Visit the Microsoft developer technologies website, choose the virtual machine that corresponds to the OS/browser combination you want to use for testing.
  3. Follow the instructions for your VM software to install the downloaded image, start it, and test your files with the default browser.

Synced Devices

If you do have one or more mobile devices on hand to use for testing your code, it can be tedious to load the same document on each device and then test scrolling, clicks, links, or other functionality. A few applications are available to make this process easier by syncing what happens on a number of devices simultaneously. After configuring the software and opening it on each device, you can interact with a web page or app on one device and watch as the same interaction takes place on every other device at the same time.  This can be particularly helpful when you’re trying to get a particular feature to work consistently across devices, or playing whack-a-mole with code changes that fix a feature on some devices while breaking it on others.

I don’t know of free options available for this type of testing, and different applications have different pricing models. Muir is free for the desktop and charges a one-time fee for a mobile app for each mobile operating system. Ghostlab charges a one-time fee for desktop software, and provides mobile apps for free.

Ghostlab provides a quick overview of how the whole process looks:

Web-Based Services

Finally, web-based services can be handy for checking layouts on a wide variety of platforms and browsers. These services generally provide screen shots of the same URL on a number of device/browser combinations. While you can’t interact with these screenshots (no touch/click/scroll testing), the thumbnail grid they provide allows you to do a quick comparison to identify any rendering anomalies.

Screen Shot 2016-03-29 at 12.11.39 PM.pngBrowsershots is a free resource for this kind of testing. Microsoft also provides limited free access to a paid service, Browserstack, on its developer website.