feat(e2e): add Playwright configuration and initial tests#675
Conversation
dosubot
Bot
added
the
size:L
📝 WalkthroughWalkthrough本次变更为 web 项目引入了 Playwright 端到端测试支持。主要包括添加 Playwright 配置文件、测试样例、相关依赖与脚本，以及相应的 TypeScript 配置和 .gitignore 规则调整。 Changes
Sequence Diagram(s)sequenceDiagram
participant Developer
participant Playwright CLI
participant Local Dev Server
participant Browser
Developer->>Playwright CLI: 运行 npm run test:e2e
Playwright CLI->>Local Dev Server: 启动本地开发服务器
Playwright CLI->>Browser: 启动浏览器实例
Browser->>Playwright CLI: 执行测试用例
Playwright CLI->>Local Dev Server: 关闭服务器（测试结束）
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
web/tests/e2e/example.spec.ts (2)
1-8: 测试结构正确，但建议测试实际应用。测试使用了正确的 Playwright API 和最佳实践，包括角色选择器和适当的断言。但建议将测试目标从外部网站改为实际的应用程序，以避免外部依赖导致的不稳定性。
考虑将测试修改为：
- await page.goto('https://playwright.dev/') + await page.goto('/') - await expect(page).toHaveTitle(/Playwright/) + await expect(page).toHaveTitle(/MineAdmin/)
10-18: 导航测试实现良好，建议调整为实际应用场景。使用角色选择器进行导航测试是很好的做法，但建议将测试场景调整为实际应用的功能点。
建议修改为测试实际应用的导航：
- await page.goto('https://playwright.dev/') - await page.getByRole('link', { name: 'Get started' }).click() - await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible() + await page.goto('/') + await page.getByRole('link', { name: '实际的导航链接' }).click() + await expect(page.getByRole('heading', { name: '实际的页面标题' })).toBeVisible()web/playwright.config.ts (2)
37-37: 建议将端口配置设为可配置项。硬编码的端口 2888 可能与其他服务冲突，建议使用环境变量或配置文件来管理。
- baseURL: 'http://localhost:2888', + baseURL: process.env.BASE_URL || 'http://localhost:2888',
47-82: 考虑启用多浏览器测试以提高覆盖率。当前仅启用了 Chromium 测试，建议至少启用 Firefox 以捕获跨浏览器兼容性问题。
考虑取消注释 Firefox 配置：
- // { - // name: 'firefox', - // use: { ...devices['Desktop Firefox'] }, - // }, + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + },
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
web/.gitignore(1 hunks)web/package.json(2 hunks)web/playwright.config.ts(1 hunks)web/tests/e2e/example.spec.ts(1 hunks)web/tsconfig.node.json(1 hunks)
🔇 Additional comments (10)
web/.gitignore (1)
12-12: LGTM！正确添加了测试输出目录的忽略规则。这个忽略规则与
playwright.config.ts中的 OUTPUT_DIR 配置保持一致，遵循了不将测试报告和生成文件提交到版本控制的最佳实践。web/tsconfig.node.json (2)
8-10: LGTM！正确添加了 Node.js 类型支持。添加 Node.js 类型定义支持 Playwright 配置文件中使用的 Node.js API，与新增的
@types/node依赖保持一致。
16-16: LGTM！正确包含了 Playwright 配置文件。将
playwright.config.ts添加到编译上下文中，确保配置文件获得适当的类型检查和 IntelliSense 支持。web/package.json (2)
19-19: E2E 测试脚本配置正确。脚本正确引用了 Playwright 配置文件，命令格式符合最佳实践。
62-62: 确认 Playwright 和 Node 类型依赖版本及安全性
- web/package.json 第 62 行：
@playwright/test使用^1.54.2，与最新稳定版 1.54.2 一致- web/package.json 第 66 行：
@types/node与最新稳定版 24.1.0 一致- 运行
npm audit --only=dev未报告与 Playwright 或 @types/node 相关的安全漏洞web/playwright.config.ts (5)
12-13: LGTM！目录结构配置清晰。输出目录的配置结构清晰，与 .gitignore 规则保持一致。
18-33: 测试配置遵循最佳实践。配置正确处理了 CI 环境检测、并行执行、重试策略和报告生成，遵循了 Playwright 的最佳实践。
35-44: 调试和跟踪配置合理。跟踪和截图配置有助于调试失败的测试，视频录制被注释掉是合理的选择以节省存储空间。
84-90: Web 服务器配置正确。开发服务器配置与 baseURL 保持一致，CI 环境下禁用服务器重用是正确的做法。
86-87: 开发服务器命令和端口已验证一致已确认：
pnpm run dev会调用vite启动开发服务器；- 在
web/.env.development和web/.env.production中均有VITE_APP_PORT = 2888；vite.config.ts中通过server.port = Number(env.VITE_APP_PORT …)使用了该端口。因此，Playwright 配置中的
command: 'pnpm run dev', url: 'http://localhost:2888',与实际启动端口完全匹配，无需修改。
2 participants
Summary by CodeRabbit