screenshot.css

/*
 * Global stylesheet applied during screenshot capture.
 *
 * Hides volatile elements that change between environments or runs,
 * preventing false positives in visual regression comparisons.
 * Applied via Playwright's stylePath config option.
 *
 * See: https://playwright.dev/docs/test-snapshots#stylepath
 */

/*
 * Uses `visibility: hidden` instead of `display: none` to preserve
 * each element's layout space. Collapsing elements with `display: none`
 * would shift surrounding content and cause false positives elsewhere.
 */

/* WordPress version/update nag in the admin footer. */
#footer-upgrade {
	visibility: hidden !important;
}

/* Admin bar user-specific content (Howdy, gravatar). */
#wp-admin-bar-root-default {
	visibility: hidden !important;
}

/* Gutenberg plugin menu item — not present in all environments. */
#toplevel_page_gutenberg {
	visibility: hidden !important;
}

/* Gravatar images — external service, different per environment. */
.avatar {
	visibility: hidden !important;
}

/* Date columns in list tables — relative timestamps shift between runs. */
.column-date {
	visibility: hidden !important;
}

/* Dashboard widgets with dynamic counts and activity. */
#dashboard_right_now .inside,
#dashboard_activity .inside {
	visibility: hidden !important;
}

/* Update-related timestamps. */
.update-last-checked {
	visibility: hidden !important;
}

/*
 * Admin notices — various nags (PHP deprecation, updates, etc.).
 * `.error:not(#error)` excludes the `<div id="error">` database error
 * container from wpdb (wp-includes/class-wpdb.php) as a defensive measure.
 *
 * Uses `display: none` (not `visibility: hidden`) because notices may or
 * may not exist in the DOM between runs. If a notice is present in one run
 * but absent in another, `visibility: hidden` would reserve space only in
 * the first run, shifting all content below and causing a false diff.
 * Collapsing them entirely normalises the layout regardless.
 */
.notice,
.update-nag,
.updated,
.error:not(#error),
#message {
	display: none !important;
}

/*
 * Block editor modals (welcome guide, preference panels).
 * The welcome guide appears on first visit and sets a user preference on
 * dismissal. Between test runs the preference state is non-deterministic,
 * so hide the modal entirely. `display: none` is safe here — modals are
 * overlays and do not participate in the underlying page layout.
 */
.components-modal__screen-overlay,
.components-modal__frame {
	display: none !important;
}

/* General Settings — live date/time preview changes on every run. */
#local-time,
.example {
	visibility: hidden !important;
}

/* Users list table — post counts vary based on test data. */
.column-posts {
	visibility: hidden !important;
}