simonsmith / cypress-image-snapshot

Catch visual regressions in Cypress with jest-image-snapshot
MIT License
64 stars 15 forks source link

Missing counter for shapshots in the same test #58

Open gagatekns opened 3 months ago

gagatekns commented 3 months ago

Missing counter for shapshots in the same test. If i run test and inside "it" I use twice or more cy.matchImageSnapshot(), test fails because it compare snapshot from first occurrence of cy.matchImageSnapshot() and second occurrence. instead make 2 separate snapshot with coutner. As I can see in jest-image-snapshot], default file name should contain customSnapshotIdentifier: A custom name to give this snapshot. If not provided one is computed automatically. When a function is provided it is called with an object containing testPath, currentTestName, counter and defaultIdentifier as its first argument. The function must return an identifier to use for the snapshot. If a path is given, the path will be created inside the snapshot/diff directories.

testPath, currentTestName, counter - but no counter is added to snapshots

simonsmith commented 3 months ago

Could you give an example of how to reproduce this?

gagatekns commented 2 months ago

Hi, simplest example.

  it.only('add new todo', () => {
    cy.matchImageSnapshot();       <-------------------------- First snapshot
    cy.get('[data-test=new-todo]').type(`test{enter}`)
    cy.matchImageSnapshot();       <-------------------------- Second snapshot
  })

before I used other lib for snapshots and in this case if I made 2 or more snapshots, without any name/postfix, then it automaticaly created "counters". in this case first snapshot filename was something like "add new todo#0.png" and second "add new todo#1.png" and so one, the number afrer # was increasing for every next snapshot filename in test. But in this lib if I use 10 times in one test cy.matchImageSnapshot(); each snapshot filename will be exactly the same, so each cy.matchImageSnapshot(); will override snapshot made before

simonsmith commented 2 months ago

You can pass an argument to cy.matchImageSnapshot() yourself to get round this. This is advisible to make it clear what your snapshots are actually for

  it.only('add new todo', () => {
    cy.matchImageSnapshot('no todo items added');       <-------------------------- First snapshot
    cy.get('[data-test=new-todo]').type(`test{enter}`)
    cy.matchImageSnapshot('added one todo item');       <-------------------------- Second snapshot
  })
gagatekns commented 2 months ago

Yes, I know but it will be nice if I don't pass anything, then will be counter which will be increace automatically

simonsmith commented 1 month ago

I think it makes sense here to explicity name your snapshots so that when browsing them in pull requests or the cypress directory they make sense to other developers

Names like add new todo 1 and add new todo 2 are not useful. I'd recommend picking meaningful names for your snapshots

However I'm open to adding this feature if you'd like to contribute a pull request