'The snapshot is missing' error message

[liegeandlief]

Describe the bug

When running tests using npx cypress open and clicking on the snapshot row in Cypress to see the snapshot image comparison, I get the error message: The snapshot is missing. Displaying current state of the DOM.

If I look in the cypress/integration/__image_snapshots__ directory then I can see the three images IMAGE_NAME.png, IMAGE_NAME.diff.png and IMAGE_NAME.actual.png and they all look as I would expect.

My test calls this plugin using cy.document().toMatchImageSnapshot() and my Cypress config file is as follows:

{
  "baseUrl": "http://localhost:5000",
  "viewportWidth": 1366,
  "viewportHeight": 768,
  "ignoreTestFiles": [
    "**/__snapshots__/*",
    "**/__image_snapshots__/*"
  ],
  "env": {
    "cypress-plugin-snapshots": {
      "autoCleanUp": true,
      "autopassNewSnapshots": false   
    }    
  }   
}

Can you please let me know if I am doing something wrong in terms of getting the image comparison and update UI to display? Many thanks :)

[el-davo]

I am seeing the same issue

[sundaycrafts]

I faced the same issue. It was resolved to avoid using async/await (I didn't know Cypress doesn't support async/await).

Doesn't work

describe('Capture screen', () => {
  it('show itself as we expected', async () => {
    await cy.visit('http://example.com')
    cy.document().toMatchImageSnapshot()
  })
})

Work as expected

describe('Capture screen', () => {
  it('show itself as we expected', () => {
    cy.visit('http://example.com').then(() => {
      cy.document().toMatchImageSnapshot()
    })
  })
})