screenshotting webgl in firefox is broken

[mixtur]

What is your Test Scenario?

We are doing tests with screenshot diffing in a complex webgl application.

What is the Current behavior?

In our case screenshots in Firefox (version 80.0.1) on win 10 have white rectangles where webgl canvas should be.
But everything is fine on Chrome (version 85.0.4138.102) also on Windows 10.

What is the Expected behavior?

Actual contents of canvas on screenshots

What is your web application and your TestCafe test code?

I can't share our code. But I believe any practical webgl application will allow to somewhat reproduce the issue.

You can use this example (first example in three.js home page)

fixture('A')
  .page('https://cineshader.com/');

test('b', async t => {
  await t.wait(10000);
  await t.takeScreenshot('c.png');
  await t.wait(1000);
  await t.takeScreenshot('d.png');
});

The issue also visible on video captures
testcafe firefox,chrome test-example -s screenshots --video video

Screenshots:

Chrome-c

Chrome-d

Firefox-c

Firefox-d

Your Environment details:

• testcafe version: 1.9.2
• node.js version: 12.18.3
• command-line arguments: testcafe firefox,chrome test-example -s screenshots --video video
• browser name and version: Firefox (version 80.0.1) Chrome (version 85.0.4138.102)
• platform and version: Windows 10
• other: I believe everything was fine in July. I am not sure what change caused the issue, it could be pretty much anything from operating system updates, to drivers (nvidia), to browser versions, to testcafe versions (A month ago we were using testcafe@1.8.1).

[wentwrong]

I've tried to reproduce the issue with these environment settings, but haven't managed. It works as expected; screenshots and videos are nearly the same both in Chrome and Firefox.

It is possible that the issue is caused by a broken Firefox installation. Do you have glitches when opening a WebGL app in Firefox without TestCafe? In case this problem occurs only when TestCafe is used, please open the WebGL app in debug mode. This will help to determine whether the issue is caused by our screenshotting functionality.

[mixtur]

It is possible that the issue is caused by a broken Firefox installation

The issue shows itself both on my local machine and on our ci agent. I find it unlikely that both machines have broken firefox installations. What they do have in common though is Nvidia GPU.

Do you have glitches when opening a WebGL app in Firefox without TestCafe? In case this problem occurs only when TestCafe is used, please open the WebGL app in debug mode.

Even when being run via testcafe everything looks fine. It is screenshots and videos that are broken, image on the display is fine.

[wentwrong]

We reproduced the issue when we took a screenshot in Firefox using the Firefox Screenshots feature:

Does this apply to your case?

The issue is reproduced without TestCafe, so it looks like a bug in Firefox's screenshot functionality, but we couldn't find anything similar in their bug tracker.

As a workaround, you can try running tests in your current user profile (see the User Profile part of the Browsers guide to know more) and experiment with different settings of Firefox that may somehow affect rendering. In particular, you can turn off "Hardware Acceleration" as described here.

[mixtur]

If I take a screenshot in our project with Firefox's "Take screenshot" it is indeed broken the same way as in our tests.

And yes disabling hardware acceleration seems to work both in our project and in cineshader. Thank you. I think the issue still stands though.

[mixtur]

A little more details. In our tests we actually use takeElementScreenshot and canvas only takes part of the page.

Also with firefox:userProfile and disabled hardware acceleration canvas part of the page is screenshooted ok, but takeElementScreenshot is not cropping anything. Even the browser's UI is there.

Also there is a warning emitted now

  Was unable to take a screenshot due to an error.

  Error: Unable to locate the page area in the browser window screenshot at <path/to/screenshot.png>, because the page area mark with ID 2747641261 is not found in the screenshot.

[wentwrong]

Thank you for the details. I should also note that this workaround doesn't allow you to capture a video of a test run in Firefox.

You are right, the issue is still there, but it's caused by a bug in Firefox. If possible, could you please submit an issue to the Mozilla bug tracker? To take a screenshot of a page, we rely on APIs provided by Firefox, so I think it is some bug Firefox needs to fix on their side. I will close the issue for now.