Take screenshot without resizing page

[JamieMcNaught]

Is there any way to take a screenshot without resizing the page? Unfortunately the template (see here - https://demos.creative-tim.com/now-ui-kit/index.html) I use has some sections which use things like:
.landing-page .page-header {
height: 100vh;
position: relative;
}
which unfortunately means that the page-header element becomes huge when taking the screenshot and doesn't represent what it actually looks like on the device.

See the attached screenshots - the shorter two are taken with "Capture Screenshot", scroll, "Capture Screenshot" etc. The longer one is taken with "Capture full size screenshot" - which is I think what BackstepJS is doing. I would expect the longer one to look like the two shorted ones stitched together, but as you can see it's quite different.

Is there any way to get BackstepJS to screenshot without resizing the page (or whatever it is that it's doing).

Hope this makes sense? Many thanks.

Update: 2018-11-13 - I've replaced the screenshots with links (as the hugescreenshots were overwhelming). However in my comment today (see below) I've added a scaled down comparison of what backstop currently does and how our patch works.
Screen 1
https://user-images.githubusercontent.com/1828283/42628830-33ad21ce-85c9-11e8-8372-e885a5b07f1b.png
Screen 2 (just scrolled down from screen 1)
https://user-images.githubusercontent.com/1828283/42628841-3bee2fae-85c9-11e8-8a4d-f445cc72216b.png

Screenshot from BackstepJS - notice the page has re-layed out and now looks nothing like screens 1 and 2?
https://user-images.githubusercontent.com/1828283/42628843-3ef98356-85c9-11e8-82f3-1c5cc4c1a139.png

[Jamiewarb]

I'm also experiencing this problem - a fix or workaround would be great!

[JamieMcNaught]

Unfortunately using the beta descrived in #785 doesn't seem to be fixing this.

[JamieMcNaught]

The problem is really due to the way Chrome tries to take fullscreen screenshots by resizing the browser window.

Here's some code that works around the issue by taking multiple screenshots and stitching together. It also can give you borders around each image which I think may be helpful for determining if the site is fitting correctly to the device screensizes (one of the big issues we'd been having which made us look at some sort of auto testing).

const puppeteer = require('puppeteer');
const merge = require('merge-img');

(async () => {
    const vpw = 1024;
    const vph = 768;
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto('https://demos.creative-tim.com/now-ui-kit/index.html');
    await page.setViewport({width: vpw, height: vph});

    const $ele = await page.$('body');
    const { width, height } = await $ele.boundingBox();
    console.log("W="+width+" H="+height);
//    await page.waitForNavigation({'waitUntil' : 'networkidle'});

    await page.screenshot({path: 'fullscreen.png', fullPage: true});

    var screens = [];
    for(var i = 0; (i*vph) < height; i=i+1) {
        console.log("Screen "+i);
        var screen = await page.screenshot({path: 'screen-'+i+'.png', fullPage: false, clip: {x: 0, y:i*vph, width: vpw, height: vph}});
        screens.push(screen);
    }

    img = await merge(screens, {direction: true, offset: 20, margin: 10, color: 0xFF0000FF});
    img.write('out.png');

    await browser.close();
})();

Obviously this needs to somehow be inserted nicely into BackstopJS or more preferably Puppeteer, but I'd stress that both of these libs would only be working around a bug in Chrome - but given the Chrome team still haven't fixed the bug with 1px wide lines rendering incorrectly on non-retina screens, I hold little hope for this getting any attention.

[matthew-dean]

@JamieMcNaught If this is an issue with Chrome, then why doesn't Puppeteer have this problem and Chromy does? They're both using the Chromium dev tools API.

[JamieMcNaught]

@matthew-dean sorry about the slow response - not sure if github doesn't mail me or I just missed it.

My backstop knowledge (and the distinctions between Puppeteer / Chromy) is very low but this issue seems to happen in Puppeteer - but it's very specific to certain websites, such as the NowUI site (https://demos.creative-tim.com/now-ui-kit/index.html) which will resize the layout based on the screen height to make the 'opening view' 100% of the browser viewport size. This is fine until you try and take a fullsixe screen shot in Chrome, at which point it seems to momentarily resize the browser window to the full height of the length of the page (which causes the page to re-layout and the screenshot to be way to long).

So my issue is "solved" by a custom version of runPuppet.js which ensures that rather than doing a Chrome Fullsize Screenshot (which you can emulate in Chome itself by doing Developer Tools -> Toggle Device Toolbar (CTRL-SHIFT+M) -> "..." menu (top right) ->Capture Fullsize Screenshot - try it on the NowUI page) it instead takes individual screenshots all the way down the page and stiches them together.

It's not ideal, but the result is something like the screen below - and sorry about the previous screenshots - should have resized them down.

[matthew-dean]

@JamieMcNaught Are you planning to do a PR of your changed code into Backstop?

[sballesteros]

Just opened a PR inspired by @JamieMcNaught comment here: #1029

[Its-Alex]

@garris Up

[garris]

I just brought this in locally. Will push to a beta tag.

[Its-Alex]

@garris Why did use a constant MERGE_IMG_SEGMENT_HEIGHT instead of letting the user change this variables ?

[sballesteros]

yes was wondering the same why not letting that as part of the config?