percy-cypress VS cypress-plugin-snapshots

// cypress/support/commands.js import '@percy/cypress' ... // https://github.com/percy/percy-cypress/issues/56 Cypress.Commands.add( 'percySnapshotElement', { prevSubject: true }, (subject, name, options) => { cy.percySnapshot(name, { domTransformation: (documentClone) => scope(documentClone, subject.selector), ...options }) } ) function scope(documentClone, selector) { const element = documentClone.querySelector(selector) documentClone.querySelector('body').innerHTML = element.outerHTML return documentClone }

In opened project in your favorite code editor with installed cypress you need to install percy-cypress:

One plugin which Cypress suggests is the cypress-plugin-snapshots, but if you wander into Cypress’ plugin “market” you can see that there are more. After checking a few, I have decided to go with the cypress-image-diff-js plugin because it’s free, has a relatively simple api, seems to have a good update activity and a fair amount of GitHub stars.

I had a lot of fun putting this together and was able to do so quickly with the help of Yannick's boilerplate, Kenny's Assets, Phaser, Cypress and cypress-plugin-snapshots.

The cypress-plugin-snapshots module has already been mentioned earlier, but I'll mention it again as it provides image snapshot functionality as well. The toMatchImageSnapshot() command can take a screenshot of the entire web document or of a specific element.