cypress-plugin-visual-regression-diff: Invalid PNG error

Describe the bug When capturing screenshots I intermittently get an “Invalid PNG” error in the console.

TypeError: Invalid PNG
      at Object.addMetadata (C:\dev\cg-react-components\node_modules\meta-png\dist\meta-png.umd.js:1:886)
      at addPNGMetadata (C:\dev\cg-react-components\node_modules\@frsource\cypress-plugin-visual-regression-diff\src\image.utils.ts:12:3)
      at writePNG (C:\dev\cg-react-components\node_modules\@frsource\cypress-plugin-visual-regression-diff\src\image.utils.ts:23:5)
      at compareImagesTask (C:\dev\cg-react-components\node_modules\@frsource\cypress-plugin-visual-regression-diff\src\task.hook.ts:157:5)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)

To Reproduce Steps to reproduce the behavior:

The issue is intermittent. A test might pass one time and fail another. All my tests are component tests. The subject of the screenshot does not seem to matter.

Expected behavior A clear and concise description of what you expected to happen.

Screenshots capture without error

Screenshots If applicable, add screenshots to help explain your problem.

Please complete the following information:

Package version: 3.1.1
OS and version: Windows 10
Browser and version Chrome/Firefox
Cypress version 10.11.0

Additional context Add any other context about the problem here.

I think the problem is due to the recently added cleanup functionality using the metadata. I have logged out the PNG buffer and there is data there.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 25 (12 by maintainers)

Most upvoted comments

Thank you all for the messages, we’re really having quite intense issue-fixing process going on here 😄 ❤️

@dhulme I’ve created a PR with this fix on meta-png library repo. Last time its author was really quick and released new version the same day I’ve created a PR. So, hopefully meta-png will get released with a fix soon and I’ll be able ship it to you this week.

If that won’t help for @menelikw and @xibman I’ll do one more round of trying to reproduce it (@menelikw then your repo would be super useful 🙏 ).

I’ll keep you updated

FRSgit on Nov 10, 2022

@menelikw Hey,

Yes, it’s a separate issue - something not related to this ticket.

But I see it was reported today already: https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/issues/184 Please follow that report for updates

FRSgit on Nov 18, 2022

@FRSgit Thanks a lot i’ve just done the update, it work well !

xibman on Nov 15, 2022

Yeah I’ll do that this evening uk time.

menelikw on Nov 10, 2022

+1 for this bug.

Test failed both in headless mode and with chrome browser but not always.

Both screenshots are created:

VLocaleSwitcher  renders #0.actual.png
VLocaleSwitcher  renders #0.png

More complete stack trace

  at <unknown> (http://localhost:5173/__cypress/runner/cypress_runner.js:145912:78)
      at tryCatcher (http://localhost:5173/__cypress/runner/cypress_runner.js:11318:23)
      at Promise._settlePromiseFromHandler (http://localhost:5173/__cypress/runner/cypress_runner.js:9253:31)
      at Promise._settlePromise (http://localhost:5173/__cypress/runner/cypress_runner.js:9310:18)
      at Promise._settlePromise0 (http://localhost:5173/__cypress/runner/cypress_runner.js:9355:10)
      at Promise._settlePromises (http://localhost:5173/__cypress/runner/cypress_runner.js:9431:18)
      at _drainQueueStep (http://localhost:5173/__cypress/runner/cypress_runner.js:6025:12)
      at _drainQueue (http://localhost:5173/__cypress/runner/cypress_runner.js:6018:9)
      at ../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:5173/__cypress/runner/cypress_runner.js:6034:5)
      at Async.drainQueues (http://localhost:5173/__cypress/runner/cypress_runner.js:5904:14)
  From Your Spec Code:
      at Context.<anonymous> (http://localhost:5173/__cypress/src/node_modules/.vite/deps/@frsource_cypress-plugin-visual-regression-diff.js?v=83b79b34:173:27)
      at getRet (http://localhost:5173/__cypress/runner/cypress_runner.js:139204:20)
      at tryCatcher (http://localhost:5173/__cypress/runner/cypress_runner.js:11318:23)
      at Promise.attempt.Promise.try (http://localhost:5173/__cypress/runner/cypress_runner.js:8592:29)
      at Context.thenFn (http://localhost:5173/__cypress/runner/cypress_runner.js:139218:63)
      at Context.then (http://localhost:5173/__cypress/runner/cypress_runner.js:139640:21)
      at wrapped (http://localhost:5173/__cypress/runner/cypress_runner.js:157508:19)
      at <unknown> (http://localhost:5173/__cypress/runner/cypress_runner.js:156244:15)
  
  From Node.js Internals:
    TypeError: Invalid PNG
        at Object.getMetadata (/Users/xibman/Koala/Projects/monorepo/node_modules/meta-png/dist/meta-png.umd.js:1:1565)
        at getPNGMetadata (/Users/xibman/Koala/Projects/monorepo/node_modules/@frsource/cypress-plugin-visual-regression-diff/src/image.utils.ts:14:3)
        at isImageCurrentVersion (/Users/xibman/Koala/Projects/monorepo/node_modules/@frsource/cypress-plugin-visual-regression-diff/src/image.utils.ts:16:3)
        at compareImagesTask (/Users/xibman/Koala/Projects/monorepo/node_modules/@frsource/cypress-plugin-visual-regression-diff/src/task.hook.ts:143:25)
    at runMicrotasks (<anonymous>)
        at processTicksAndRejections (node:internal/process/task_queues:96:5)

xibman on Nov 8, 2022