mcpField
E
e2e-tester

e2e-tester

github.com/redpanda-data测试与质量4.3k48 次安装今天更新
代码仓库

关于 e2e-tester

e2e-tester 是使用 Playwright 和 Testcontainers 为 Redpanda Console 编写端到端测试的技能。它涵盖针对 Docker 容器栈的多步骤浏览器流程,并提供选择器、清理和故障分析规范。

主要功能

  1. 01Playwright 浏览器流程测试
  2. 02通过 Testcontainers 管理应用栈
  3. 03无障碍选择器指南
  4. 04测试数据与容器清理
  5. 05OSS 和 Enterprise 测试命令

适用场景

  1. 01测试多步骤用户流程
  2. 02自动化多页面浏览器工作流
  3. 03调试端到端测试故障
  4. 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.md
failure-analysis.md
test-patterns.md

详细介绍

使用 Playwright 和 Testcontainers 进行端到端测试

使用 Playwright 编写端到端测试,通过 testcontainers 在 Docker 容器中运行完整的 Redpanda Console 堆栈。

何时使用此技能

  • 测试包含 2 步或更多步骤的用户旅程(登录 -> 操作 -> 验证)
  • 多页面工作流
  • 使用 Playwright 进行浏览器自动化

不适用于: 组件单元测试 -> 请使用 testing

关键规则

务必:

  • 运行 E2E 测试前执行 bun run build(需要前端资源)
  • 使用 testcontainers API 管理容器(测试中绝不使用手动 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

选择器优先级

  1. getByRole() - 最适合无障碍访问
  2. getByLabel() - 用于表单输入
  3. getByText() - 用于验证内容
  4. getByTestId() - 语义化选择器不明确时使用
  5. CSS 选择器 - 尽可能避免使用

Test ID 命名

  • kebab-case:data-testid="feature-action-element"
  • 具体明确:包含功能名称、操作和元素类型
  • 动态:data-testid={\item-delete-${id}`}`

参考资料

  • 容器设置 — Testcontainer 生命周期、配置、CI 设置
  • 测试模式 — 多步骤工作流、表单、表格、API 测试
  • 失败分析 — 错误模式、调试、MCP Playwright Agent

输出

完成工作后:

  1. 确认前端构建成功
  2. 验证所有 E2E 测试均通过
  3. 说明组件中新增的任何 test ID
  4. 提及测试容器的清理情况

评论

支持 Markdown