TestCafe takes a blank white page screenshot when running Chrome

[collinharmon]

What is your Scenario?

I am running TestCafe v.2.5.1-rc.1 in a Dockerized environment. I have screenshots takeOnFails set to true, however, when I go to open up the screenshot .png TestCafe creates, it appears to just be a blank white page every time.

I have read a TestCafe thread about a similar issue here which suggested to disable the 'Use hardware acceleration when available' option. I have done so by passing in the --disable-gpu chrome flag, but alas, still no luck.

I initially was using TestCafe v1.18.6 but upgraded to the latest hoping this issue would resolve on its own, but I get the same exact behavior with both versions.

What is the Current behavior?

TestCafe takeOnFails screenshot will take a screenshot when a Test fails, but the image will be a blank white page.

What is the Expected behavior?

TestCafe takeOnFails screenshot takes a screenshot of the UI when a Test fails, and I can see it in the corresponding .png.

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

The application is private and I cannot share anything here. But I can reproduce with TestCafe's "Getting Started" example.

What is your TestCafe test code?

fixture('Getting Started')
.page('https://devexpress.github.io/testcafe/example');

test('My first test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
});

test('My second test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
});

test('My third test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
});

test('My fourth test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
});

test('My fifth test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
});

test('My sixth test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
});

test('My seventh test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
});

test('My eighth test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
});

test('My ninth test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
});

test('My tenth test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button');
});

Your complete configuration file

No response

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

1. Run TestCafe 2.5.1-rc.1 in a Dockerized environment with screenshots takeOnFail set to True.
2. Have the test purposely fail to cause a screenshot to get created.
3. Inspect the screenshot

TestCafe version

2.5.1-rc.1

Node.js version

16.20.0

Command-line arguments

--disable-gpu --no-sandbox --disable-dev-shm-usage

Browser name(s) and version(s)

Chrome 105.0.5195.52

Platform(s) and version(s)

Ubuntu 18.04

Other

I was able to reproduce this issue using TestCafe's "Getting Started" example, to simplify the matters.

The screenshot functionality works in my experience when running TestCafe in a Linux VM, but when I try to run TestCafe in a Dockerized environment I get this issue (note, I am not using the TestCafe Docker image provided, instead I am using a custom Docker image).

[Dmitry-Ostashev]

Hello @collinharmon,

I was unable to reproduce the issue with a simple Docker image. All the screenshots are taken correctly. Here is my project example: https://github.com/Dmitry-Ostashev/testcafe-kubernetes-example/tree/take-screenshot.
Could you please share your image or modify my Dockerfile from the repo and branch mentioned above to reproduce the issue?

[github-actions]

This issue was automatically closed because there was no response to our request for more information from the original author. Currently, we don't have enough information to take action. Please reach out to us if you find the necessary information and are able to share it. We are also eager to know if you resolved the issue on your own and can share your findings with everyone.

[tuxBurner]

Hi i had the same problem.

The page is a huge react page (5MB) which loads a tons of js files, when the page is initialized.
Disabling the /dev/shm usage with the --disable-dev-shm-usage flag was not helping.

Taking a screenshot was always resulting in a white page. When i change the test url to another page, i got a screenshot with content from it.

So my guess was that the problem ist not K8s, it is the huge react page.
I enabled logging each request with:

const logger = RequestLogger({  }, {
  logResponseHeaders: true,
   logResponseBody:    true
});

and

fixture`Test`
        .page(url)
        .requestHooks(logger);

test.only("just some testing", async t => {
    console.log(await logger.requests);
})

Suddenly i could see all the requests and i got a screenshot with the content.

So i dig deeper into the problem, why adding a requesthook was solving my problem.

So starting the test with DEBUG=hammerhead:,testcafe:

I found this Problem: net::ERR_INSUFFICIENT_RESOURCES

So in the net the solution for this is to increase the /dev/shm size. I was not sure why this happened because i had the --disable-dev-shm-usage set on my run.

So my wild guess is that the chromium or firefox are using /dev/shm when fetching js files from the net.
And adding the requesthook changes it from being called parallel in serial so /dev/shm is not so heavily used.

The /dev/shm device was 64mb big in my k8s pod.

Adding:

  volumes:
    - name: dshm
      emptyDir:
        medium: Memory
        sizeLimit: 1Gi

and

      volumeMounts:
        - mountPath: /dev/shm
          name: dshm

Fixed the problem so i don't need the requesthook anymore.