appbuilder-e2e-testing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

App Builder E2E Testing

Adobe App Builder E2E 测试

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.

基于Playwright的浏览器端到端测试，适用于Adobe App Builder SPA和AEM扩展。此技能可生成Playwright配置文件、测试文件以及用于浏览器级验证的CI工作流。

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

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`

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

识别用户意图，然后阅读参考章节以生成定制化测试。

用户需求参考文档资源

ExC Shell SPA的E2E测试

用户需求	参考文档	资源
ExC Shell SPA的E2E测试	`references/e2e-testing-patterns.md`	`assets/playwright.config.ts` , `assets/e2e-test-template.spec.ts`
浏览器中测试AEM扩展	`references/aem-extension-testing.md`	`assets/playwright.config.ts`
CI流水线中的E2E测试	`references/ci-integration.md`	`assets/e2e-ci-workflow.yml`

references/e2e-testing-patterns.md

assets/playwright.config.ts

assets/e2e-test-template.spec.ts

浏览器中测试AEM扩展

references/aem-extension-testing.md

assets/playwright.config.ts

CI流水线中的E2E测试

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-guest
```
in dependencies (AEM extension)

Install Playwright if not present:

npm install -D @playwright/test && npx playwright install chromium

Generate

playwright.config.ts

from

assets/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
```

当用户说“添加E2E测试”或“编写Playwright测试”且意图明确时：

扫描项目，查找
```
web-src/
```
（SPA）或依赖项中的
```
@adobe/uix-guest
```
（AEM扩展）

若未安装Playwright则进行安装：

npm install -D @playwright/test && npx playwright install chromium

从

assets/playwright.config.ts

生成

playwright.config.ts

对于ExC Shell SPA：阅读
```
references/e2e-testing-patterns.md
```
，生成包含iframe导航、shell等待、Spectrum ARIA选择器的测试
对于AEM扩展：阅读
```
references/aem-extension-testing.md
```
，生成包含Extension Tester URL、嵌套iframe处理、模态框流程的测试
运行测试：
```
npx playwright test
```
若需要CI：从
```
assets/e2e-ci-workflow.yml
```
生成GitHub Actions工作流

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
```
.

测试目录： 项目根目录下的
```
e2e/
```
（与Jest的
```
test/
```
分开）
配置文件： 项目根目录下的
```
playwright.config.ts
```

安装命令：

npm install -D @playwright/test && npx playwright install chromium

（安装Playwright + Chromium浏览器）

运行命令：
```
npx playwright test
```
（无头模式）或
```
npx playwright test --headed
```
（可见浏览器模式）
调试命令：
```
npx playwright test --debug
```
（分步调试模式）
报告命令：
```
npx playwright show-report
```
（打开HTML报告）
ExC Shell iframe： 通过
```
page.frameLocator('iframe')
```
访问shell内的SPA —— 具体选择器有所不同，请查看
```
references/e2e-testing-patterns.md
```

Spectrum选择器： 使用ARIA角色而非CSS类：

getByRole('button', { name: 'Save' })

getByRole('grid')

getByRole('textbox')

认证说明： 完整的ExC Shell认证自动化较为复杂 —— 建议先针对
```
aio app dev
```
（本地环境）进行测试。请查看
```
references/e2e-testing-patterns.md
```
中的“认证”章节。
AEM扩展： 使用带有
```
devMode=true
```
的Extension Tester URL。请查看
```
references/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.yaml
```
extension type
Confirm scope — Which pages/flows to test? Local dev or deployed? CI needed?

Install Playwright —

npm install -D @playwright/test && npx playwright install chromium

if not already installed

Generate config — Copy and customize
```
assets/playwright.config.ts
```
for 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
```
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.md
```
and generate workflow from
```
assets/e2e-ci-workflow.yml
```
Validate — All tests pass, use ARIA selectors, have assertions, no hardcoded waits

扫描项目 —— 检查是否存在
```
web-src/
```
（SPA）、
```
@adobe/uix-guest
```
（AEM扩展）、现有测试设置、
```
app.config.yaml
```
扩展类型
确认范围 —— 需要测试哪些页面/流程？是本地开发环境还是已部署环境？是否需要CI？

安装Playwright —— 若尚未安装，执行

npm install -D @playwright/test && npx playwright install chromium

生成配置 —— 复制并根据项目定制
```
assets/playwright.config.ts
```
生成测试文件 —— 阅读相应的参考文档，生成匹配项目结构的测试：
- ExC Shell SPA →
```
references/e2e-testing-patterns.md
```
- AEM扩展 →
```
references/aem-extension-testing.md
```
添加action存根 —— 如果测试需要确定的后端响应，添加
```
page.route()
```
拦截
运行并迭代 ——
```
npx playwright test
```
，根据需要修复选择器/计时问题
添加CI工作流 —— 若有需求，阅读
```
references/ci-integration.md
```
并从
```
assets/e2e-ci-workflow.yml
```
生成工作流
验证 —— 所有测试通过，使用ARIA选择器，包含断言，无硬编码等待

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

当前仓库路径和项目类型（SPA vs AEM扩展）
需要E2E覆盖的页面或用户流程
测试应针对本地开发环境还是已部署环境
是否需要CI集成

Deliverables

交付成果

```
playwright.config.ts
```
configured for the project
E2E test files in
```
e2e/
```
directory
GitHub Actions workflow (if CI requested)
Passing test run output

针对项目配置的
```
playwright.config.ts
```
```
e2e/
```
目录下的E2E测试文件
GitHub Actions工作流（若需要CI）
测试运行通过的输出结果

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

所有测试使用ARIA选择器（
```
getByRole
```
,
```
getByLabel
```
）—— 不使用CSS类选择器
Iframe导航使用
```
frameLocator()
```
—— 不使用带索引的
```
frame()
```
所有测试包含
```
await expect()
```
断言 —— 无无断言测试
使用
```
page.route()
```
存根action响应以获得确定结果
无硬编码的
```
page.waitForTimeout()
```
—— 使用
```
waitForSelector
```
,
```
waitForResponse
```
或Playwright自动等待
本地机器上测试运行时间<60秒

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.

针对ExC Shell SPA的Playwright E2E模式（iframe导航、Spectrum选择器、认证、action存根），请使用
```
references/e2e-testing-patterns.md
```
。
针对AEM扩展的测试模式（Extension Tester、嵌套iframe、模态框生命周期、扩展点），请使用
```
references/aem-extension-testing.md
```
。
关于在GitHub Actions中运行Playwright（浏览器安装、工件上传、无头配置），请使用
```
references/ci-integration.md
```
。
请使用
```
assets/playwright.config.ts
```
作为Playwright配置模板的基础。
请使用
```
assets/e2e-ci-workflow.yml
```
作为E2E测试的GitHub Actions工作流模板。

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.

找不到iframe： ExC Shell的iframe选择器有所不同 —— 使用DevTools进行检查。尝试
```
page.frameLocator('iframe[src*="your-app"]')
```
或通过
```
page.frames()
```
查找。
Shell加载动画永不消失： 确保SPA中调用了
```
runtime.done()
```
。对于E2E测试，请等待iframe内的内容而非shell本身。
Spectrum组件无法点击： React Spectrum组件会渲染ARIA角色 —— 使用
```
getByRole()
```
而非CSS选择器。请查看
```
references/e2e-testing-patterns.md
```
中的“Spectrum选择器”章节。
认证弹窗阻止测试： 针对本地开发环境（
```
aio app dev
```
）进行测试，该环境会跳过shell认证。请查看
```
references/e2e-testing-patterns.md
```
中的认证章节。
AEM扩展无法加载： Extension Tester需要IMS登录。为扩展加载设置充足的超时时间（10秒以上）。请查看
```
references/aem-extension-testing.md
```
中的“常见问题”章节。
CI中测试不稳定： 添加重试（
```
retries: 1
```
），对action调用使用
```
waitForResponse()
```
，并查看
```
references/ci-integration.md
```
中的无头配置。

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)

从
```
appbuilder-ui-scaffolder
```
联动（生成UI组件后，添加E2E测试）
从
```
appbuilder-testing
```
联动（当用户需要超越Jest单元测试的浏览器级验证时）
联动至
```
appbuilder-cicd-pipeline
```
（将E2E测试任务添加到CI/CD流水线）