Automattic / Automattic/wp-codebox

Make visual-compare diagnostics region-aware and semantic

Aperta
#1,884 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
TypeScript
Stelle
16
Fork
4
Merge medio
59m
PR unite (30g)
131

Descrizione

## Problem

`wordpress.visual-compare` captures the first 160 visible DOM elements, matches source and candidate by exact generated path, omits pseudo-elements, and ranks rectangle overlap rather than mismatched pixels. Gutenberg wrapper changes therefore turn corresponding elements into added/removed rows and late-page mismatch regions lose actionable element attribution.

Observed in Static Site Importer fixture `15-saas`: only 2 flow elements matched while 158 were reported added and 158 removed; both 160-element snapshots were truncated. The pixel diff clearly showed navigation, button, text, and pseudo-element paint drift that the explanation did not rank explicitly.

## Required outcome

- Match elements semantically when wrappers and `:nth-of-type()` paths differ, with deterministic confidence and ambiguity handling.
- Capture visible `::before` and `::after` paint/style evidence under their host element.
- Augment bounded snapshots with elements intersecting top mismatch regions, including late-page elements.
- Rank attributed elements by mismatched-pixel impact rather than rectangle overlap alone.
- Preserve explicit selector capture and bounded output with exact selection/truncation metadata.

## Acceptance

- Wrapper insertion does not collapse semantic matching.
- A pseudo-element paint mismatch is named in the explanation.
- An element after the initial document-order budget is captured when it intersects a top mismatch region.
- A large unchanged wrapper ranks below a smaller element covering actual mismatch pixels.
- Deterministic tests cover all behaviors.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Direzione di ricerca

Inizia dal punto di ingresso wordpress.visual-compare e ispeziona la logica di snapshot, matching, regioni di mismatch e spiegazione, quindi esamina i test esistenti. Definisci una copertura deterministica per il matching dei wrapper semantici, gli pseudo-elementi, l’acquisizione delle regioni nella parte finale della pagina, la classificazione in base all’impatto sui pixel e i metadati di selector/truncation. L’attività è completata quando tutti i comportamenti di accettazione elencati passano senza perdere l’output limitato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
typescript
Ambito
frontend, testing
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.