30 Jul 2013
•
Wraith
Today we are announcing the release of a front end regression testing tool called Wraith. This tool is something we have been using for the last 6 months, it has proven invaluable in testing CSS changes, both deliberate and unintentional.
Download Wraith here : https://github.com/BBC-News/wraith
This tool came about as we continued to see small changes from release to release, as more teams joined the project, small front end bugs cropped up more frequently. Our solution was to compare screenshots of pages, at the pull request level and when merged into master. This process produces fewer bugs and unintended changes, while also being able to ensure intentional changes appear correctly.
How it works
The tool is 2 parts, the capturing, using a headless browser and the comparing, using Imagemagick. PhantomJS is a headless browser designed exactly for these types of tasks. It doesn't have a UI, all your settings are applied on the command line, or in our case, in snap.js. We can use PhantomJS to capture multiple resolutions, so RWD testing is made much easier. An alternative is SlimerJS, this is another headless browser. It is not out of the box headless on some operating systems, so is not as simple to setup as PhantomJS. The good thing is that it is essentially a clone of PhantomJS, so all settings will work with both browsers.
The main difference between the two browsers is webkit and Gecko, PhantomJS being Webkit and SlimerJS being Gecko. This means that you can test across two rendering engines. By default, we have set up Wraith to use PhantomJS, this is due to the extra configuration to make Slimer headless.
Using Wraith, you can see where your website really breaks by starting to put in resolutions you don't normally consider. Each screenshot has it's file name comprised of the resolution and the environment you're grabbing the screenshot from, the individual web pages will label the folder so all your screenshots will be grouped.
More …
15 Nov 2012
•
Testing
In this post, i will talk about how to view network traffic and the HAR (HTTP Archive) file. This is useful for doing several things, my initial intention was to discover network traffic from mobile devices. This was something i wanted to view in order to find out whether our vary headers and stats were correctly being logged, but there is also an interesting way to measure performance.
Requirements
The basic usage is to capture the HAR file, you will use tcpdump to capture TCP traffic and save it to PCAP file. The website above, you guessed it, shows you the PCAP file in it's HAR form. This will allow you to view the HAR timeline, request headers, UA string etc.
Run this command in terminal. This takes the tcpdump from my bridged adaptor, the best way to do this is to share your wired conniption through your wireless and connect any mobile device to the new wireless access point.
sudo tcpdump -i bridge0 -n -s 0 -w nameoffile.pcap tcp or port 53
Once you have done all of you browsing, in some cases this will simply be loading a web page, hit control + C and the file is created in the directory you are in. The next step either requires you to have a local instance of the HAR viewer on your machine, or use the online version. Which ever you decide to use, the output will seem very familiar to most.
By using this tool, we can see how each device loads the page, where you could improve upon for certain devices and what, if any, are the issues with your website.
While this isn't as good as Chrome for Android that shows you all of this in real time, for very old devices, this is the best way to inspect your traffic.
28 Mar 2012
•
Testing
We thought we'd share some information on our testing process.
My name is David Blooman, I am the principal tester for responsive news, all questions and queries can be sent to me at @dblooman
When testing the devices, there are 4 main areas to cover, feature phones, smart phones with low level support, smart phones and tablets. The primary tablet market will be 7-inch devices up to 720x1280 pixels with the lowest smart phone being 240x360 pixels.
Currently, we are only approaching devices that are not conforming to desktops, so smart TV's, games consoles and other exotic devices are test, desktops are not.
More …