[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:

> Visual regression tests catch unintended CSS side-effects across the
> admin. This ticket expands the existing visual regression testing
> infrastructure.
>
> == Comparison Tooling ==
>
> * `npm run test:visual` — Generate baseline snapshots.
> * `npm run test:visual:compare` — Diff your branch against trunk
> baselines.
> * `--skip-baselines` — Reuse existing baselines.
> * '''Impact summary reporter''' — Shows changed/unchanged pages after
> each run.
>
> == Expanded Coverage (22 → 32 pages) ==
>
> Adds Dashboard, Themes, General/Writing/Permalink Settings, Add New Post,
> Edit Post, Site Health, Updates, and Login.
>
> == Playwright Best Practices ==
>
> * Deterministic captures — `animations: 'disabled'`, `fullPage: true`,
> `document.fonts.ready` wait before every screenshot.
> * Volatile element hiding — `stylePath` CSS hides the footer version
> string, toolbar, and Gutenberg menu item globally.
> * Diff threshold — `maxDiffPixelRatio: 0.01` to catch real regressions
> while tolerating sub-pixel rendering differences.
> * Parallelism — `fullyParallel: true` locally, single-worker on CI for
> stable runs.
> * Auth — dedicated `globalSetup` following the existing e2e pattern.
>
> == Testing Instructions ==
>
> {{{
>   npm run env:start
>   npm run test:visual
>   npm run test:visual:compare
> }}}
>
> The impact summary will list any pages with visual differences. The HTML
> report opens automatically for local runs.
>
> == Motivation ==
>
> Originally motivated by #64308, but useful for any future admin CSS work.
>
> == Pull Request ==
>
> https://github.com/WordPress/wordpress-develop/pull/10914

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
 @weston.ruter Thank you!  This is for
 https://core.trac.wordpress.org/ticket/64671

--

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