aem-eds-kit / End-to-end test

A full screen, design to EDS blocks

We ran the whole example page (the HTML twin of the Figma example file, 11 blocks) through eds block from-design with a real AI agent, rendered every block in the preview harness and screenshotted it next to the design. Then we ran every option and error path of the CLI, and migrated 163 real AEM components. Nothing below was retouched.

How it was run

Two design sources, the same 11 blocks each. The agent was Claude Code on its default fast model (Haiku), one run per block, no hand edits.

$ eds block from-design <page-url> \
    --provider stitch --name hero

$ eds block from-design ./hero.png \
    --name hero

1. Generateeds block from-design for each of the 11 blocks; the agent writes JS, CSS, the Universal Editor model and a preview mock.
2. Rendereds block test --update --widths 390,768,1440 screenshots every block in the preview harness.
3. Checkeds block check runs the content and accessibility checks on every content block.
4. CompareEach block is screenshotted in the harness and pixel-diffed (pixelmatch) against the same section of the design.

Whole screen

Generated blocks are stacked in page order. Section backgrounds come from the page, not the blocks, so the harness renders them on white. Scroll inside each column.

Desktop, 1440 px

Mobile, 390 px

Block by block, 1440 px

header diff at 1440 px: scrape 7.8% · Figma PNG 1.8%

Matches on desktop. On mobile the design collapses the nav to the logo and “Get started”; both generated headers keep every link.

hero diff at 1440 px: scrape 5.1% · Figma PNG 5.1%

Layout, type scale and spacing land on both paths. On the PNG path the headline reads “h1”: the mock nests one div deeper than decorate() expects, so the heading-level value is taken for the title.

stats diff at 1440 px: scrape 1.5% · Figma PNG 2.8%

Desktop matches. At 390 px the design is a 2×2 grid; both generated blocks stack to one column.

cards diff at 1440 px: scrape 19.9% · Figma PNG 37.7%

Scrape keeps the section header. The PNG export drops it (eyebrow, title, intro).

columns diff at 1440 px: scrape 27.1% · Figma PNG 3.3%

Scrape misses the list bullets; the PNG path keeps them. Most of the scrape diff is the placeholder image.

teaser diff at 1440 px: scrape 4.3% · Figma PNG 1.5%

Close on both paths.

tabs diff at 1440 px: scrape 1.8% · Figma PNG 5.2%

Scrape is near-identical. The PNG export drops the section header and the code panel.

accordion diff at 1440 px: scrape 1.4% · Figma PNG 1.9%

Close on both paths, including the open first item.

quote diff at 1440 px: scrape 1.3% · Figma PNG 1.2%

Close on both paths.

cta-banner diff at 1440 px: scrape 2.6% · Figma PNG 2.7%

Close on desktop; the higher mobile diff comes from placeholder copy wrapping differently.

footer diff at 1440 px: scrape 1.6% · Figma PNG 2.5%

Scrape is close. On the PNG path the mock has one more div level than decorate() reads, so each column’s links run together.

Every case

65 cases, each in a fresh project, each checking the exit code and what the CLI prints (and files it writes, where that matters). The scrape cases run real headless Chromium against the example page.

Design source 14 / 14

Every way a design gets in: host detection, the real Chromium scrape, cache and --refresh, local PNG / SVG exports, and the Figma URL paths (MCP, REST with fallback, cached snapshot, whole file, legacy links).

Options 13 / 13

Content sources, UE model, screenshot call, block-name inference, and saved-session scraping (--auth).

Agent hand-off 14 / 14

What happens after the agent runs. These use a stand-in claude that writes known files, so each outcome is forced: a good block, nothing, a broken export, a missing model, a crash.

Bad input 8 / 8

Wrong flags, wrong URLs, unreachable and gated pages, and running outside a project.

Test, check, preview 16 / 16

eds block test baselines, diffs, thresholds and updates; eds block check errors, warnings and --strict; the preview servers.

Other sources with the real agent

Migrating AEM components: AEMaaCS and AEM 6.5

eds migrate component was run on every component with a dialog in four public projects, plus every proxy component. Each migrated block was then loaded in the preview and run through eds block check.

Before the fixes, proxy components (the usual AEMaaCS setup: no dialog of their own, only sling:resourceSuperType) all failed, the Core Components page picker was dropped from 17 dialogs, and 57 choice fields came out with no options, which Universal Editor rejects. Now all 930 fields are valid, and all 151 blocks render without a script error and pass eds block check. The 12 that don't migrate have no authorable fields (panelcontainer) or point at product components that exist only in /libs (Commerce, Social, Experience Fragment pages).

$ eds migrate component ui.apps/…/apps/wknd/components/teaser \
    --super-root aem-core-wcm-components/content/src/content/jcr_root
  ↳ Dialog inherited from core/wcm/components/teaser/v2/teaser
  ▊ Mapped fields  14 from dialog

Second round: fixing the open issues

The gaps left open above were each fixed through their own branch and pull request, then tested the same way.

Bugs found, tracked as issues

Every bug and gap found here is a GitHub issue. Each fix lands through its own bug/EDS-NNN or feature/EDS-NNN branch and pull request, and merging it closes the issue.

The example page →   The Figma example file →   Docs →