fullPage screenshots

[mojoaxel]

Sorry if I missed already existing issues for this topic.

What I'm trying to do is taking full-page screenshots, not only screenshots within the viewport.

I've tried not defining a viewport height, wich is not allowed:

await page.setViewport({ width: 1440 });

I also tried setting the pupeteer parameter fullPagebut with no effect:

const image = await page.screenshot({ fullPage: true });

Is there a way of achieving this? If not consider this a feature request :wink:

[NimaSoroush]

Hi @mojoaxel ,

Something like this should work.

(async () => {
  const target = differencify.init({ chain: false });
  await target.launch();
  const page = await target.newPage();
  await page.setViewport({ width: 1600, height: 1200 });
  await page.goto('https://github.com/NimaSoroush/differencify');
  await page.waitFor(1000);
  const image = await page.screenshot({ fullPage: true });
  const result = await target.toMatchSnapshot(image)
  await page.close();
  await target.close();
})();

Do you have the full script of your test which I can try? What version of Differencify are you running?

[mojoaxel]

@NimaSoroush Thx for the quick answer. Your provided example works like expected, but only with the github-url, not with my application. So, the problem seams to be on my side. :confused: Please give me some time for deeper research. I'll commend an close the issue later.

[mojoaxel]

Ok, the problem is that my application has a html viewport-height of 100% and custom scroll handling. Of-course this can not work! :man_facepalming:

html {
    height: 100%;
    overflow: hidden;
    position: relative;
}

The only think that would help here is an auto-increasing viewport-height. But how could differencify determine the max viewpoint-height than? - Not really possible. Sorry, my mistake!

[NimaSoroush]

I am happy to hear that all works now @mojoaxel