Do we have a setting for fixed baseline images aside for only comparing from the previous run?

[faith-berroya]

Firstly, thank you for the great plugin! It works great on my local where I can always check for the image screenshots. However, I noticed that the screenshots were changing, and I have to constantly check if the plugin is getting the correct image or not because it always output as PASS even with different image, unless the image that will be compared has different dimension from the base image.

I also have a question in here. Thank you so much!
#87

[FRSgit]

Hey @faith-berroya,

I've responded in a linked issue - please, give me a sign whether that has helped you!

Regarding tests always passing - if you don't set updateImages to true every time the test is being run that shouldn't be the case. Plugin should catch any major changes in the page structure when it's visible on the screenshot. Can you elaborate more about your use-case and environment where you run the tests suite (OS, browser name, Cypress & Node versions)?

[notdotscott]

As an example of what I'm attempting:

describe('Compare', () => {
  it('target snapshot', () => {
    cy.visit(Cypress.env('TEST_TARGET_URL'));

    cy.matchImage();
  });

  it('source snapshot', () => {
    cy.visit(Cypress.env('TEST_SOURCE_URL'));

    cy.matchImage();
  });
});

[FRSgit]

Sorry for late response 😞
@notdotscott That's and interesting usecase!
You're right - even if you pass the same title configuration option (as below) you'll get #0 and #1 suffix for each of the images.

cy.matchImage({ title: 'my-title' });

I'm not sure how the API for this feature should look like:

1. It could be done via additional option - I could let you pass preventTitleClashes: false and together with title option you could force tests to use the same title for screenshots. Resulting in comparing images. Your test would look like this:

const title = 'my-screenshot-title';
describe('Compare', () => {
  it('target snapshot', () => {
    cy.visit(Cypress.env('TEST_TARGET_URL'));

    cy.matchImage({ title, preventTitleClashes: false });
  });

  it('source snapshot', () => {
    cy.visit(Cypress.env('TEST_SOURCE_URL'));

    cy.matchImage({ title, preventTitleClashes: false });
  });
});

2. .matchImage() could return image details (like path) and that could be passed as matchAgainst option. Your test would look like this:

describe('Compare', () => {
  it('target snapshot', () => {
    cy.visit(Cypress.env('TEST_TARGET_URL'));

    cy.matchImage()
     .then(image => {
       cy.visit(Cypress.env('TEST_SOURCE_URL'));
       cy.matchImage({ matchAgainst: image.path });
     });
  });
});

Which of these APIs would fit better for your usecase @notdotscott? Personally I'm more for the 2nd option as it seems to be a bit more flexible in other use-cases - any valid screenshot path could be passed to the matchAgainst.

[notdotscott]

Hi @FRSgit, thanks very much for the reply! I agree, the second option definitely looks more flexible, and is more declarative than the first, so that one gets my vote 👍

[FRSgit]

@notdotscott - I've just published an alpha version containing this feature (Go released under @frsource/cypress-plugin-visual-regression-diff@3.0.0-alpha.1--match-against). Can you give it a try?

If you have any feedback (that it works or not 😄) write it down in #146 please 🙏
Example usage can be seen here.

[FRSgit]

Hey, I've released the matchAgainst functionality in the new release - 3.0.0! 🎉
Please open a ticket if you find any issues 🙂