Complete screenshot (no scroll)

[chipay]

I've been playing around with the screenshot functionality but I couldn't make it print the whole content.
My use case is to compare the whole site snapshot for differences (similar to the phantomcss library). Casperjs allows to capture the whole scrollable screen in a png. Is there a way of doing the same with nightmare? If not, I'll see if it can be added easily but it may take some time as I just started getting into nightmare.

[DWboutin]

^ +1

[audable]

+1

[rosshinkley]

You can ask Nightmare to get the dimensions of the body element (using scrollHeight/scrollWidth), and then use Nightmare.viewport to set the viewport dimensions. After that, you should be able to take a screenshot of the entire page. I'm not sure this will work 100% of the time, but it's what I've got working for me and I thought I'd share.

An example might be useful:

var Nightmare = require('nightmare'),
    vo = require('vo');

function * run() {
    var nightmare = new Nightmare({
        show: false,
        width: 1024,
        height: 768
    });
    var dimensions = yield nightmare.goto('http://www.gmail.com')
        .wait('body')
        .evaluate(function() {
            var body = document.querySelector('body');
            return { 
                height: body.scrollHeight,
                width:body.scrollWidth
            }
        });

    console.dir(dimensions);
    yield nightmare.viewport(dimensions.width, dimensions.height)
        .wait(1000)
        .screenshot(require('path')
            .join(__dirname, 'gmail.png'));

    yield nightmare.end();
}   

vo(run)(function() {
    console.log('done');
});

A couple of notes and questions:

1. The width (and to a lesser extent, height) of the original Nightmare instance should be reasonably big, especially if your site is responsive. Make sure the width is near the threshold you're targeting your screenshot for.
2. show has to be false. If Electron actually renders to a real screen and the page scrolls off the bottom, the viewport will render with the scrollbar as it appears on screen. I think this is because show:false renders in the framebuffer which has no screen dimensions to honor, but I'm not sure. Anyone know for certain?
3. The wait call after setting Nightmare.viewport seems to be mandatory. (Not waiting stretches the original viewport to the body dimensions obtained in evaluate.) I am not clear on why this is, but I once again think it has to do with rendering time in the framebuffer. (Aside: I think 1s is probably far too long, but I'm guessing a mininum time would be machine-dependent.) A cursory look through the Electron project didn't yield anything, but admittedly, I didn't spend a whole lot of time on it. Again, anyone know for sure?

[matthewmueller]

thanks @rosshinkley for the example :-)

[Leonardonline]

2. show has to be false. If Electron actually renders to a real screen and the page scrolls off the bottom, the viewport will render with the scrollbar as it appears on screen. I think this is because show:false renders in the framebuffer which has no screen dimensions to honor, but I'm not sure. Anyone know for certain?

Adding enableLargerThanScreen: true, to the Nightmare object allow to take screenshot bigger than screen size.