Have ideas to improve npm?Join in the discussion! »

    cypress-image-diff-js

    1.10.3 • Public • Published

    cypress-image-diff

    Visual regression test with cypress

    This tool was created to make visual regression as simple as possible, by exposing basic functions that allow you to view the difference between images. The wrapper uses pixelmatch which is simple and powerful and relies on cypress to take screenshots.

    NPM Downloads

    Build Status

    Table of contents

    Getting started

    Once you have setup cypress and followed Cypress integration you can start writing tests

    Writing a test

    Create a spec file under cypress integration folder i.e cypress/integration/specs/some-test-spec.js

    Then use the cypress image diff command to take screenshots of pages or elements:

    Take screenshot and compare of the whole page

    describe('Visuals', () => {
      it('should compare screenshot of the entire page', () => {
        cy.visit('www.google.com')
        cy.compareSnapshot('home-page')
      })
    })

    You can also make the comparison assertion more flexible by applying a higher threshold (default is 0):

    describe('Visuals', () => {
      it('should compare screenshot of the entire page', () => {
        cy.visit('www.google.com')
        cy.compareSnapshot('home-page-with-threshold', 0.2)
      })
    })

    Take screenshot and compare an element

    describe('Visuals', () => {
      it('should compare screenshot from a given element', () => {
        cy.visit('www.google.com')
        cy.get('#report-header').compareSnapshot('search-bar-element')
      })
    })

    Hiding an element before taking a screenshot

    describe('Visuals', () => {
      it('should compare screenshot from a given element', () => {
        cy.visit('www.google.com')
        cy.get('#report-header').hideElement() // hideElement(false) to unhide
        cy.compareSnapshot('search-bar-element')
      })
    })

    Updating baseline images

    If there are wanted changes to the application in test and if we need to update baseline images, you can follow the steps in CLI documentation to update the baselines.

    Alternatively you can delete the baseline image that you wish to be updated and rerun the tests, this will create a new baseline image with the updated image.

    Folder structure

    Folder structure is hard coded (see below). There will be enhancements coming in to make it configurable:

        .
        ├── cypress-visual-screenshots
            ├── baseline
            ├── comparison
            ├── diff
    

    Force resolution size

    In order to force the screenshot resolution when running a test you will need to set the following environment variables:

    export HEIGHT=2240 // Default is set to 1280
    export WIDTH=1980 // Default is set to 720

    Please notice

    Be aware that despite forcing a screenshot resolution to a particular height and width for a test, if this test is run on different computers (i.e a 13" Mac vs PC attached to a 30" monitor), the results will be different. So it's extremely important that you standardize where the tests will run, both locally and CI.

    One way to handle this is by running it with docker container. This project tests use a docker container to run the tests so it could be used as an example.

    Install

    npm i cypress-image-diff-js

    DownloadsWeekly Downloads

    3,424

    Version

    1.10.3

    License

    MIT

    Unpacked Size

    369 kB

    Total Files

    56

    Last publish

    Collaborators

    • avatar