Cannot take fullPage screenshot using puppeteer

[pfryga]

What is your Scenario?

I'm trying to take screenshot of full page using takeScreenshot function with property fullPage: true (doc).
Unfortunately when I'm using puppeteer (with custom browser provider) it doesn't work. Screenshots still contain only visible in viewport part of page.

What is the Current behavior?

I'm running single test in Testcafe, which takes screenshot of entire page. I'm using custom browser provider which handles takeScreenshot method - testcafe-browser-provider-puppeteer.
Unfortunately it doesn't matter if I use in test t.takeScreenshot({ fullPage:true }) or -s fullPage=true option running testcafe, in both cases created screenshot contains only part of page.
However, I have noticed puppeteer creates screenshot correctly (as full page). After that, Testcafe replaces created screenshot with new one (non full page).

What is the Expected behavior?

Expected behaviour would be TestCafe not replaces created with puppeteer screenshot.

What is your public website URL? (or attach your complete example)

I prepared repository, where you can reproduce my scenario. Repository contains simple test with custom browser provider - testcafe-browser-provider-puppeteer. Please read section Steps to Reproduce below.

What is your TestCafe test code?

// simplified test
const path = require('path');

const runDefaultVrTests = () => {
    const breakpointName = 'default';
    const width = 320;
    const height = 640;
    const presetName = 'normal'

    fixture(`Visual regression tests for breakpoint ${width} x ${height}`)
        .beforeEach(async (t) => {
            await t.resizeWindow(width, height);
        });

    test(`Create screenshot for preset: ${presetName}`, async (t) => {
        await t.navigateTo('https://allegro.pl');

        await t.takeScreenshot({
            path: path.join(breakpointName, `${presetName}.png`),
            fullPage: true,
        });
    });
};

runDefaultVrTests();

Your complete configuration file

No response

Your complete test report

Running tests in:

• Chrome 100.0.4889.0 / macOS 10.15.7

Visual regression tests for breakpoint 320 x 640

✓ Create screenshot for preset: normal (screenshots: /screenshots/visual-regression/puppeteer/default/en-US/normal.png)

1 passed (19s)

Screenshots

No response

Steps to Reproduce

1. Clone demo repository with git clone git@github.com:pfryga/testcafe-issue-poc.git
2. Install dependencies with npm ci
3. Run tests with npm run visual-regression
4. On message in terminal please open /Users/[...]/testcafe-issue-poc/screenshots/default/normal.png screenshot. For next 10 seconds created screenshot contains full page (proper behavior), open created screenshot. As you can see screenshot contains entire page.
5. Execution of tests is purposely delayed for 10000ms - for this time correct screenshot is created by puppeteer.
6. After 10000ms Testcafe replaces created screenshot with corrupted one (non full page) - undesirable step

TestCafe version

1.18.1

Node.js version

16.13.1

Command-line arguments

testcafe --app-init-delay 10000 "puppeteer:no_sandbox" --screenshots "./screenshots" "./vr-test.js"

Browser name(s) and version(s)

Chrome 100.0.4889.0

Platform(s) and version(s)

macOS 10.15.7

Other

No response

[AlexKamaev]

I was able to reproduce the issue. It looks like its cause is in the testcafe-browser-provider-puppeteer module, but not in TestCafe.

My research showed that the issue can be in the hasCustomActionForBrowser method, which is not overridden in the provider.

I tried to modify my code locally and it works.

It's better to create an issue in the testcafe-browser-provider-puppeteer repository, since it's not officially supported by the TestCafe team.

[pfryga]

@AlexKamaev, thanks for your reply!
Could you write what did you do locally to fix the issue? I have tried to override function hasCustomActionForBrowser in my fork of testcafe-browser-provider-puppeteer but it does not solve the problem.

[AlexKamaev]

@pfryga
I added the following function to the testcafe-browser-provider-puppeteer:

async hasCustomActionForBrowser (/* browserId */) {
        return {
            hasCloseBrowser:                this.hasOwnProperty('closeBrowser'),
            hasResizeWindow:                this.hasOwnProperty('resizeWindow'),
            hasTakeScreenshot:              this.hasOwnProperty('takeScreenshot'),
            hasGetVideoFrameData:           this.hasOwnProperty('getVideoFrameData'),
            hasCanResizeWindowToDimensions: this.hasOwnProperty('canResizeWindowToDimensions'),
            hasMaximizeWindow:              this.hasOwnProperty('maximizeWindow'),
            hasChromelessScreenshots:       true, // this property makes effect
        };
    },

[pfryga]

Ok, thanks @AlexKamaev, it works!