Automattic / Automattic/wp-codebox

Add lifecycle-aware visual parity capture for runtime state

Open
#2,189 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
16
Forks
4
Avg merge
59m
Merged PRs (30d)
131

Description

## Problem
Visual parity currently compares pages after a fixed elapsed duration. Runtime components can be in semantically different states at that moment: source counters may be mid-transition while an imported editable candidate intentionally materializes a deterministic terminal state. Pixel comparison then reports a product defect even though the candidate preserves the declared stable state.

## Direction
Add a generic lifecycle-aware capture contract. A recipe step should be able to declare the visual state to compare, with explicit ready/stable hooks or normalized initial/terminal state semantics, instead of relying only on elapsed wall-clock duration. Keep WP Codebox generic and framework-agnostic.

## Acceptance
- Visual compare can wait for a declared stable lifecycle state on source and candidate.
- Existing duration-based captures remain supported.
- Timeout/readiness evidence names the requested and observed state.
- Repeated dynamic-component captures are deterministic.
- Unit and recipe-runner tests cover success and timeout behavior.

## Evidence
Automattic/blocks-engine#752 documents the Weebly counter case: source capture at 4 seconds observes transient values while deterministic candidate output uses terminal values.

## AI assistance
OpenAI gpt-5.6-sol through OpenCode analyzed the parity evidence and drafted this issue. Chris Huber remains responsible for scope and implementation decisions.

Contributor guide

No contributing guide indexed for this repository

Research direction

Trace the visual-compare capture path and recipe runner, then inspect the existing unit and recipe-runner tests. Define how a recipe declares a stable lifecycle state while preserving duration-based captures. Done means source and candidate captures can wait for and report requested and observed states, with deterministic repeated captures and success/timeout coverage.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
testing-qa, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.