MCP AI Tests

Playwright UI 测试模板（仅限 Chromium + CI，TypeScript）

这个仓库是一个使用Playwright进行UI自动化的最小化模板，主要关注以下方面：

• 仅使用Playwright测试运行器（无额外框架）
• 仅Chromium执行（更小、更快、更稳定）
• 清晰的模块化：夹具、处理器、日志记录器
• 基础URL + 紧缩超时设置
• GitHub Actions 工作流
• 以TypeScript为主的项目

里面是什么

• @playwright/test 作为核心测试依赖
• TypeScript 配置文件和源代码

- playwright.config.ts - baseURLhttps://erickwendel.github.io/vanilla-js-web-app-example/ 的中文翻译可以是：“https://erickwendel.github.io/vanilla-js-web-app-example/（一个使用纯JavaScript的网页应用示例）”。不过，通常在实际使用中，我们可能会直接使用这个网址链接，而不必每次都翻译它，除非是在特定的语境或文档中需要中文表述。所以，如果要简洁地表达，可以就直接使用原网址。但如果需要在中文环境中说明这个网址的内容，上述翻译是一个合适的表述 - timeout每次测试5秒，预期超时时间：3秒 - projects仅限Chromium - reporter列表 + HTML - tsconfig.json 为测试采用严格类型检查

• 模块化工具（TypeScript）

- tests/fixtures/test-base.ts扩展 Playwright 测试，添加自定义设置 - tests/utils/logger.ts简单的控制台日志记录器 - tests/utils/handler.ts应用级别的操作（导航、表单提交、断言辅助工具）

• 示例测试（TypeScript）

- tests/app.spec.ts进行冒烟测试以访问并验证内容渲染 - tests/form.spec.ts表单提交和验证测试

• CI（仅限Chromium）： .github/workflows/playwright.yml

模式：固定装置/处理程序/记录器

这个模板倡导了一种小模式，以保持测试的简洁性和可维护性：

• 装置；夹具；配件

- 扩展了Playwright的功能 test 带有自定义上下文。在这里， logger 并且 app （处理程序）在每次测试时都会被注入。 - 文件： tests/fixtures/test-base.ts

• 处理程序

- 封装应用程序特定的操作（例如。， gotoHome()， submitImage()），从规范文件中抽象出选择器和数据流。 - 文件： tests/utils/handler.ts

• 日志记录器

- 在测试流程中进行最小化日志记录，以提高持续集成（CI）日志中的可调试性。 - 文件： tests/utils/logger.ts

好处：

• 规格描述听起来像商业场景
• 集中化的选择器和流程
• 更轻松的重构，更少的重复代码

本地设置

使用此模板（推荐）：

npm ci
npx playwright install --with-deps chromium
npm test

手动设置（如从头开始创建）：

npm i -D @playwright/test typescript ts-node @types/node
npx playwright install --with-deps chromium

可选命令：

# Headed mode
npm run test:headed

# Debug mode (cross-platform)

# Type check without emitting
npm run typecheck

# Open last HTML report
npx playwright show-report

CI: GitHub Actions（仅限Chromium）

工作流文件： .github/workflows/playwright.yml

• 检出仓库
• 安装 Node.js（v20）
• npm ci
• npx playwright install --with-deps chromium
• npm test
• 上传 playwright-report/ 在失败时作为产物（或“遗留物”）

项目结构

.
├─ playwright.config.ts            # Base URL, timeouts, reporter, chromium-only
├─ tsconfig.json                   # TS compiler options for tests
├─ tests/
│  ├─ app.spec.ts                  # Smoke test for initial content
│  ├─ form.spec.ts                 # Form submission + validation
│  ├─ fixtures/
│  │  └─ test-base.ts             # Custom fixtures: logger + app handler
│  └─ utils/
│     ├─ handler.ts               # Page interactions
│     └─ logger.ts                # Simple logger
├─ .github/workflows/playwright.yml # CI (Chromium only)
├─ .gitignore
└─ package.json

配置亮点

• baseURL：指向托管的示例应用程序。处理程序使用 page.goto('./') 因此，baseURL中的路径部分会被保留（这是GitHub Pages所必需的）。
• 严格的超时限制： timeout: 5000， expect.timeout: 3000， actionTimeout/navigationTimeout: 5000 保持测试快速，快速失败。
• 记者： list 用于CI日志+ html 用于本地/持续集成（CI）制品。
• 项目：仅针对速度和可靠性优化的Chromium；如有需要，之后可以添加Firefox/WebKit。
• TypeScript：Playwright 可以直接运行 TypeScript 测试，无需额外的构建步骤；使用 npm run typecheck 用于静态检查。

扩展这个模板

• 为每页/每个功能添加更多处理程序，以保持规范的表达性。
• 在处理程序中集中选择器以简化维护。
• 通过环境变量为不同环境（例如，测试环境与生产环境）引入一个轻量级的配置层，并且 use.baseURL 覆盖（或重写）。
• 在持续集成（CI）中添加重试机制以提高对不稳定性（flake）的容错能力： retries: 1 或者 2.

故障排除

• Windows调试模式：使用 npm run test:debug 映射为 playwright test --debug （避免使用特定于 shell 的环境语法）。
• 如果在GitHub Pages的基本URL上导航失败，请确保路径使用 ./ 或者使用相对导航来保持路径段。
• 使用 npx playwright codegen 快速探索选择器。

许可证

ISC（注：ISC可能代表某个特定组织或标准的缩写，但在此处无具体上下文，故直接保留原样）。根据您的项目自由调整适应。