adobe/appbuilder-e2e-testing

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:

1. Scan project for web-src/ (SPA) or @adobe/uix-guest in dependencies (AEM extension)
2. Install Playwright if not present: npm install -D @playwright/test && npx playwright install chromium
3. Generate playwright.config.ts from assets/playwright.config.ts
4. For ExC Shell SPA: read references/e2e-testing-patterns.md, generate test with iframe navigation, shell wait, Spectrum ARIA selectors
5. For AEM extension: read references/aem-extension-testing.md, generate test with Extension Tester URL, nested iframe handling, modal flows
6. Run tests: npx playwright test
7. If CI requested: generate GitHub Actions workflow from assets/e2e-ci-workflow.yml

Quick Reference

• Test directory: e2e/ at project root (separate from Jest test/)
• Config file: playwright.config.ts at project root
• Install command: npm install -D @playwright/test && npx playwright install chromium (installs Playwright + Chromium browser)
• Run command: npx playwright test (headless) or npx 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, see references/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. See references/e2e-testing-patterns.md § Authentication.
• AEM extensions: Use Extension Tester URL with devMode=true. See references/aem-extension-testing.md.

Full Workflow (for ambiguous or complex requests)

1. Scan project — Check for web-src/ (SPA), @adobe/uix-guest (AEM extension), existing test setup, app.config.yaml extension type
2. Confirm scope — Which pages/flows to test? Local dev or deployed? CI needed?
3. Install Playwright — npm install -D @playwright/test && npx playwright install chromium if not already installed
4. Generate config — Copy and customize assets/playwright.config.ts for the project
5. 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
6. Add action stubbing — If tests need deterministic backend responses, add page.route() intercepts
7. Run and iterate — npx playwright test, fix selectors/timing as needed
8. Add CI workflow — If requested, read references/ci-integration.md and generate workflow from assets/e2e-ci-workflow.yml
9. 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.ts configured 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() — no frame() 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() — use waitForSelector, waitForResponse, or Playwright auto-waiting
• Tests run in < 60s on local machine

References

• Use references/e2e-testing-patterns.md for Playwright E2E patterns for ExC Shell SPAs (iframe nav, Spectrum selectors, auth, action stubbing).
• Use references/aem-extension-testing.md for AEM extension testing patterns (Extension Tester, nested iframes, modal lifecycle, extension points).
• Use references/ci-integration.md for running Playwright in GitHub Actions (browser install, artifact upload, headless config).
• Use assets/playwright.config.ts as the base Playwright configuration template.
• Use assets/e2e-ci-workflow.yml as 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 with page.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. Check references/e2e-testing-patterns.md § Spectrum Selectors.
• Auth popup blocks test: Test against local dev (aio app dev) which skips shell auth. See auth section in references/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), use waitForResponse() for action calls, and check references/ci-integration.md for 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)