test: set up Cypress visual diff smoke tests#2707
Conversation
|
|
||
| xhr.open('HEAD', url) | ||
| xhr.send() | ||
| }) |
There was a problem hiding this comment.
This helper function wasn't working as expected with the Cypress global afterEach hook so I replaced it with Cypress' native request method.
contolini
force-pushed
the
5269-visual-smoke
branch
from
fac4cbf to
bafb782
Compare
billhimmelsbach
left a comment
billhimmelsbach
left a comment
There was a problem hiding this comment.
Looking good! 🎉 One comment about how the screenshots are taken, but otherwise super excited to use this in some bug squashing!
| // Every page (I think?) has a #mainWrapper div that contains the content | ||
| const hasMainWrapper = body.find('#mainWrapper').length > 0 | ||
| const screenshotWrapper = hasMainWrapper ? '#mainWrapper' : 'body' | ||
| const screenshotElement = body.find(screenshotWrapper).first() |
There was a problem hiding this comment.
Heyo! This method gets some great, clean screenshots of the main wrapper, but does misses out screenshots in the initial navigation.spec.js of the FAQ + FIG over on the documentation side that I think only has a hashed class called mainWrapper_z2l0 currently. It's not useful for local testing where the documentation side isn't always loaded up, but it would be nice when testing against staging, etc.
We could either make exceptions for these / use a wildcard query selector like '[class*="mainWrapper"], [id*="mainWrapper"]), or we could stick with just capturing the full page first, then maybe removing the parts we don't want like the footer and header before the screenshot instead?
Just a thought about including only the parts we want (cleaner) versus excluding the parts we don't want (maybe more flexible). Let me know what ya think.
2 participants
Adds a global
afterEachhook that runs after every test and takes a screenshot of the app's current state. Baseline screenshots are generated withyarn test-visual:baselineand comparisons against the baseline are made withyarn test-visual.Changes
cypress-visual-regressionlibraryafterEachhookTesting
yarn test-visual:baselineto generate baseline screenshots.yarn test-visualto take new screenshots and compare against the baselines. It should fail if you changed something and pass if you didn't.Notes
actualsubdirectory and check thebasesubdirectory into git. Because this is a new thing and all our environments are a little different, I decided to ignore everything for now.