Not possible to compare screenshots with Puppeteer

[dogusata]

Hi there, there are several issues I'm facing right now. First one is to creating the snapshot. Also, all of the examples you've provided don't work as expected right now.

Without setting the configuration runInProcess to true, it is not possible to get the screenshot. It generates the file however the file is corrupted and not a real png file. When using runInProcess it is possible to create a real png snapshot.
However,
When i rerun the test, it fails with the message:

TypeError: data.readUInt32BE is not a function
    const image = await page.screenshot();
    > expect(image).toMatchImageSnapshot({

Versions:
puppeteer: 23.2.2
jest: 29.7.0
jest-image-snapshot: 6.4.0
macos: 14.6.1

I've tried getting the snapshot optimized from puppeteer. Actually, i've tried almost every possible combination between two. None of them worked as expected.

The screenshot size (when i create it with runInProcess) is about 32kb and the image size is also pretty small like 500px by 950px.

---

UPDATE

It seems like the latest version of the puppeteer buffer is somewhat corrupted or contains unnecessary information. A quick solution to that is to use the path attribute to write the file to disk (temporarily) and read it with fs.readFileSync to get the buffer. Since puppeteer is able to write the file to disk properly.

// Take the screenshot of the page with puppeteer
// and write it to disk
await page.screenshot({
  type: 'png',
  captureBeyondViewport: false,
  optimizeForSpeed: true,
  path: TEMP_SCREENSHOT_PATH
});

// read the screenshot as a buffer
const ss = await fs.readFileSync(TEMP_SCREENSHOT_PATH);

// send the buffer to toMatchImageSnapshot
expect(ss).toMatchImageSnapshot();

// remove the temp screenshot file
await fs.unlinkSync(TEMP_SCREENSHOT_PATH);

[ioannis-harbr]

Stumbled upon the same problem. Since v22 and this PR, Puppeteer returns Uint8Array instead of Buffer. You can do

const ss = page.screenshot(...)
expect(Buffer.from(ss)). toMatchImageSnapshot(...)