Skip to content

Tests: Add visual regression tests for admin reskin pages#10914

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

Tests: Add visual regression tests for admin reskin pages#10914
josephfusco wants to merge 9 commits intoWordPress:trunkfrom
josephfusco:add/visual-regression-tests-admin-reskin

Conversation

@josephfusco
Copy link

@josephfusco josephfusco commented Feb 12, 2026

Summary

  • Adds 10 new visual regression snapshot tests covering admin pages most impacted by the CSS reskin in Feature: Admin Reskin 7.0 #10910 that previously had no automated visual coverage
  • Combined with the 22 existing tests, this brings total coverage to 32 admin pages
  • Adds a single-command workflow (npm run test:visual) that automates baseline generation from trunk and comparison against the current branch
  • The admin reskin is a CSS-only change touching 27 files — visual regression tests directly test what changed

New tests

Test Page Notes
Dashboard /index.php First page every admin sees
Themes /themes.php Masks theme screenshot images
General Settings /options-general.php Primary settings form
Writing Settings /options-writing.php Form fields, checkboxes, dropdowns
Permalink Settings /options-permalink.php Radio buttons, text inputs
Add New Post /post-new.php Masks editor content area
Edit Post /post.php?post=<id>&action=edit Creates post via REST API, masks editor
Site Health /site-health.php Masks health check accordion
Updates /update-core.php Masks upgrade form, last-checked timestamp
Login /wp-login.php Unauthenticated, separate test describe block

How to use

From a feature branch with a clean working tree, start the environment and run:

npm run env:start
npm run test:visual

This will automatically:

  1. Check out trunk to generate baseline snapshots
  2. Return to your feature branch
  3. Compare against those baselines

If any tests fail, diff images can be found in artifacts/.

To compare against a branch other than trunk:

npm run test:visual -- some-other-branch

Snapshots are gitignored — no storage overhead in the repo.

Trac ticket

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

Add 7 new visual regression snapshot tests covering admin pages most
impacted by the CSS reskin that previously had no automated visual
coverage:

- Dashboard (/index.php)
- Themes (/themes.php)
- General Settings (/options-general.php)
- Writing Settings (/options-writing.php)
- Permalink Settings (/options-permalink.php)
- Add New Post (/post-new.php)
- Edit Post (/post.php?post=<id>&action=edit)

Theme screenshots and editor content areas are masked to avoid
false positives from dynamic content.

See #64308.
@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 and others added 8 commits February 12, 2026 16:14
Add compare-branches.sh that automates the baseline generation and
comparison workflow into a single npm run test:visual command. The
script checks out trunk (or a specified base branch), generates
baseline snapshots, switches back to the feature branch, and runs
the comparison.
Configure list and HTML reporters for the visual regression Playwright
config. The HTML report opens automatically on failure and outputs to
the artifacts directory.
Add impact summary reporter, fast re-run mode, and auto-open HTML report
to streamline CSS iteration during the admin reskin effort.
Add impact summary reporter, fast re-run mode, and auto-open HTML report
to streamline CSS iteration during the admin reskin effort.
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