nightmare icon indicating copy to clipboard operation
nightmare copied to clipboard

Full page screenshot

Open ArseniiDerkach opened this issue 7 years ago • 6 comments

Hi. I've been trying to reproduce full-page screenshots as in 328, but without success.

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

function * run() {
    var nightmare = new Nightmare({
        show: false,
        width: 515,
        height: 768 });
    var dimensions = yield nightmare.goto('http://localhost:3000/blocks/block-01.html')
        .wait('body')
        .evaluate(function() {
            var body = document.querySelector('body');
            return {
                height: document.body.clientHeight,
                width: document.body.clientWidth
            }
        });

    console.dir(dimensions);
    yield nightmare.viewport(dimensions.width, dimensions.height)
        .wait(1000)
        .screenshot('./screenshots/blocks/block-01.png');
    console.dir(nightmare);
    yield nightmare.end();
}

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

If there any new solution of that issue? Thank you very much. Running Nightmare v. 3.0.1

ArseniiDerkach avatar May 14 '18 14:05 ArseniiDerkach

Faced same issue, looks like the dimension of the screenshot is limited by the dimension of monitor, even set show = false.

wilsonson avatar Jun 14 '18 17:06 wilsonson

After some digging, it's should be actually an issue from electron or chromium, and I found passing maxWidth & maxHeight can solve my case. Below is the sample code I've tested and it can generate a full page screenshot:

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

function * run() {
    var nightmare = new Nightmare({            
        show: false,
        frame: false,
        maxHeight:16384,
        maxWidth:16384,        
        width: 1200,
        height: 1024, 
    });
    var dimensions = yield nightmare.goto('https://github.com/')
        .wait('body')
        .evaluate(function() {
            var body = document.querySelector('body');
            return {
                width: body.scrollWidth,
                height: body.scrollHeight
            }
        });

    console.log(dimensions);
    yield nightmare.viewport(dimensions.width, dimensions.height)
        .wait(1000)
        .screenshot('sample.png');    
    yield nightmare.end();
}

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

The size of maxHeight & maxWidth are refer to #906

wilsonson avatar Jun 14 '18 18:06 wilsonson

Thank you for the reply. I tried maxHeight and maxWidth, but in that case I obtained not only full page screenshot but lots of white space below.

ArseniiDerkach avatar Jun 16 '18 07:06 ArseniiDerkach

In that case, you may try to use clientWidth & clientHeight, instead of scrollWidth & scrollHeight.

wilsonson avatar Jun 16 '18 08:06 wilsonson

The steps outlined here and in #695 solved my screenshot height issues for all but one page that I'm testing.

We have one page with a ridiculous height of 16375px. My understanding from reading through #695 and #906 is that my issue is likely related to chromium's texture tile size limit.

I just wanted to ask (since the last activity on both of those issues is over a year old) if anyone has found a solution or workaround in the time since?

drewf7 avatar Dec 19 '18 13:12 drewf7

I use fullpage.js library but the screenshot has a problem in full screen

MahdiHeydarnejad avatar Nov 24 '19 17:11 MahdiHeydarnejad