菜单
Generates Nala E2E tests for a block or page. Creates the standard 4-file structure (block.json, spec, test, page object) matching the pattern produced by `npm run nala-test-gen`. Optionally creates a minimal DA test page for the block.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Builds a new Express block component from Figma designs using the Figma MCP, validates visually with Playwright MCP, then runs accessibility and performance audits. Provide a preview URL (localhost or DA preview/published) and one or more Figma frame URLs for different device sizes. For DA published pages (.aem.live), code is pushed to a feature branch and tested via the branch-prefixed EDS URL.
Extracts content from Figma designs and produces an authored HTML document following the Express EDS block authoring pattern. Downloads Figma assets locally, then uploads images and HTML directly to the DA admin API. Handles text, media, and icons.
| name | nala-test-generation |
| description | Generates Nala E2E tests for a block or page. Creates the standard 4-file structure (block.json, spec, test, page object) matching the pattern produced by `npm run nala-test-gen`. Optionally creates a minimal DA test page for the block. |
Nala is the E2E testing framework used in adobecom/da-express-milo.
Tests live under nala/blocks/<block-name>/ and follow a strict 4-file
structure that matches the output of npm run nala-test-gen.
| Input | Required | Notes |
|---|---|---|
| Block name (kebab-case) | Yes | e.g. ax-marquee, font-generator |
| Test page path | No — ask | Relative path e.g. /drafts/nala/test-gen/font-generator. If not provided, offer to create the page (see Phase 2). |
Ask for the block name if not provided.
Then ask about the test page:
Do you have an existing test page path, or should I create one?
- I have a path — provide the relative path (e.g.
/drafts/nala/test-gen/font-generator)- Create it for me — I'll build a minimal DA page and give you the path
If the user provides a path, skip to Phase 3. If the user wants a page created, continue to Phase 2.
The test page is a minimal EDS document containing just the block under test with a lorem ipsum sentence. It is uploaded to DA under:
adobecom / da-express-milo / drafts/nala/test-gen/<block-name>.html
The nala path (used in block.json) will be:
/drafts/nala/test-gen/<block-name>
The document uses the standard EDS block authoring table format. The first table row names the block; the second row contains a single lorem ipsum sentence as placeholder content.
<!DOCTYPE html>
<html>
<head><title><block-name></title></head>
<body>
<header></header>
<main>
<div>
<table>
<tbody>
<tr><td><block-name></td></tr>
<tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>
</tbody>
</table>
</div>
</main>
<footer></footer>
</body>
</html>
Save to /tmp/da-upload/drafts/nala/test-gen/<block-name>.html.
da-auth-helper token >/dev/null 2>&1 && echo "Token OK" || echo "No token"
If no token, instruct the user to:
npm install -g github:adobe-rnd/da-auth-helperda-auth-helper login (opens browser — choose the Skyline profile)da-auth-helper tokenTOKEN=$(da-auth-helper token 2>/dev/null)
curl -s -w "\n%{http_code}" -X POST \
"https://admin.da.live/source/adobecom/da-express-milo/drafts/nala/test-gen/<block-name>.html" \
-H "Authorization: Bearer $TOKEN" \
-H "Content-Type: text/html" \
--data-binary @/tmp/da-upload/drafts/nala/test-gen/<block-name>.html
Expect 200 or 201.
curl -s -w "\n%{http_code}" -X POST \
"https://admin.hlx.page/preview/adobecom/da-express-milo/main/drafts/nala/test-gen/<block-name>" \
-H "Authorization: Bearer $TOKEN"
Report the preview URL:
Preview: https://main--da-express-milo--adobecom.aem.page/drafts/nala/test-gen/<block-name>
The nala path for block.json is: /drafts/nala/test-gen/<block-name>
Files go in nala/blocks/<block-name>/. All files use CommonJS (.cjs).
<block-name>.block.jsonThis is the data source. The spec file reads from it; do not duplicate data.
{
"block": "<block-name>",
"variants": [
{
"tcid": "0",
"name": "@<block-name>-default",
"selector": "div.<block-name>",
"path": "<test-page-path>",
"data": {
"semantic": {
"texts": [],
"media": [],
"interactives": []
}
},
"tags": [
"@<block-name>",
"@default",
"@express"
]
}
]
}
texts, media, and interactives start empty — they are populated as
the block gains real content. The test loops over them automatically.
<block-name>.spec.cjsconst schema = require('./<block-name>.block.json');
module.exports = { features: schema.variants };
<block-name>.page.cjsMinimal page object. Locators are added here as the block is implemented.
class <ClassName>Block {
constructor(page, selector = '.<block-name>', nth = 0) {
this.page = page;
this.block = page.locator(selector).nth(nth);
}
}
module.exports = <ClassName>Block;
<ClassName> is the PascalCase version of the block name
(e.g. font-generator → FontGenerator).
<block-name>.test.cjsOne test per variant in the block.json. Each test follows the standard
4-step template: navigate → verify block content (driven by data.semantic)
→ accessibility → SEO.
const { test, expect } = require('@playwright/test');
const { features } = require('./<block-name>.spec.cjs');
const <ClassName>Block = require('./<block-name>.page.cjs');
const { runAccessibilityTest } = require('../../libs/accessibility.cjs');
const { runSeoChecks } = require('../../libs/seo-check.cjs');
const miloLibs = process.env.MILO_LIBS || '';
test.describe('<ClassName>Block Test Suite', () => {
// Test Id : 0 : @<block-name>-default
test(`[Test Id - ${features[0].tcid}] ${features[0].name} ${features[0].tags}`, async ({ page, baseURL }) => {
const { data } = features[0];
const testUrl = `${baseURL}${features[0].path}${miloLibs}`;
const block = new <ClassName>Block(page, features[0].selector);
console.info(`[Test Page]: ${testUrl}`);
await test.step('step-1: Navigate to page', async () => {
await page.goto(testUrl);
await page.waitForLoadState('domcontentloaded');
await expect(page).toHaveURL(testUrl);
});
await test.step('step-2: Verify block content', async () => {
await expect(block.block).toBeVisible();
const sem = data.semantic;
for (const t of sem.texts) {
const locator = block.block.locator(t.selector).nth(t.nth || 0);
await expect(locator).toContainText(t.text);
}
for (const m of sem.media) {
const locator = block.block.locator(m.selector).nth(m.nth || 0);
const isHiddenSelector = m.selector.includes('.isHidden');
const isPicture = m.tag === 'picture';
const target = isPicture ? locator.locator('img') : locator;
if (isHiddenSelector) {
await expect(target).toBeHidden();
} else {
await expect(target).toBeVisible();
}
}
for (const iEl of sem.interactives) {
const locator = block.block.locator(iEl.selector).nth(iEl.nth || 0);
await expect(locator).toBeVisible({ timeout: 8000 });
if (iEl.type === 'link' && iEl.href) {
const href = await locator.getAttribute('href');
if (/^(tel:|mailto:|sms:|ftp:|[+]?[\d])/i.test(iEl.href)) {
await expect(href).toBe(iEl.href);
} else {
const expectedPath = new URL(iEl.href, 'https://dummy.base').pathname;
const actualPath = new URL(href, 'https://dummy.base').pathname;
await expect(actualPath).toBe(expectedPath);
}
}
if (iEl.text) await expect(locator).toContainText(iEl.text);
}
});
await test.step('step-3: Accessibility validation', async () => {
await runAccessibilityTest({ page, testScope: block.block, skipA11yTest: false });
});
await test.step('step-4: SEO validation', async () => {
await runSeoChecks({ page, feature: features[0], skipSeoTest: false });
});
});
});
For blocks with multiple variants, generate one test(...) block per entry
in schema.variants, following the same 4-step template each time.
Always run against the local dev server — the block code is not on main/stage.
If port 3000 is not listening, start it first: aem up --port 3000 &
npm run nala local @<block-name>
Report:
nala/blocks/<block-name>/.data.semantic.texts, media, and interactives in
block.json are empty scaffolds — populate them as the block is built.