jaredpalmer / cypress-image-snapshot

Catch visual regressions in Cypress
MIT License
887 stars 160 forks source link

matchImageSnapshot opens a new page to take the screenshots and that it is an issue #201

Open melibe23 opened 3 years ago

melibe23 commented 3 years ago

An element that I want to take a screenshot of hides when there is any other action on the site. So, even if I select correctly the element, the image appears empty

image

Compare basket -- Desktop -- dropdown_with_0_app snap

This is my config

addMatchImageSnapshotCommand({
  failureThreshold: 0.09, // threshold for entire image
  failureThresholdType: 'percent', // percent of image or number of pixels
  customDiffConfig: { threshold: 0.01 }, // threshold for each pixel
  capture: 'viewport', // capture viewport in screenshot
})

This is my test:

describe(`Compare basket`, () => {
      context(`Desktop`, () => {
        before(() => {

          cy.visit(url)
          cy.get(appBar).find(`[data-testid="icon-ga-compare"]`).click({ force: true })
        })

        it(`dropdown_with_${index}_app`, () => {
          cy.get(`[data-testid="compare-basket"]`).matchImageSnapshot()
        })
      })
philsherry commented 3 years ago

Is this not simply down to you calling it from a new .it() block?

For something like you're after, you'd have to do something more like this, right?

it(`dropdown_with_${index}_app`, () => {
  // (call them in the same block same block)
  cy.get(appBar).find(`[data-testid="icon-ga-compare"]`).click({ force: true })
  cy.get(`[data-testid="compare-basket"]`).should('be.visible').matchImageSnapshot()
})