Screenshots fail in Headless Chrome in Node >= 17 (at least on a Mac)

[bdwain]

What is your Scenario?

Take a screenshot in Headless Chrome in Node >= 17 on a mac

What is the Current behavior?

It fails with different errors depending on the testcafe version.

For testcafe versions >= 2.0.1, this will error with

 tests
 ✖ It should take a screenshot

   1) Uncaught object "[object Object]" was thrown. Throw Error instead.

      Browser: Chrome 108.0.5359.94 / macOS 10.15.7


 1/1 failed (9s)

For versions < 2.0.1 (including v1), it will give the following warning, and make no screenshot

 tests
npm  ✓ It should take a screenshot


 1 passed (1s)

 Warnings (1):
 --
  Was unable to take a screenshot due to an error.

  Error: Unexpected end of input
      at module.exports.ChunkStream._end (/Users/bwain/dev/test-app/node_modules/pngjs/lib/chunkstream.js:100:7)
      at module.exports.ChunkStream._process (/Users/bwain/dev/test-app/node_modules/pngjs/lib/chunkstream.js:203:12)
      at module.exports.ChunkStream.end (/Users/bwain/dev/test-app/node_modules/pngjs/lib/chunkstream.js:90:10)
      at exports.PNG.PNG.end (/Users/bwain/dev/test-app/node_modules/pngjs/lib/png.js:98:16)
      at exports.PNG.PNG.parse (/Users/bwain/dev/test-app/node_modules/pngjs/lib/png.js:88:8)
      at readPng (/Users/bwain/dev/test-app/node_modules/testcafe/src/utils/promisified-functions.js:25:9)
      at BrowserProviderPluginHost.takeScreenshot (/Users/bwain/dev/test-app/node_modules/testcafe/src/browser/provider/built-in/dedicated/base.js:90:37)
      at BrowserProvider.takeScreenshot (/Users/bwain/dev/test-app/node_modules/testcafe/src/browser/provider/index.ts:409:13)
      at Capturer._takeScreenshot (/Users/bwain/dev/test-app/node_modules/testcafe/src/screenshots/capturer.js:123:9)
      at /Users/bwain/dev/test-app/node_modules/testcafe/src/screenshots/capturer.js:152:13

What is the Expected behavior?

It should take screenshots like other browsers and node versions

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

https://github.com/bdwain/testcafe-chrome-screenshot-issues

What is your TestCafe test code?

import { Selector } from 'testcafe';

fixture('tests')
  .page('http://localhost:3000');

test('It should take a screenshot', async (t) => {
  await t.expect(Selector('header').exists).ok();
  await t.takeScreenshot();
});

Your complete configuration file

No file

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

1. On a mac, install node 17, 18, or 19, and Chrome
2. clone https://github.com/bdwain/testcafe-chrome-screenshot-issues
3. npm install
4. npm run build
5. npm run e2e

TestCafe version

2.1.0

Node.js version

18.12.1

Command-line arguments

testcafe chrome:headless ./e2e/* -s path=./e2e-reports --app "npx serve -s build" --app-init-delay 4000

Browser name(s) and version(s)

Chrome 108.0.5359.94

Platform(s) and version(s)

macOS 12.6.1 (Monterey)

Other

On non-headless chrome I get this warning (I still get a screenshot though)

 Warnings (1):
 --
  Unable to locate the page area in the browser window screenshot at /var/folders/pn/0vfds3113zb0nz6ts8mz24dw0000gp/T/testcafe/screenshots-61026IwF6tOxRh1v1/2022-12-06_22-25-04/test-1/Chrome_108.0.0.0_macOS_10.15.7/1.png, because
  the page area mark with ID 2685887944 is not found in the screenshot.

[miherlosev]

Hi @bdwain

Thank you for the shared example. I've reproduced the issue.

[AndreyBelym]

This issue and #7396 are caused by the same problem (nodejs/node#40537). It was fixed in our dependency that we use to connect to Headless Chrome and take screenshots: cyrus-and/chrome-remote-interface@4683e61. I found that we used an outdated chrome-remote-interface version. After updating it in testcafe@v2.2.0-rc.1, I cannot reproduce the issue anymore.