Screenshotting support

README.md

@@ -248,6 +248,27 @@ mocha: {
 
 The PhantomJS -> Grunt superdimensional conduit uses `alert`. If you have disabled or aliased alert in your app, this won't work. I have conveniently set a global `PHANTOMJS` on `window` so you can conditionally override alert in your app.
 
+## Screenshotting
+
+To take a screenshot:
+```js
+var container = $('article')[0]; // or any DOM node
+console.log(JSON.stringify({
+  action: 'render', // mandatory
+  filename: 'screenshots/article.png', // mandatory
+  clipRect: container.getBoundingClientRect() // optional
+}));
+```
+
+To change the resolution of the viewport:
+```js
+console.log(JSON.stringify({
+  action: 'viewportSize', // mandatory
+  width: '960', // mandatory
+  height: '960' // mandatory
+}));
+```
+
 ## Examples
 
 ### Vanilla JS

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "grunt-mocha",
-  "description": "Grunt task for running client-side Mocha specs in PhantomJS",
+  "name": "grunt-mocha-screenshot",
+  "description": "grunt-mocha with screenshot added pending pull request",
   "version": "0.4.10",
   "homepage": "https://github.com/kmiyashiro/grunt-mocha",
   "author": {

phantomjs/main.js

@@ -80,6 +80,21 @@ page.onAlert = function(str) {
 
 // Relay console logging messages.
 page.onConsoleMessage = function(message) {
+  try {
+    var json = JSON.parse(message);
+    if (json.action === 'viewportSize') {
+      sendMessage('console', 'Changing viewport to width: ' + json.width + ' and height: ' + json.height);
+      page.viewportSize = { width: json.width, height: json.height };
+    } else if (json.action === 'render') {
+      sendMessage('console', 'Taking a screenshot to file: ' + json.filename);
+      if (page.clipRect) {
+        page.clipRect = json.clipRect;
+      }
+      page.render(json.filename);
+    }
+  } catch(err) {
+      sendMessage('console', 'Console message could not be parsed.');
+  }
   sendMessage('console', message);
 };