@ovotech/cypress-tourist
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.4 • Public • Published

    Cypress Tourist

    PRs Welcome

    Take a picture

    Visit a place, take a picture. Compare.

    Visual Regression tool for Cypress using blink-diff.

    Features

    • Separate processes for screenshot and comparing
    • Supports typescript

    Directory Structure and concepts

    Name Location Description Intent
    champion cypress/screenshots/champion Location of the screenshots to be committed to the code-base. In first place
    challenger cypress/screenshots/challenger Location of the screenshots from the latest cypress run. Challenging first place
    diff cypress/screenshots/diff Location of the diff'd screenshots. Differences between the champion and challenger

    Ideal Workflow

    Below outlines an ideal workflow for integrating visual regression into a project.

    1. The developer makes a code change.
    2. The developer commits and tries to push the code.
    3. The end-to-end test suite runs on the developers machine via a pre-push hook, generating challenger screenshots.
    4. Once the end-to-end test suite completes, the visual regression script is run and challenger and champion screenshots are diff'ed.
    5. Differences are flagged in the diff directory and the developer either approves by copying the challenger screenshot to the champion directory, or fixes the issues raised.
    6. Developer commits the new champion's and tries to push the code again.

    The build pipeline would also follow a similar process, failing the build should there be any visual regression the developer inadvertently introduced.

    Consider outputting the diff directory as build assets.

    Installation

    Assuming you already have cypress installed and setup.

    npm install --save-dev @ovotech/cypress-tourist
    
    # Alternatively if using yarn
    yarn add dev @ovotech/cypress-tourist

    Add the script to your package.json

    {
        "scripts": {
            "test-visual-regression": "cypress-tourist"
        }
    }

    For the first time running create the directories seen in the directory structure table above.

    Append the following to your .gitignore

    cypress/screenshots/*
    !cypress/screenshots/champion
    

    Append the following to your .gitattributes file - or create one if it doesn't exist. This prevents git diff'ing the image binaries and storing the deltas - bloating the repo size.

    *.png binary
    

    Add to your cypress.json file

    {
      "screenshotsFolder": "cypress/screenshots/challenger"
    }

    Then when visiting a place - instead of using the standard cy.visit...

    Note: this takes two snapshot's of the app in the default viewports - iphone-6 and macbook-13.

    import { visitAndSnap } from '@ovotech/cypress-tourist'
    
    describe('Visual Regression', () => {
      it('captures a screenshot', () => {
        visitAndSnap('http://example.com')
      })
    })

    Alternatively if snapshotting a UI state change in the app, for example a modal popping up after clicking a button...

    Note: this takes a single snapshot of the app in the current viewport and state only

    import { snap } from '@ovotech/cypress-tourist'
    
    describe('Visual Regression', () => {
      it('captures a screenshot - in existing state', () => {
        cy.visit('http://example.com')
        cy.find('.modal button').click()
    
        snap()
      })
    })

    Running Cypress as you would through your e2e test script, a set of screenshots will be produced in the champion directory.

    As a final step run the test-visual-regression script.

    npm run test-visual-regression

    Your results will be logged to the console.

    Possible gotcha's


    Development

    # Use nvm or node version as per .nvmrc
    nvm use
    
    # Install Dependencies
    npm install
    
    # Lint files
    npm run lint

    Deploy

    See semver for versioning increments.

    # Commit all changes and then on the master branch
    npm run bump [major|minor|patch]

    Todo

    • [ ] "approve" script to copy new challenger screenshots to champion.
    • [ ] Allow for custom cypress directory - reading from cypress.json.
    • [ ] Automated testing and greenkeeper to maintain latest dependencies.
    • [ ] Different method of waiting for page load - ideally not time based.
    • [ ] Initialize with options such as custom device viewports, or a different wait time.
    • [ ] Investigate only diffing files with a different hash.
    • [ ] Investigate parallel running.
    • [ ] Add docker container runner for screenshots to combat graphics differences.

    Contributing

    Contributions and PR's welcome.

    Install

    npm i @ovotech/cypress-tourist

    DownloadsWeekly Downloads

    123

    Version

    1.3.4

    License

    Apache-2.0

    Unpacked Size

    25.1 kB

    Total Files

    16

    Last publish

    Collaborators

    • ylukomskyi-corgi
    • david.regula.ovo
    • vitalii_khudenko
    • samuelnyamukapa
    • ishanfernando-ovo
    • radhika-bijibilla
    • mbartish-ovo
    • kaluzajianzu
    • a.skomarovskyi
    • grahamdawson-ovo
    • pkari
    • srinivasdudam2
    • shatchardovo
    • tigrago
    • ronald.nsabiyera
    • marcopie_at_kaluza
    • clueless_benefactee
    • michaelwheeler
    • prtn-ovo
    • rafolo78
    • tc-kaluza
    • lutza
    • dmytro.kubatko
    • bucabug
    • thomas.finch
    • v.kolesnyk
    • mykola.p
    • s.slotskyi-ovo
    • hantastico
    • joemaher
    • tanjil-hussain
    • adam.vile
    • raluza
    • ipa-bot
    • luigi94
    • anthony_tonev
    • simonarcher999
    • dominicboston-kaluza
    • iblamefish
    • robert-smith-01
    • katebee-kaluza
    • gideoncaspi
    • coderdanuk
    • kawbot
    • markberesford301
    • ovo-homeplan
    • rupson
    • oeptariffs
    • tony.ross
    • bvjones
    • data.discovery.ovo
    • ralitsa
    • fraserhamiltonovo
    • accrecovo
    • luigi.riefolo
    • andy-heywood-ovo
    • rmcnovo
    • ggerikp
    • xnejp03
    • emmapr123
    • andrew-brook-rad
    • a.calderwood
    • sulgee.kim
    • sseccombe
    • samcooper720x
    • lughino
    • amayuk
    • jagreenwood1
    • radek_tomasek
    • clarencedglee
    • ovocms
    • ovotech-sme-team
    • gjain-npm-ovo
    • kenneth-gray
    • nevenablagoeva
    • pete-woodland
    • orion-migration-team
    • ovotech-sg
    • chanex
    • ovotech-qs
    • ovotech-paym
    • ovotech-payments
    • ovotech-live
    • ovotech-payg
    • freddybushboy
    • sarahlikeshiny
    • ovotech-boost
    • agaovo
    • filose
    • props
    • yesdaveovo
    • rob-ovo
    • ellafutkowska
    • ikerin
    • mwidurek
    • andreaborsos
    • tomshawovo
    • ovotech-identity
    • iuna4e
    • lcatallo
    • orex-team
    • ahvargas
    • cwkaluza
    • smart-heat-uat
    • smart-heat-prod
    • potsec
    • rosario-ovo
    • tech.international
    • jvmovo
    • boost-smile
    • nicolasov
    • ovo.cms.devs
    • mkohlmyr
    • sketchingdev
    • mrkiplin
    • ovo-devices
    • sophiepoole
    • joepurnell-ovo
    • vkobyletskyi_ovo
    • richardday-ovo
    • rparkhomchuk
    • daumenta
    • benoitovo
    • v.vasylets
    • enza252
    • lewisunsworthkaluza
    • t.vytrykush
    • vslepkan
    • jubril
    • petro.shevchuk.corgi
    • melcbuckov
    • kir_exp
    • zyurii
    • vlavrynenko-nix
    • timmy.antonio
    • brettburman-code
    • vzahakailo
    • petro.pavlenko
    • goncalogarcia
    • chris.dickson.kaluza
    • muigui
    • k-fernandez
    • alonabarabash
    • manojkakarla
    • nelsma
    • jadamiec-ovo
    • georgi.krastev
    • marknreynolds
    • m_heald
    • gregshielkaluza
    • gordonmartin
    • ovo-data-science-engineering-bot
    • jonnyleakaluza
    • stephen.harris
    • alex-wilson-ovo
    • scdf
    • xenjke
    • rob.straughan
    • molbalazs
    • joewhittles
    • sampennington64
    • marcusgriff
    • amelia.ovo
    • juliabutterly
    • chris.smith
    • sophiesillmanovo
    • marcesquerra
    • pedoublety
    • ovo-engagement
    • marcuskielly
    • david.chellapah.ovo
    • kupxc
    • harrisonbaxter
    • apjm
    • shnist
    • mikemchugh
    • sarahbeharry
    • ursularodgers
    • inlustra
    • andrewjtn
    • tarlingovo
    • troyb95
    • david.ovo
    • ovoenergyapps
    • marina-ovo
    • tom-g-dane
    • homemoves
    • samwest
    • sophiefield
    • simonmclean-ovo
    • jamesbaum
    • robert-g-j
    • paceteamkaluza
    • ovo-oot-bot
    • stuharv-ovo
    • eddiec86
    • csherwin
    • g-tibbs
    • puzzledbytheweb
    • lewright
    • pedro.caldeira
    • aidenscott2016
    • keirlawson
    • dwfullerton
    • gordok
    • darrenthomas-sse
    • seagullmouse
    • markwood23
    • timsteeleovo
    • jacktreble
    • gordon-rennie-ovo
    • adam-mcdevitt
    • jkiely
    • ovo-dc
    • orion-digital-support-experience
    • ovotech-smart-thermostat
    • yahmad
    • kelemensanyi
    • wtaylor-ovo
    • jrdavenport
    • dleyland-ovo
    • rob.desbois
    • sicrossley
    • lewisdick-ovo
    • sjmann
    • stevemossovo
    • eduardolaranjo
    • unibozu
    • cp-ui-tooling
    • lenardprattovo
    • dieman89
    • jensraaby-ovo
    • anthonysmithovo
    • tom.sherman
    • tomlloyd
    • matyas-ovo
    • jamesnoble1
    • phil-pinkowski
    • ovo-aarongibbison
    • nebuladesignsystem
    • ovo-matt-hodges
    • luke-adams-ovo
    • j_kapella
    • mike.walters
    • bgzstephen
    • matthewbursteinovo
    • kslat3r
    • mtardugno-ovo
    • zoelanham
    • jchoskins
    • tom.mottram.kaluza
    • ewan-m
    • mishabruml
    • maciek-kaluza
    • vmary
    • mugishau
    • peterh-ovo
    • dvidg
    • nickfitton-ovo
    • dave.allison
    • oep-accounts-bot
    • cbousie
    • j.okeefe
    • ursula_rodgers
    • jgarciapaj
    • petegrace
    • retrojetpacks
    • benaston13
    • ovo-bit-tech
    • fulvio.ovo
    • blair.calderwood.radically
    • pedromss
    • simonlewissse
    • joolskaluza
    • jifarra-kaluza
    • jameswelshkaluza
    • kimnil
    • carolinelywood
    • mike-gregory-kaluza
    • vasil.dininski
    • sir_hiss
    • csillabarna
    • luca.sale
    • friendigo
    • oroberts221
    • pedro.costa.kaluza
    • annebeth-ovo
    • quartin
    • georgexcollins
    • kapikaluza
    • iovana.pavlovici
    • filosganga
    • chris.brindley
    • engagement-insights
    • hentielouw
    • jaws-bot
    • leaski
    • elliekempster91
    • zoejm
    • rekaelek-ovo
    • nathanmarshovo
    • robturnerovo
    • dsingh07
    • ovo-james
    • jthomasovo