Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Take Screenshots of Multiple Dimensions for Responsive Sites using Nightmare

    John LindquistJohn Lindquist

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Start with NPM installing Nightmare and then I'll require it. Require Nightmare. I'll create an instance of it. I'll say Nightmare is a new Nightmare. Then I'll want to configure this a tiny bit, where I say show true, so you see the browser window open as it runs, and frame false so there's no UI inside of our screenshots.

    Then you can have Nightmare just go to your favorite website and you'll set the viewport to the size that you want the screenshot. I'll say 640 by 480. I'm going to wait just one second to make sure it gets to that size before I take the screenshot. I'm going to save the screenshot to the directory Screenshots and then call this 640x480.png.

    They're all in .png format. I'll also want to make this Screenshot directory, or else that would have errored out, saying it couldn't find that directory.

    Once that screenshot's done I'll go ahead and resize the viewport. We'll say 1280x720. I'll again wait for one second. Then we'll take another screenshot. Same directory. This one's going to be 1280x720.png. You can name that whatever you want.

    To make sure any Nightmare task runs you have to end it and then give it something to do once it's done. I'm just going to tell it to log done.

    From here, I can just node index to run my script here. You'll see the window pop up. It'll show my side at 640x480, then resized to 1280x720. Disappear, say done.

    In my Screenshots directory, you'll see a 640x480, which has the hamburger menu and no menu items and then the 1280, which has the menu items and no hamburger menu.