🎭 Playwright Test Automation Framework

🎭 Playwright Test Automation Framework

🎭 现代 E2E 测试框架 | Playwright + TypeScript + MCP 服务器 | 数据驱动的 POM 架构 | 高级测试录制与回放

GoldiSaini

开发者工具
访问服务器

README

🎭 Playwright 测试自动化框架

🚀 一个强大的、数据驱动的测试自动化框架,使用 Playwright 和 TypeScript 构建,并利用 @executeautomation/playwright-mcp-server 来增强测试录制和回放功能。采用页面对象模型设计模式,实现可扩展和可维护的自动化测试。

Playwright TypeScript Node.js MCP Server

✨ 亮点

  • 🏗️ 页面对象模型 - 干净且可维护的测试架构
  • 📊 数据驱动测试 - 使用外部测试数据轻松扩展测试
  • 🔧 TypeScript 支持 - 强大的类型检查和更好的 IDE 集成
  • ♻️ 可重用组件 - 模块化设计,实现最大的代码重用
  • 🎯 易于维护 - 集中式定位器和数据管理
  • 📈 可扩展设计 - 轻松添加新的测试场景
  • 🎥 MCP Server 集成 - 增强的测试录制和回放功能

🌟 主要特性

  • 结构化和组织化的测试架构
  • 测试数据与测试逻辑分离
  • 用于常见操作的强大辅助方法
  • 易于遵循的页面对象模式实现
  • 全面的测试数据管理
  • 即用型注册流程示例
  • 使用 MCP Server 进行测试录制和回放
  • 自动化测试脚本生成

框架结构

tests/
├── data/                    # 测试数据层
│   ├── interfaces/         
│   │   └── TestData.ts     # 数据类型定义
│   ├── TestDataHelper.ts   # 用于数据管理的辅助类
│   └── testData.ts         # 测试场景数据
├── pages/                   # 页面对象
│   ├── BasePage.ts         # 具有通用功能的基础页面
│   ├── LoginPage.ts        # 登录页面对象
│   └── RegistrationPage.ts # 注册页面对象
└── specs/                   # 测试规范
    └── registration.spec.ts # 测试用例

功能特性

  • 页面对象模型: 将测试逻辑与页面交互分离
  • 数据驱动测试: 测试数据与测试逻辑分离
  • TypeScript: 强大的类型和更好的 IDE 支持
  • 可重用组件: 基础类中的通用功能
  • 易于维护: 集中式定位器和数据管理
  • 可扩展: 易于添加新的测试场景和页面对象

测试数据结构

该框架使用结构化的方法来管理测试数据:

interface TestScenario {
    name: string;
    login: LoginData;
    registration: RegistrationData;
}

当前测试场景:

  1. 有效注册流程(男性用户)
  2. 女性用户注册

设置

  1. 克隆存储库:
git clone <repository-url>
cd playwrightMCP_Demo
  1. 安装依赖项:
npm install
  1. 安装 Playwright 浏览器:
npx playwright install

运行测试

运行所有测试:

npx playwright test

运行特定测试文件:

npx playwright test tests/specs/registration.spec.ts

在有头模式下运行测试:

npx playwright test --headed

添加新的测试场景

  1. tests/data/testData.ts 中添加新的测试数据:
{
    name: '您的场景名称',
    login: {
        email: 'your.email@test.com'
    },
    registration: {
        firstName: '名',
        lastName: '姓',
        address: '地址',
        email: 'email@test.com',
        phone: '1234567890',
        gender: 'Male' | 'Female',
        country: '国家名称'
    }
}
  1. 测试将自动为新场景执行。

框架组件

页面对象

  • BasePage: 包含通用方法和实用程序
  • LoginPage: 处理登录功能
  • RegistrationPage: 管理注册表单交互

数据管理

  • TestData.ts: 包含测试场景
  • TestDataHelper: 提供访问和管理测试数据的方法
  • Interfaces: 定义测试数据的结构

最佳实践

  1. 保持页面对象专注于页面特定功能
  2. 将测试数据与测试逻辑分开维护
  3. 使用有意义的场景名称
  4. 遵循 TypeScript 命名约定
  5. 保持测试独立和原子性

贡献

  1. 为您的功能创建一个新分支
  2. 添加/更新测试和页面对象
  3. 如果需要,更新测试数据
  4. 提交拉取请求

依赖项

  • Playwright
  • TypeScript
  • Node.js
  • @executeautomation/playwright-mcp-server - 用于增强的测试录制和回放
  • @playwright/test - 核心测试框架

支持

如有任何问题或疑问,请在存储库中创建一个新 issue。

推荐服务器

Playwright MCP Server

Playwright MCP Server

一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。

官方
精选
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。

官方
精选
本地
TypeScript
MCP Package Docs Server

MCP Package Docs Server

促进大型语言模型高效访问和获取 Go、Python 和 NPM 包的结构化文档,通过多语言支持和性能优化来增强软件开发。

精选
本地
TypeScript
Claude Code MCP

Claude Code MCP

一个实现了 Claude Code 作为模型上下文协议(Model Context Protocol, MCP)服务器的方案,它可以通过标准化的 MCP 接口来使用 Claude 的软件工程能力(代码生成、编辑、审查和文件操作)。

精选
本地
JavaScript
@kazuph/mcp-taskmanager

@kazuph/mcp-taskmanager

用于任务管理的模型上下文协议服务器。它允许 Claude Desktop(或任何 MCP 客户端)在基于队列的系统中管理和执行任务。

精选
本地
JavaScript
mermaid-mcp-server

mermaid-mcp-server

一个模型上下文协议 (MCP) 服务器,用于将 Mermaid 图表转换为 PNG 图像。

精选
JavaScript
Jira-Context-MCP

Jira-Context-MCP

MCP 服务器向 AI 编码助手(如 Cursor)提供 Jira 工单信息。

精选
TypeScript
Linear MCP Server

Linear MCP Server

一个模型上下文协议(Model Context Protocol)服务器,它与 Linear 的问题跟踪系统集成,允许大型语言模型(LLM)通过自然语言交互来创建、更新、搜索和评论 Linear 问题。

精选
JavaScript
Sequential Thinking MCP Server

Sequential Thinking MCP Server

这个服务器通过将复杂问题分解为顺序步骤来促进结构化的问题解决,支持修订,并通过完整的 MCP 集成来实现多条解决方案路径。

精选
Python
Curri MCP Server

Curri MCP Server

通过管理文本笔记、提供笔记创建工具以及使用结构化提示生成摘要,从而实现与 Curri API 的交互。

官方
本地
JavaScript