odai-alali / cypress-odiff Goto Github PK

Cypress Visual Regression Tests

JavaScript 3.23% TypeScript 96.77%

cypress cypress-plugin odiff testing visual-regression-testing

cypress-odiff's Introduction

Cypress ODiff

A plugin for adding visual regression test to Cypress using ODiff The fastest pixel-by-pixel image visual difference tool in the world.

Why?

ODiff Benchmarks are the main motivation for this. 🚀

Getting Started

Install:

$ npm install cypress-odiff

Add the plugin

const { addCompareScreenshotPlugin } = require('cypress-odiff')

module.exports = defineConfig({
  trashAssetsBeforeRuns: false, // needed to avoid deleting expeted screenshot
  e2e: {
    setupNodeEvents (on, config) {
      addCompareScreenshotPlugin(on, config)
    }
  }
})

Add the command in support/commands.js

const { addCompareScreenshotCommand } = require('cypress-odiff')

addCompareScreenshotCommand({})

Using in Tests

Given the following test case under cypress/e2e/example.cy.js

describe('example', () => {
  it('passes', () => {
    cy.visit('https://example.cypress.io')
    cy.compareScreenshot()
  })
})

the command compareScreenshot will:

create a screenshot (expected) under cypress/screenshots/example.cy.js/passes.png and save it for further runs
if the screenshot is already created, the command will compare the recorded screenshot (actual) with the previously saved one (expected) and fail if there is a difference between these two screenshots. An image with the highlighted differences (diff) will be created.

Options

compareScreenshot accepts an options object with the following keys:

screenshotOptions: will be passed to cy.screenshot() command to capture screenshot. see Cypress screenshot options docs.
compareOptions: will be passed to compare method from package. see ODiff Nodejs.
pluginOptions: These options define how this plugin should behave.

Plugin Options

name	default
`customSnapshotsDir`	`"cypress/snapshots"`	should be under cypress directory. `.expected`, `.actual`, `.diff` screenshots will be saved under this path.
`updateSnapshots`	`undefined`	if `true`, plugin will save the screenshot with `.expected` suffix and this image will be used for furthur visual regressions tests
`failOnExpectedMissing`	`undefined`	if `true` the test will fail when `.expected` screenshot does not exist. This is particulary usefull when running test on ci.

cypress-odiff's People

Contributors

Stargazers

Watchers

Forkers

jradelmo

cypress-odiff's Issues

Need to have ability to define custom name to the base (expected) screenshot

We are currently using Cypress with Cucumber, We can only compare 1 screenshot per feature file as only once base expected screenshot is being created per feature file.

is there any way we can define the base screenshot name like below:

 cy.get("canvas").compareScreenshot('before-markup');
 cy.get("canvas").compareScreenshot('private-markup');
 cy.get("canvas").compareScreenshot('public-markup');

By having above feature we can test different stages of the canvas in a single test. Currently only one base (expected) screenshot is created for a feature file

How do I integrate `.diff` screenshot with the cucumber report

I am using cypress10 with cucumber hence I use multiple-cucumber-html-reporter ,
When there is difference between actual and expected image, it just shows the error like Screenshots does not match. 263553 pixels difference (29.1049943403%) and attach the actual screenshot.

I also want to attach the .diff screenshot with report.

Is there anyway we can attach the failing screenshot with multiple-cucumber-html-reporter ?

Below is my package.json & cypress.config.js

package.json

cypress.config.js

Do we have retry parameter while comparing screenshot?

Do we have retry functionality while comparing the screenshot? We should have feature for retry while taking the screenshot,
Could you please introduce a new parameter as retry under compareOptions like below:

addCompareScreenshotCommand({
    pluginOptions: {
        customSnapshotsDir: "cypress\\snapshots"
    },
    compareOptions:{
        threshold:0.3
        retry: 2
    }
   
});

Update peer dependencies related Cypress

Right now the peerDependencies lists

"peerDependencies": {
"cypress": "10.0.3"
}
so there is a dependency warning if you are using a newer major version of cypress 10.7.0
I would propose changing it to ^n if there are no issues.

thanks so much!

How to set the threshold while comparing the screenshot

It works fine for me but my tests are failing with minor difference, Is there anyway I can define the threshold so it can ignore the some pixel difference while comparing the snapshot?

If use cypress 12.8.1 have 'Conflicting peer dependency'

just run 'npm ci'

npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/cypress
npm ERR! peer cypress@"^10.0.3" from [email protected]
npm ERR! node_modules/cypress-odiff
npm ERR! cypress-odiff@"1.1.1" from the root project

Why does system appends additional path with the configured path of the screenshot?

As per above screenshot, I have set the directory for the snapshot as customSnapshotsDir: "cypress/snapshots"

But when system adds additional sub-folders into that directory like \cypress\e2e\features and then stores the the screenshot in particular test folder.

I don't want these additional sub-folders: \cypress\e2e\features into the configured directory.

All the screenshot should be stored like \cypress\snapshots\test1.feature\<test-screenshots>

Is there anyway I can store the screenshot directly into the configured directory as per configuration under command.js

Is there anyway we can compare specific element?

It looks like this plugin only compare the whole screen.
Is there any way we can compare only specific element on the screen like below:

cy.get("#screen-canvas-container").compareScreenshot();