Opened 4 years ago
Last modified 12 months ago
#49606 closed enhancement
Add visual regression testing to core — at Version 1
Reported by: | isabel_brison | Owned by: | |
---|---|---|---|
Milestone: | 5.9 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Build/Test Tools | Keywords: | has-patch commit |
Focuses: | ui, css | Cc: |
Description (last modified by )
This idea came up during discussion about the upcoming CSS audit #49582. If we have a suite of visual regression tests in place, it will give us confidence to make changes to existing CSS without breaking anything.
What tools to use?
We're in the process of adding e2e tests to core: #49507 and these are using Puppeteer and Jest, so it would be nice for visual regression testing to follow along the same lines. There are a few options to look into:
- BackstopJS is an out-of-the-box solution that doesn't require a huge amount of setup: https://github.com/garris/BackstopJS
- If we want to build something custom, ResembleJS is the visual analysis tool used by Backstop: https://github.com/rsmbl/Resemble.js
- There's an image snapshot plugin for Jest that might allow us to integrate visual tests with our e2e suite: https://github.com/americanexpress/jest-image-snapshot
Note: See
TracTickets for help on using
tickets.