takeScreenshot with fullpage: true is not working as expected

[mihaisorintoma]

What is your Test Scenario?

I want to create a screenshot of the entire page, thus I use .takeScreenshot({fullPage: true})

What is the Current behavior?

The screenshot generated has a scrollbar. The footer is not entirely visible.

What is the Expected behavior?

The screenshot generated contains the whole page, without any scroll.

What is your web application and your TestCafe test code?

https://advancedinstaller.com/blog/page-1.html

import {Selector} from 'testcafe'

fixture `test`
  .page(`https://advancedinstaller.com/blog/page-1.html`)

    test(`test screenshot of blog page}`, async t => {
      await t
        .resizeWindow(768,800)
        .click(Selector('#cookies button'))
        .takeScreenshot({fullPage: true});
    });

Steps to Reproduce:

1. Run the test code above using "testcafe chrome:headless"

Your Environment details:

• testcafe version: 1.11.0
• node.js version: v10.15.3
• command-line arguments: testcafe chrome:headless
• browser name and version: Chrome 88.0.4324.150
• platform and version: Windows 10 x64 20H2
• other: None

[AlexKamaev]

Thank you for sharing the example. I reproduced the issue. We need time to research it.

[sharath2106]

Hi @AlexKamaev I'd like to work on this if this is not fixed. Would also appreciate if you can provide some insights on what might actually have caused this issue (since this is my first contribution in TestCafe).

[viktoria2506]

We'd appreciate it if you contribute to the development of the application.
It looks like you should debug screenshot cropping in the Capturer module.
Try to do this.

[sharath2106]

Okay @viktoria2506!

[avimredis]

I believe I am experiencing this issue as well. Has it been fixed? Seems like the PR is still open and not yet merged.

[Artem-Babich]

Hello, @avimredis!

This issue is caused by the different behavior between the Chrome and Chrome:headless browsers. We are currently working on this issue and will update this thread once we have any news.

[avimredis]

Hello, @avimredis!

This issue is caused by the different behavior between the Chrome and Chrome:headless browsers. We are currently working on this issue and will update this thread once we have any news.

@Artem-Babich Thanks for the quick reply!

[uuRae]

I am experiencing this as well. Screenshots were full page in the past, but now are cropped. This does occur on Chrome as well as headless Chrome and headless Firefox.

[avimredis]

@uuRae the workaround I found is that if you know about a flaky or failing test and you need to see the full page, you can place this right before the failing step and it will take a full screen

await t.takeScreenshot({
path: DESCRIPTIVE-NAME.png,
fullPage: true,
})

I think it's specifically a bug with the screenshot on fail, so this works

[github-actions]

Release v2.1.0-rc.1 addresses this.