Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
NightmareJS screenshots using device emulator
"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);
})
});
@emenoh

This comment has been minimized.

Copy link
Owner Author

@emenoh emenoh commented Oct 14, 2016

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

@emenoh

This comment has been minimized.

Copy link
Owner Author

@emenoh emenoh commented Oct 14, 2016

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.

@emenoh

This comment has been minimized.

Copy link
Owner Author

@emenoh emenoh commented Oct 14, 2016

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.
segmentio/nightmare#379

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.