•  •  • 

Working with Wraith

Building a responsive website requires testing at multiple resolutions to make sure your site doesn’t break. The fine developers at BBC News have created Wraith, a Ruby application that allows you to quickly snap images of your website at any resolution(s) you may desire. Unfortunately, the read-me on the repository doesn’t provide all the information that you may need to get Wraith running properly for your site.

That’s where this post comes in. I’ll cover some of the additional functions that aren’t clearly documented on the repository page. Specifically:

  • Working with page file extensions
  • Changing the user agent
  • Setting cookies

Note: this post assumes that you’ve already configured Wraith on your local machine following the directions provided on the repository page, and that you’re somewhat unfamiliar with Ruby (as I am). It is meant to be a supplement to the read-me, not a replacement. I make the assumption that you are using phantom.js as your headless browser; slimer.js directions may be different.

Working with page file extensions

If you already know what pages you want to capture with Wraith, you can modify config.yaml to add them in the paths: section.

paths:
  home: /
  uk_index: /uk

Suppose that your website requires you to put the specific page and the file extension? Simply enclose the paths in double quotes (“”) to ensure that Wraith can properly parse the file paths.

paths:
  home: "/default.html"
  uk_index: "/uk/default.html"

Changing the user agent

The user agent for phantom.js can be changed by modifying snap.js.

The default user agent is set to:

page.settings.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.17';

This string specifies your browser as an OS X desktop browser. Modify the page.settings.userAgent string to the user agent of your choosing.

For example, to spoof as an iPhone:

page.settings.userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53';

Setting cookies

Inside the same snap.js file you can specify data to be stored as cookies for phantom.js. Adding cookies requires the execution of the phantom.js phantom.addCookie() method. You can specify name, value, domain and expiration values for the cookie.

phantom.addCookie({
     'name': 'myCookie',
     'value': '234A5D265FB9598',
     'domain': 'www.mywebsite.com'
     'expires':  (new Date()).getTime() + (1000 * 60 * 60) 
 });

This is especially helpful if your site sets cookies to identify authenticated users.

A big thanks to the BBC News developers who created this excellent application and the community who maintains it! You can find the github page here.