Add lifecycle-aware visual parity capture for runtime state

Open
#2,189 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

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

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.

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.

Dominant language
TypeScript
Stars
17
Forks
4
Avg merge
53m
Merged PRs (30d)
114

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Automattic/wp-codebox

All issues in Automattic/wp-codebox

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.