Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1046 of the free egghead.io lessons, plus get Node.js content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Take Screenshots of Multiple Dimensions for Responsive Sites using Nightmare

2:00 Node.js lesson by

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.


egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Ahmed

This is great, thanks!

In reply to egghead.io

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?