Agent Skills
› NeverSight/learn-skills.dev
› appbuilder-e2e-testing
appbuilder-e2e-testing
GitHub为Adobe App Builder应用生成基于Playwright的浏览器端E2E测试，涵盖ExC Shell SPA、AEM扩展及CI流程。通过识别项目结构自动生成配置、测试脚本和工作流，支持本地调试与集成测试。
Trigger Scenarios
用户需要编写浏览器端到端测试
提到Playwright或E2E测试
请求对SPA或AEM扩展进行UI集成测试
要求配置CI中的headless浏览器测试
Install
npx skills add NeverSight/learn-skills.dev --skill appbuilder-e2e-testing -g -y
SKILL.md
Frontmatter
{
"name": "appbuilder-e2e-testing",
"license": "Apache-2.0",
"metadata": {
"category": "e2e-testing"
},
"description": "Use this skill whenever the user wants browser-based end-to-end tests for an Adobe App Builder application. Covers Playwright E2E testing for ExC Shell SPAs, AEM extension UIs, and full-stack flows. Use when the user mentions: \"E2E test\", \"end-to-end test\", \"Playwright\", \"browser test\", \"test my SPA in the browser\", \"test my AEM extension\", \"test the full flow\", \"integration test with UI\", \"headless browser test\", \"E2E in CI\". This skill is for BROWSER-based testing only. For Jest unit tests of actions or React components, use appbuilder-testing instead.",
"allowed-tools": "Bash(npx:*) Bash(npm:*) Bash(node:*) Bash(aio:*) Read Write Edit",
"compatibility": "Requires Node.js 18+, Playwright"
}
App Builder E2E Testing
Playwright-based browser E2E testing for Adobe App Builder SPAs and AEM extensions. This skill generates Playwright configs, test files, and CI workflows for browser-level validation.
Pattern Quick-Reference
Identify the user's intent, then read the referenced sections to generate tailored tests.
| User wants | Reference | Asset |
|---|---|---|
| E2E test for ExC Shell SPA | references/e2e-testing-patterns.md |
assets/playwright.config.ts, assets/e2e-test-template.spec.ts |
| Test AEM extension in browser | references/aem-extension-testing.md |
assets/playwright.config.ts |
| E2E tests in CI pipeline | references/ci-integration.md |
assets/e2e-ci-workflow.yml |
Fast Path (for clear requests)
When the user says "add E2E tests" or "write Playwright tests" and intent is clear:
- Scan project for
web-src/(SPA) or@adobe/uix-guestin dependencies (AEM extension) - Install Playwright if not present:
npm install -D @playwright/test && npx playwright install chromium - Generate
playwright.config.tsfromassets/playwright.config.ts - For ExC Shell SPA: read
references/e2e-testing-patterns.md, generate test with iframe navigation, shell wait, Spectrum ARIA selectors - For AEM extension: read
references/aem-extension-testing.md, generate test with Extension Tester URL, nested iframe handling, modal flows - Run tests:
npx playwright test - If CI requested: generate GitHub Actions workflow from
assets/e2e-ci-workflow.yml
Quick Reference
- Test directory:
e2e/at project root (separate from Jesttest/) - Config file:
playwright.config.tsat project root - Install command:
npm install -D @playwright/test && npx playwright install chromium(installs Playwright + Chromium browser) - Run command:
npx playwright test(headless) ornpx playwright test --headed(visible browser) - Debug command:
npx playwright test --debug(step-through mode) - Report command:
npx playwright show-report(open HTML report) - ExC Shell iframe: Access SPA inside shell via
page.frameLocator('iframe')— exact selector varies, seereferences/e2e-testing-patterns.md - Spectrum selectors: Use ARIA roles, not CSS classes:
getByRole('button', { name: 'Save' }),getByRole('grid'),getByRole('textbox') - Auth note: Full ExC Shell auth automation is complex — recommend testing against
aio app dev(local) first. Seereferences/e2e-testing-patterns.md§ Authentication. - AEM extensions: Use Extension Tester URL with
devMode=true. Seereferences/aem-extension-testing.md.
Full Workflow (for ambiguous or complex requests)
- Scan project — Check for
web-src/(SPA),@adobe/uix-guest(AEM extension), existing test setup,app.config.yamlextension type - Confirm scope — Which pages/flows to test? Local dev or deployed? CI needed?
- Install Playwright —
npm install -D @playwright/test && npx playwright install chromiumif not already installed - Generate config — Copy and customize
assets/playwright.config.tsfor the project - Generate test files — Read appropriate reference doc, generate tests matching project structure:
- ExC Shell SPA →
references/e2e-testing-patterns.md - AEM extension →
references/aem-extension-testing.md
- ExC Shell SPA →
- Add action stubbing — If tests need deterministic backend responses, add
page.route()intercepts - Run and iterate —
npx playwright test, fix selectors/timing as needed - Add CI workflow — If requested, read
references/ci-integration.mdand generate workflow fromassets/e2e-ci-workflow.yml - Validate — All tests pass, use ARIA selectors, have assertions, no hardcoded waits
Inputs To Request
- Current repository path and project type (SPA vs AEM extension)
- Which pages or user flows need E2E coverage
- Whether tests should run against local dev or deployed environment
- Whether CI integration is needed
Deliverables
playwright.config.tsconfigured for the project- E2E test files in
e2e/directory - GitHub Actions workflow (if CI requested)
- Passing test run output
Quality Bar
- All tests use ARIA selectors (
getByRole,getByLabel) — no CSS class selectors - Iframe navigation uses
frameLocator()— noframe()with index - All tests have
await expect()assertions — no assertion-free tests - Action responses are stubbed with
page.route()for deterministic results - No hardcoded
page.waitForTimeout()— usewaitForSelector,waitForResponse, or Playwright auto-waiting - Tests run in < 60s on local machine
References
- Use
references/e2e-testing-patterns.mdfor Playwright E2E patterns for ExC Shell SPAs (iframe nav, Spectrum selectors, auth, action stubbing). - Use
references/aem-extension-testing.mdfor AEM extension testing patterns (Extension Tester, nested iframes, modal lifecycle, extension points). - Use
references/ci-integration.mdfor running Playwright in GitHub Actions (browser install, artifact upload, headless config). - Use
assets/playwright.config.tsas the base Playwright configuration template. - Use
assets/e2e-ci-workflow.ymlas the GitHub Actions workflow template for E2E tests.
Common Issues
- Iframe not found: The ExC Shell iframe selector varies — use DevTools to inspect. Try
page.frameLocator('iframe[src*="your-app"]')or discover withpage.frames(). - Shell spinner never dismissed: Ensure
runtime.done()is called in the SPA. For E2E, wait for content inside the iframe rather than the shell itself. - Spectrum component not clickable: React Spectrum components render ARIA roles — use
getByRole()instead of CSS selectors. Checkreferences/e2e-testing-patterns.md§ Spectrum Selectors. - Auth popup blocks test: Test against local dev (
aio app dev) which skips shell auth. See auth section inreferences/e2e-testing-patterns.md. - AEM extension not loading: Extension Tester requires IMS login. Use generous timeouts (10s+) for extension load. Check
references/aem-extension-testing.md§ Common Gotchas. - Tests flaky in CI: Add retries (
retries: 1), usewaitForResponse()for action calls, and checkreferences/ci-integration.mdfor headless configuration.
Chaining
- Chains FROM
appbuilder-ui-scaffolder(after UI components are generated, add E2E tests) - Chains FROM
appbuilder-testing(when user wants browser-level validation beyond Jest unit tests) - Chains TO
appbuilder-cicd-pipeline(add E2E test job to CI/CD pipeline)
Version History
- e0220ca Current 2026-07-05 23:26
