[wp-trac] [WordPress Trac] #64671: Expand visual regression testing tooling and admin page coverage

[WordPress Trac]

#64671: Expand visual regression testing tooling and admin page coverage
--------------------------------------+------------------------------
 Reporter:  JoeFusco                  |       Owner:  (none)
     Type:  enhancement               |      Status:  new
 Priority:  normal                    |   Milestone:  Awaiting Review
Component:  Build/Test Tools          |     Version:
 Severity:  normal                    |  Resolution:
 Keywords:  has-patch has-unit-tests  |     Focuses:  ui, tests
--------------------------------------+------------------------------
Description changed by westonruter:

Old description:

> Expands admin visual regression coverage from 22 to 37 screenshots ahead
> of the 7.0 admin reskin (#64308).
>
>  === Changes (3 files) ===
>
>  '''`config/screenshot.css` (new)''' — Global stylesheet injected at
> capture time via Playwright's `stylePath`. Hides volatile elements (admin
> bar, footer version, gravatars, dates, dashboard widgets, notices, block
> editor modals) to prevent false diffs. Static elements use `visibility:
> hidden` to preserve layout; notices and modals use `display: none` since
> they may not exist in the DOM between runs.
>
>  '''`playwright.config.js`''' — Adds HTML reporter, full-page capture, 1%
> pixel-diff tolerance, CSS animation disabling, and single-worker
> serialisation in CI.
>
>  '''`visual-snapshots.test.js`''' — Data-driven test loop over a `pages`
> array. Each entry declares a `section` (matching the admin menu) so
> nested `test.describe` blocks produce collapsible groups in the HTML
> report. Pages requiring test content (Edit Post, Edit Page) use
> `setup`/`teardown` hooks via the REST API. A `waitForPageReady` helper
> settles network, fonts, jQuery animations, and focus state before
> capture.
>
>  === Testing ===
>
>  {{{
>  npm run test:visual -- --update-snapshots   # generate baselines
>  npm run test:visual                         # compare against baselines
>  }}}
>
>  Diff images land in `artifacts/`; an HTML report opens automatically on
> local runs.
>
>  === Pull Request ===
>
>  https://github.com/WordPress/wordpress-develop/pull/10914
> @weston.ruter Thank you!  This is for
> https://core.trac.wordpress.org/ticket/64671

New description:

 Expands admin visual regression coverage from 22 to 37 screenshots ahead
 of the 7.0 admin reskin (#64308).

 === Changes (3 files) ===

 '''`config/screenshot.css` (new)''' — Global stylesheet injected at
 capture time via Playwright's `stylePath`. Hides volatile elements (admin
 bar, footer version, gravatars, dates, dashboard widgets, notices, block
 editor modals) to prevent false diffs. Static elements use `visibility:
 hidden` to preserve layout; notices and modals use `display: none` since
 they may not exist in the DOM between runs.

 '''`playwright.config.js`''' — Adds HTML reporter, full-page capture, 1%
 pixel-diff tolerance, CSS animation disabling, and single-worker
 serialisation in CI.

 '''`visual-snapshots.test.js`''' — Data-driven test loop over a `pages`
 array. Each entry declares a `section` (matching the admin menu) so nested
 `test.describe` blocks produce collapsible groups in the HTML report.
 Pages requiring test content (Edit Post, Edit Page) use `setup`/`teardown`
 hooks via the REST API. A `waitForPageReady` helper settles network,
 fonts, jQuery animations, and focus state before capture.

 === Testing ===

 {{{
 npm run test:visual -- --update-snapshots   # generate baselines
 npm run test:visual                         # compare against baselines
 }}}

 Diff images land in `artifacts/`; an HTML report opens automatically on
 local runs.

 === Pull Request ===

 https://github.com/WordPress/wordpress-develop/pull/10914

--

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