Cypress visual testing with free plugin | Compare snapshot with Cypress

Github repo: github.com/ukt...
Please follow the installation process as per the documentation.
💙 𝗦𝘁𝗮𝘆 𝗖𝗼𝗻𝗻𝗲𝗰𝘁𝗲𝗱!
Github: github.com/moi...
Linkedin: www.linkedin.c...
#cypress #visualtesting #automation

[@rchovatiya88]

Bro how do u add base image so we can compare against it like comparesnapshot(/path/to/original)- as we want to make sure it matches production UI then match against test env ? Thanks btw really good video 👏

[@moinshawon]

Welcome!
No, I didn't manually add the base image to the baseline folder. It will be automatically added there when you run the test case for the first time. Keep in mind that there won't be any comparison during your initial execution. You need to run it again for the comparison.

[@drghungroo7956]

Can you put a video on how to do the same in cypress 10+, where we don't have plugin folder

[@moinshawon]

Apology for the late reply.
For cypress version above 10, please navigate to the "cypress.config.js" file and paste the below code:
const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin');
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
getCompareSnapshotsPlugin(on, config);
},
},
});
reference: github.com/uktrade/cypress-image-diff/blob/main/docs/Cypress%20integration.md

[@ricardorien]

@@moinshawon Maybe you can need to put require("./node_modules/cypress-image-diff-js/dist/plugin") node_modules before!