NightmareJS screenshots using device emulator

NightmareEmulatorTest

"use strict";

const Nightmare = require('nightmare');
const url = "http://www.apple.com";
//just an example
const path = "./testfile.png";
//we'll save the screenshot in the same directory
const userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10A5376e";
//make sure we load the mobile version

//this is where the magic happens!
//create a custom action for Electron via NightmareJS API

Nightmare.action('emulateDevice',
  //define the action to run inside Electron
  function(name, options, parent, win, renderer, done) {
    // This task runs in the remote process
    parent.respondTo('emulateDevice', function(settings, done) {// <---- See settings
		win.webContents.on('did-finish-load', function(){
		  win.webContents.enableDeviceEmulation(settings);// Set settings here...
		});
		done();//call done
	});
    //call the action creation `done`
    done();//call done
  },
  // use the IPC child's `call` to call the action added to the Electron instance
  function(settings, done) {
  	console.log('emulateDevice', settings);
    this.child.call('emulateDevice', settings, done);
  });
  
  //here is our emulated device settings, basic iPhone 6 size here
  const mobilesettings = 	{
    screenPosition: 'mobile',
    screenSize: { width: 375, height: 667 },
    deviceScaleFactor: 0,
    viewPosition: { x: 0, y: 0 },
    viewSize: { width: 375, height: 667 },
    fitToView: false,
    offset: { x: 0, y: 0 }
  }
  
  //create a new instance of nightmare to use
  var nightmare = Nightmare({ show: true });

	nightmare
	.then(function(){
		return nightmare
		.emulateDevice(mobilesettings)//here's our action called
	})
	.then(function(){
		return nightmare
		.useragent(userAgent)//load our ua string
		.goto(url)//load our url
		.wait(500)
		.evaluate(function(){//we have a fancy evaluate here to get the viewport of the current window
		const body = document.querySelector('body');
		var h = body.scrollHeight;
		var w = body.scrollWidth;
		
			return {
				height: h,
				width: w
			}
		})
		.then(function(dimensions) {//here's where we set the viewport from above eval
		console.log("dimensions", dimensions)
		return nightmare
		.viewport(dimensions.width, dimensions.height)
		.wait(500)
		.screenshot(path)//finally take a screenshot
		})
	})
	.then(function() {
    	nightmare.end(function() {
      	console.log('done with url: ', url);
    	})
    });
  

npm install nightmare --save
DEBUG=nightmare node NightMareEmulatorTest.js

Check out those nested .then() calls... as long as you return the instance of nightmare you started with, they can go as deep as you need them to... some of them are unnecessary here but in case you wanted to add logic around whether or not you want to call the emulateDevice action, well you need a function right? so this is how you call a function with conditional logic inside but still return a chainable nightmare instance. enjoy.

Here are a few urls that helped me get this sorted out:

Electron API where you can see the plain settings available for this method
http://electron.atom.io/docs/api/web-contents/#contentsenabledeviceemulationparameters

Issue where the 'did-finish-load' event is almost mentioned as the key to success (it is).
electron/electron#4099

Issue where passing arguments to custom Actions is laid out clearly.
segment-boneyard/nightmare#379

and of course NightmareJS
https://github.com/segmentio/nightmare