Browsers and testing

Testing should be done in a range of modern and older browsers with different rendering engines and platforms including devices. You can read more on this by looking at the guideline device and emulation testing, this will give you a brief overview for testing using a browser on a device.

Using Mac we primarily test on the latest versions of Chrome, Safari and Firefox, which auto-update themselves.

If you don't have a PC to hand, you should test in Internet Explorer 11 (IE11) and Edge. To do this on Mac download a 90-day virtual machine, making sure to choose one that includes IE11 in the build. Choose VirtualBox as the platform to run it on your Mac. Get the latest version of VirtualBox and install this first to run the virtual machine on.

It might also be necessary to download and install the VirtualBox Extension Pack to access hardware like the integrated webcam on your Mac when using the virtual machine.

Common issues of browser incompatibility and bugs to look out for include:

• Use of modern CSS techniques like Flexbox and Grid where some browsers do not interpret properties the same way.
• Sometime browsers are sensitive to other factors like pseudo properties applied, for example, :after and :before.
• Form element styles. Note not all elements can be styled consistently cross-browser, e.g. checkboxes, radio inputs, select boxes and date pickers.

Try and set a test script before you start your testing. Follow this script and only complete a job when all tests have passed - that way you can be sure that everything has updated correctly for all tests involved.

Strategy

First things first, when testing a website ensure that you have all the designs that you will be testing against, this is important because you will need to see how closely the website matches the designs. Keep the designs on one screen whilst you test on another.

We recommend testing a variety of similar devices at a time, for example a PC and MAC or an iPad, Kindle Fire, Google Nexus etc. This approach is better for comparison as sites can differ from device to device.

Normally we start with the smaller devices and work our way up in screen size. Navigate through the site double checking how it looks in both portrait and landscape, because this is where you are likely to see CSS issues as device orientation can change the look of a site.

Recording issues

Note all the issues you find in a checklist on the relevant card. All checklist items should follow this format:

Design name - Brief description of the problem - Gyazo/GIF link showing the problem - Link to page problem occurs on

A real-life example might be:

View Team - Team images float off page - https://gyazo.com/8e790a77cf22f420b865b6bc18ffc1ad - https://wecreate.digital/team/

Using checklists in this manner will quickly help identify a number of smaller bugs. More advanced bug reporting should take for form of a single Trello card.