Skip to content

Ignore artifact chrome in DOM box capture #585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chubes4 merged 1 commit into from
Jul 7, 2026
Merged

Ignore artifact chrome in DOM box capture #585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions figma-transformer/fixtures/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@
This directory is for local `.fig` files used while developing the Figma transformer.

The fixture files themselves are gitignored because they can be large and may contain private or unreleased designs. Keep small synthetic fixtures in tests instead.

Real-design readiness evidence must materialize fixtures explicitly on the Lab worker, or point the fixture matrix at an out-of-tree absolute path supplied by the operator. Do not replace a missing remote fixture with a checked-in or ad-hoc local surrogate; run the matrix with `--fixture=/absolute/path/to/file.fig` or `--fixture-dir=/absolute/path/to/fixtures` once the Lab fixture assets are available.
1 change: 1 addition & 0 deletions figma-transformer/src/Html/HtmlArtifactAssembler.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ public function htmlDocument(string $title, string $stylesheetHref, string $body
$mainAttributes = array(
'class="figma-root"',
'data-figma-root="true"',
'data-static-artifact-capture="ignore"',
'data-page-title="' . $this->sanitizeAttribute(html_entity_decode($title, ENT_QUOTES | ENT_HTML5, 'UTF-8')) . '"',
'aria-label="' . $this->sanitizeAttribute(html_entity_decode($title, ENT_QUOTES | ENT_HTML5, 'UTF-8')) . '"',
);
Expand Down
3 changes: 2 additions & 1 deletion figma-transformer/tests/contract/HtmlValidityContract.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,8 @@ function blocks_engine_figma_transformer_run_html_validity_contract(callable $as

$html = $fileContent($result, 'index.html');
$links = $result['source_report']['transform_diagnostics']['links'] ?? array();
$assert(str_contains($html, '<main class="figma-root" data-figma-root="true" data-page-title="Home Page" aria-label="Home Page" data-page-path="index.html"'), 'html-validity-document-root-carries-page-legibility-metadata');
$assert(str_contains($html, '<main class="figma-root" data-figma-root="true" data-static-artifact-capture="ignore" data-page-title="Home Page" aria-label="Home Page" data-page-path="index.html"'), 'html-validity-document-root-carries-page-legibility-metadata');
$assert(str_contains($html, 'data-static-artifact-capture="ignore"'), 'html-validity-document-root-ignored-by-dom-box-capture');
$assert(str_contains($html, 'data-figma-node-id="validity:nav" data-figma-node-name="Navigation" data-figma-semantic-role="nav"'), 'html-validity-nav-carries-semantic-role-metadata');
$assert(str_contains($html, 'data-figma-node-id="validity:services" data-figma-node-name="Services Section" data-figma-semantic-role="services"'), 'html-validity-services-section-carries-semantic-role-metadata');
$assert(str_contains($html, 'data-figma-node-id="validity:pricing" data-figma-node-name="Pricing" data-figma-semantic-role="pricing"'), 'html-validity-pricing-section-carries-semantic-role-metadata');
Expand Down
5 changes: 4 additions & 1 deletion php-transformer/tools/visual-parity/bin/dom-box-provider.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
const DEFAULT_VIEWPORT = { width: 1440, height: 900, device_scale_factor: 1 };
const DEFAULT_NODE_ID_ATTR = 'data-figma-node-id';
const DEFAULT_NODE_NAME_ATTRS = ['data-figma-node-name', 'data-figma-name'];
const STATIC_ARTIFACT_CAPTURE_IGNORE_ATTR = 'data-static-artifact-capture';
const ATTRIBUTE_NAME_PATTERN = /^[A-Za-z_:][-A-Za-z0-9_:.]*$/;
const PLAYWRIGHT_SETUP_HELP = 'Install DOM capture dependencies with: npm ci --prefix php-transformer/tools/visual-parity && npm --prefix php-transformer/tools/visual-parity run install:browsers';
const COMPUTED_STYLE_PROPERTIES = [
Expand Down Expand Up @@ -231,7 +232,7 @@ function printHelp() {
}

async function extractElements(page, pagePath, textSampleLimit, nodeIdAttr, nodeNameAttrs) {
return page.evaluate(({ pagePath: currentPagePath, limit, computedStyleProperties, nodeIdAttr: idAttr, nodeNameAttrs: nameAttrs }) => {
return page.evaluate(({ pagePath: currentPagePath, limit, computedStyleProperties, nodeIdAttr: idAttr, nodeNameAttrs: nameAttrs, staticArtifactCaptureIgnoreAttr }) => {
function normalizeText(value) {
return String(value ?? '').replace(/\s+/g, ' ').trim().slice(0, limit);
}
Expand Down Expand Up @@ -398,6 +399,7 @@ async function extractElements(page, pagePath, textSampleLimit, nodeIdAttr, node
const elements = Array.from(document.querySelectorAll(`[${idAttr}]`)).map(serializeElement);
const unidentifiedElements = Array.from(document.body?.querySelectorAll('*') ?? [])
.filter((element) => !element.hasAttribute(idAttr))
.filter((element) => element.getAttribute(staticArtifactCaptureIgnoreAttr) !== 'ignore')
.filter((element) => {
const rect = element.getBoundingClientRect();
const style = window.getComputedStyle(element);
Expand All @@ -420,5 +422,6 @@ async function extractElements(page, pagePath, textSampleLimit, nodeIdAttr, node
computedStyleProperties: COMPUTED_STYLE_PROPERTIES,
nodeIdAttr,
nodeNameAttrs,
staticArtifactCaptureIgnoreAttr: STATIC_ARTIFACT_CAPTURE_IGNORE_ATTR,
});
}
Loading