Automated responsive screenshots
With CasperJS
There’s a problem with modular site development, the bigger your platform gets the harder it becomes to regression test. A small CSS tweak to one module could result in far reaching changes in sections of the site you had no idea existed.
Of course, in a perfect world your modularity would be sandboxed, and your documentation tight enough to prevent these issues. However, as development teams rotate, and platforms scale, this is never the case.
Screenshots
To combat this issue I’ve put together a CasperJS script which parses a CSV of URLs, and then retrieves screenshots at various resolutions / viewport dimensions. You can download / fork the script here.
The script will load as many URLs as you like, you just define them in an input CSV file. By default it will screenshot the pages at the following viewport resolutions:
smartphone-portrait: 320x480
smartphone-landscape: 480 x 320
tablet-portrait: 768 x 1024
tablet-landscape: 1024 x 768
desktop: 1280 x 1024
The script could be used as part of your Grunt / Gulp build process, or as a standalone tool to help designers / developers capture large sites as flat files.
Whats next
Right now the script only supports responsive sites, sadly any site that makes use of user agent sniffing (adaptive) aren’t going to screenshot as expected. I’m working on a way to be able to swap the user agent string in between page loads, but for now I’ve left it out of Version 1.
Later on I’d like to implement an image comparison between the current and previous, which will allow for rapid reporting on diffs highlighting any impact your CSS changes would have.
Download and usage
There is a readme inside the repo, this should explain everything you need to know:
This script will run through your defined list of URLs (input/data.csv) and generate a screenshot of each page at the defined resolutions. The results of the script will be stored in the ‘output’ directory.
Currently this script is only suitable for responsive layouts. In the future I will add support for adapative sites.
Instructions for use
Ensure you have CasperJS installed on your machine: http://casperjs.org
Open Terminal, and CD to the directory ‘automation/tests/screen-shot’
Make sure that input/data.csv is populated with your URLs. Seperate URLs by linebreaks
Then run “casperjs app.js”
Follow the prompts on screen
When the script has finished, your results will be found in the output directory ‘output’
Settings
Device resolutions
The following resolutions are used by default:
smartphone-portrait: 320x480 smartphone-landscape: 480 x 320 tablet-portrait: 768 x 1024 tablet-landscape: 1024 x 768 desktop: 1280 x 1024
You can change these resolutions by adjusting the ‘viewports’ variable at the start of the app.js script.
User agent string
Coming soon: The ability to define different user agent strings per viewport. This will allow for adaptive sites to be proccessed.
You can download / fork the automated screenshot script here.
The script forms a small part of a repo dedicated to automation, I regularly write CasperJS scripts to automate various processes around content and testing.
