使用说明

剧作家MCP POC

一个全面的Playwright测试自动化框架，具有快速驱动的测试生成功能。该项目为自动化测试人员提供了结构化的模板和指南，以使用AI辅助生成高质量的Playwright测试。

🎯 目的

该项目包含提示模板和指南，使自动化测试人员能够：

生成一致且可维护的Playwright UI测试
遵循标准化的代码组织模式
实施特定环境的测试配置
在人工智能的帮助下保持干净的代码实践

📁 项目结构

playwright-mcp-poc/
├── README.md                           # This file
├── main/                              # Main application code and configurations
│   ├── credentials/
│   │   └── environments.json          # Environment URL configurations
│   ├── utils/                         # Common utility functions
│   │   ├── browserActions.utils.ts   # Common action utilities (click, type, navigate, etc.)
│   │   └── browserAssertions.utils.ts # Common assertion utilities (verify visibility, text, etc.)
│   └── ui/
│       └── login/                     # Login feature implementation
│           ├── actions.ts             # User interaction functions
│           ├── assertions.ts          # Verification functions
│           ├── locators.ts           # Element selectors
│           └── tasks.ts              # Grouped action sequences
├── templates/                         # Prompt templates for AI-assisted test generation
│   ├── backgroundPrompt.md           # Core prompt template for Playwright test generation
│   ├── copilotInstructions.md        # Code review and style guidelines
│   └── testScenarioPrompt.md         # Example test scenario template
└── tests/                            # Test specifications
    └── ui/
        └── login.spec.ts             # Login feature test specifications

备注：中的文件 main/ 和 tests/ 目录是提供的虚拟示例，用于演示Playwright测试自动化的推荐项目结构和组织模式。

🚀 主要特点

1. 快速驱动测试生成

用于创建Playwright测试的结构化模板
特定环境配置管理
标准化考试组织模式

2. 环境管理

支持多种环境（开发、质量保证、暂存、预制作、生产）
通过JSON配置进行凭证管理
无硬编码值的环境解析

3. 代码组织标准

具有单独关注点的模块化测试结构：
- locators.ts -元素选择器
- actions.ts -用户交互
- assertions.ts -验证功能
- tasks.ts -分组动作序列
常见实用功能：
- browserActions.utils.ts -可重复使用的操作功能（点击、键入、导航、悬停等）
- browserAssertions.utils.ts -可重复使用的验证功能（可见性、文本、属性等）

4. 人工智能辅助代码质量

Copilot综合编码指南
一致的命名约定
导入/导出最佳实践
代码审查标准

📝 如何使用

1. 设置测试场景

使用中的模板 backgroundPrompt.md 和 testScenarioPrompt.md 作为测试生成提示的起点。

所需输入：

场景：逐步测试说明
环境：目标环境（dev/qa/ststaging等）

2. 环境配置

确保你的项目有 environments.json 文件在 main/credentials/ 目录：

{
  "dev": "https://dev.example.com",
  "qa": "https://qa.example.com",
  "staging": "https://staging.example.com"
}

3. 使用实用函数

利用通用实用程序函数实现一致的测试实施：

// Import utility functions
import { click, type, navigate } from '@main/utils/browserActions.utils';
import { verifyElementVisible, verifyElementText } from '@main/utils/browserAssertions.utils';

// Use in your action files
await click(loginButton, "Login button");
await type(emailInput, "user@example.com", "Email input");
await verifyElementVisible(dashboard, "Dashboard");

4. 运行测试

使用环境变量执行测试：

# PowerShell
$env:ENV="qa"; npx playwright test tests/ui/your-test.spec.ts

# Command Prompt
set ENV=qa && npx playwright test tests/ui/your-test.spec.ts

📋 代码质量指南

该项目遵循中概述的严格编码标准 copilotInstructions.md:

使用ES6+导入/导出语法
实现camelCase命名约定
保持代码整洁，间距适当
使用带有适当类型注释的TypeScript
遵循模块化架构模式

🔧 最佳实践

环境分辨率：始终阅读 environments.json 而不是硬编码URL
模块化设计：分离定位器、操作、断言和任务
参数化函数：使用灵活的断言函数，而不是多个特定的断言函数
错误处理：将断言放在catch块中，并以“verify”作为前缀
代码重用：导入共享实用程序并避免深度相对路径

🤝 贡献

在为该项目做出贡献时：

遵循中的编码指南 copilotInstructions.md
使用提示模板作为新场景的示例
维护模块化架构模式
提交前在多个环境中进行测试