Skip to content

Comments

Build/Test Tools: Expand visual regression test coverage for admin pages.#10914

Open
josephfusco wants to merge 3 commits intoWordPress:trunkfrom
josephfusco:add/visual-regression-tests-admin-reskin
Open

Build/Test Tools: Expand visual regression test coverage for admin pages.#10914
josephfusco wants to merge 3 commits intoWordPress:trunkfrom
josephfusco:add/visual-regression-tests-admin-reskin

Conversation

@josephfusco
Copy link

@josephfusco josephfusco commented Feb 12, 2026

Summary

Expands the existing visual regression test suite to cover 32 admin screens ahead of the WordPress 7.0 admin reskin. The tests capture full-page screenshots against baseline snapshots from trunk, making it easy to spot unintended visual changes as reskin CSS lands.

What changed:

  • Coverage grew from a handful of pages to 32
  • Dynamic content that causes false positives (dates, gravatars, admin notices, version strings) is now hidden via a shared screenshot.css stylesheet, with per-page Playwright mask options for anything page-specific (e.g. auto-generated passwords on Add User, health check results on Site Health)
  • npm run test:visual now runs Playwright directly instead of through a wrapper script
Pages covered

Content: All Posts, Add New Post, Edit Post, All Pages, Categories, Tags, Comments, Media Library, Add Media

Appearance: Dashboard, Themes, Widgets, Menus, Plugins

Users: All Users, Add User, Your Profile

Settings: General, Writing, Reading, Discussion, Media, Permalink, Privacy

Tools: Available Tools, Import, Export, Export Personal Data, Erase Personal Data, Site Health, Updates

Other: Login (unauthenticated)

Testing

Prerequisites: Docker running, npm ci, and npx playwright install chromium.

1. Generate baselines from trunk:

git checkout trunk
npm run build
npm run env:start
npm run env:install
npm run test:visual -- --update-snapshots

2. Compare a feature branch against those baselines:

git checkout my-feature-branch
npm run build
# Full restart required — WordPress caches the build version during
# install, so without a restart it may skip setup and leave stale state.
npm run env:stop
npm run env:start
npm run env:install
npm run test:visual

Failures produce diff images in artifacts/ and an HTML report opens automatically.

Trac ticket

https://core.trac.wordpress.org/ticket/64671

@github-actions
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props joefusco.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@josephfusco josephfusco marked this pull request as draft February 12, 2026 20:07
@github-actions
Copy link

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
    it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

@josephfusco josephfusco force-pushed the add/visual-regression-tests-admin-reskin branch from 83cbdcd to 014f376 Compare February 18, 2026 18:23
@josephfusco josephfusco changed the title Tests: Add visual regression tests for admin reskin pages Tests: Expand visual regression coverage and add comparison tooling Feb 18, 2026
@josephfusco josephfusco marked this pull request as ready for review February 18, 2026 20:31
@josephfusco josephfusco force-pushed the add/visual-regression-tests-admin-reskin branch 14 times, most recently from b741ba1 to fff0a92 Compare February 20, 2026 19:51
@josephfusco josephfusco changed the title Tests: Expand visual regression coverage and add comparison tooling Tests: Add visual regression testing for WordPress admin pages. Feb 20, 2026
@josephfusco josephfusco changed the title Tests: Add visual regression testing for WordPress admin pages. Build/Test Tools: Expand visual regression test coverage for admin pages. Feb 20, 2026
@josephfusco josephfusco force-pushed the add/visual-regression-tests-admin-reskin branch 5 times, most recently from dceb479 to 1e6b718 Compare February 20, 2026 21:12
@josephfusco josephfusco force-pushed the add/visual-regression-tests-admin-reskin branch from 1e6b718 to 11398ed Compare February 20, 2026 21:13
Simplifies `npm run test:visual` to run Playwright directly instead of
routing through a shell script that managed git checkouts and environment
setup. The CI workflow already handles automated trunk-vs-branch comparison.
Visual regression tests are intended for local use only, consistent with
how they have historically operated in WordPress core.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant