[wp-trac] [WordPress Trac] #49606: Add visual regression testing to core

[WordPress Trac]

#49606: Add visual regression testing to core
------------------------------+------------------------------
 Reporter:  isabel_brison     |       Owner:  (none)
     Type:  enhancement       |      Status:  new
 Priority:  normal            |   Milestone:  Awaiting Review
Component:  Build/Test Tools  |     Version:
 Severity:  normal            |  Resolution:
 Keywords:                    |     Focuses:  ui, css
------------------------------+------------------------------
Description changed by SergeyBiryukov:

Old description:

> 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]

New description:

 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]

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/49606#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform