关于 e2e-tester
e2e-tester 是使用 Playwright 和 Testcontainers 为 Redpanda Console 编写端到端测试的技能。它涵盖针对 Docker 容器栈的多步骤浏览器流程,并提供选择器、清理和故障分析规范。
主要功能
- 01Playwright 浏览器流程测试
- 02通过 Testcontainers 管理应用栈
- 03无障碍选择器指南
- 04测试数据与容器清理
- 05OSS 和 Enterprise 测试命令
适用场景
- 01测试多步骤用户流程
- 02自动化多页面浏览器工作流
- 03调试端到端测试故障
- 04运行 OSS 或 Enterprise 端到端测试
MCP 相关
该技能建议通过 Task 工具调用 MCP Playwright agents 分析测试故障。
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ redpanda-data/ console --skill e2e-tester安装后在 Claude Code 中输入/e2e-tester确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/container-setup.mdfailure-analysis.mdtest-patterns.md详细介绍
使用 Playwright 和 Testcontainers 进行端到端测试
使用 Playwright 编写端到端测试,通过 testcontainers 在 Docker 容器中运行完整的 Redpanda Console 堆栈。
何时使用此技能
- 测试包含 2 步或更多步骤的用户旅程(登录 -> 操作 -> 验证)
- 多页面工作流
- 使用 Playwright 进行浏览器自动化
不适用于: 组件单元测试 -> 请使用 testing
关键规则
务必:
- 运行 E2E 测试前执行
bun run build(需要前端资源) - 使用
testcontainersAPI 管理容器(测试中绝不使用手动docker命令) - 使用
page.getByRole()和page.getByLabel()选择器(避免使用 CSS 选择器) - 语义化选择器不可用时,添加
data-testid属性 - 使用 Task 工具和 MCP Playwright Agent 分析失败原因
- 使用
afterEach调用清理 API 端点来清理测试数据
绝不:
- 测试 UI 组件渲染(请使用单元测试/集成测试)
- 使用
.class-name或#id这类脆弱的 CSS 选择器 - 在
.click()中使用force:true,或使用waitForTimeout - 硬编码等待时间(使用带条件的
waitFor) - 测试失败后让容器继续运行
- 将测试截图提交到 git
命令
bun run build # Build frontend (REQUIRED first!)
bun run e2e-test # Run OSS E2E tests
bun run e2e-test-enterprise # Run Enterprise E2E tests
bun run e2e-test:ui # Playwright UI mode (debugging)
bun run e2e-test tests/topics/create-topic.spec.ts # Specific file
测试架构
OSS 模式(bun run e2e-test): Redpanda + 后端 + OwlShop 容器
企业版模式(bun run e2e-test-enterprise): 同上 + RBAC、SSO(需要 console-enterprise 仓库)
文件位置:tests/<feature>/*.spec.ts
选择器优先级
getByRole()- 最适合无障碍访问getByLabel()- 用于表单输入getByText()- 用于验证内容getByTestId()- 语义化选择器不明确时使用- CSS 选择器 - 尽可能避免使用
Test ID 命名
- kebab-case:
data-testid="feature-action-element" - 具体明确:包含功能名称、操作和元素类型
- 动态:
data-testid={\item-delete-${id}`}`
参考资料
输出
完成工作后:
- 确认前端构建成功
- 验证所有 E2E 测试均通过
- 说明组件中新增的任何 test ID
- 提及测试容器的清理情况
评论
支持 Markdown