[Node.js] Take Screenshots of Multiple Dimensions for Responsive Sites using Nightmare

Posted 2020-09-11 Answer1215

When developing responsive websites, you will constantly be resizing your browser to make sure your site is properly responding to all of the resizes. You can script this behavior by using Nightmare to leverage Electron and it will handle all the resizing for you. Nightmare can then also takes screenshots and save them so you can make sure the site matches your designs.

const Nightmare = require(‘nightmare‘);
const path = require(‘path‘);

const nightmare = new Nightmare({
    show: true,
    frame: false
                                });

nightmare
    .goto(‘https://egghead.io‘)
    .viewport(640, 480)
    .wait(1000)
    .screenshot(‘./screenshots/640x480.png‘)
    .viewport(1280, 720)
    .wait(1000)
    .screenshot(‘./screenshots/1280x720.png‘)
    .end()
    .then(() => console.log("done"));

 

Github