From 5adb602247993760a1fe2ffab324f9f15458bb18 Mon Sep 17 00:00:00 2001 From: Chris Huber Date: Mon, 6 Jul 2026 19:02:50 -0400 Subject: [PATCH] Document HTML DOM box evidence capture --- figma-transformer/README.md | 2 + php-transformer/tools/visual-parity/README.md | 43 +++++++++++++++++++ 2 files changed, 45 insertions(+) diff --git a/figma-transformer/README.md b/figma-transformer/README.md index c9ee4230..e677eae6 100644 --- a/figma-transformer/README.md +++ b/figma-transformer/README.md @@ -270,6 +270,8 @@ Homeboy/external runner workflow: 4. Re-run or wrap the transform with the parity metadata above so `parity-report.json` contains stable artifact references and numeric comparison results. 5. Link the PR or issue to the external artifact record rather than local paths or localhost URLs. +For repeatable generated HTML DOM-box evidence, use `php-transformer/tools/visual-parity/bin/dom-box-provider.mjs` with Homeboy's `artifact-origin dom-boxes` flow. The visual parity README includes the install commands and placeholder examples for Fisiostetic, FSE, and TT5 artifact roots. + ## Fixture Strategy Contract tests use small synthetic fixtures that exercise the public envelope, archive safety, deterministic HTML/CSS output, and parity report shape. Large real `.fig` exports are not committed to the repository. When real-file parity evidence is needed, generate it externally through Homeboy or another reviewable artifact surface and attach the resulting reports/screenshots to the relevant issue or PR. diff --git a/php-transformer/tools/visual-parity/README.md b/php-transformer/tools/visual-parity/README.md index 09673f46..1b37d66c 100644 --- a/php-transformer/tools/visual-parity/README.md +++ b/php-transformer/tools/visual-parity/README.md @@ -50,6 +50,49 @@ node bin/visual-parity.mjs --config visual-parity.config.json `bin/dom-box-provider.mjs` captures per-node DOM boxes for Homeboy's `artifact-origin dom-boxes` flow. Node identity is keyed off a configurable attribute, so the provider is product-neutral and not tied to any single source format. +Install the tool dependencies and Chromium browser once per checkout: + +```sh +npm ci --prefix php-transformer/tools/visual-parity +npm --prefix php-transformer/tools/visual-parity run install:browsers +``` + +Capture DOM-box evidence for a generated static HTML artifact root: + +```sh +HOMEBOY_DOM_BOX_CAPTURE_COMMAND='node php-transformer/tools/visual-parity/bin/dom-box-provider.mjs' \ +homeboy tunnel artifact-origin dom-boxes \ + --root= \ + --entrypoint=index.html \ + --report= +``` + +Use the generated `.fig -> HTML` artifact directory as ``. The directory must contain `index.html` and any referenced CSS/assets. Keep committed docs and PR descriptions on placeholders such as ``, ``, and ``; put machine-local paths only in local operator notes. + +Example artifact captures: + +```sh +HOMEBOY_DOM_BOX_CAPTURE_COMMAND='node php-transformer/tools/visual-parity/bin/dom-box-provider.mjs' \ +homeboy tunnel artifact-origin dom-boxes \ + --root= \ + --entrypoint=index.html \ + --report= + +HOMEBOY_DOM_BOX_CAPTURE_COMMAND='node php-transformer/tools/visual-parity/bin/dom-box-provider.mjs' \ +homeboy tunnel artifact-origin dom-boxes \ + --root= \ + --entrypoint=index.html \ + --report= + +HOMEBOY_DOM_BOX_CAPTURE_COMMAND='node php-transformer/tools/visual-parity/bin/dom-box-provider.mjs' \ +homeboy tunnel artifact-origin dom-boxes \ + --root= \ + --entrypoint=index.html \ + --report= +``` + +The report is repeatable when the artifact root, entrypoint, browser version, viewport defaults, and node identity attributes stay fixed. Attach the JSON report to the Homeboy run, issue, or PR evidence surface so the next operator can compare generated HTML structure and positions without re-running the full transform. + ```sh HOMEBOY_DOM_BOX_BASE_URL=https://example.test \ HOMEBOY_DOM_BOX_PAGE_PATHS_JSON='["/index.html"]' \