AI导哈

Playwright自动化测试框架

一个基于Playwright、Python和Pytest的端到端Web应用自动化测试框架，支持跨浏览器测试、模块化代码结构和详细报告。

  • by AbhishekKandari
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 AbhishekKandari/playright-mcp-automation-framework

使用说明

🚀 剧作家MCP自动化框架

📋 项目概述

Playwright MCP自动化框架是一个全面的端到端测试解决方案，用于使用Playwright与Python、Pytest和MCP（模型上下文协议）进行AI辅助测试生成的web应用程序。它支持跨浏览器测试、模块化代码结构和详细报告，以实现高效自动化。

🛠️ 技术栈

  • 语言： python
  • 测试框架： 剧作家Pytest
  • 报告： 诱惑，HTML报告
  • 浏览器： Chromium、Firefox、WebKit
  • 版本控制： Git
  • 代码质量： Pytest插件，模块化结构

🏗️ 建筑

该框架遵循模块化页面对象模型（POM）架构：

  • 测试层： 包含使用Pytest夹具的测试用例。
  • 页面对象： 用于UI交互的可重用类。
  • 公用设施： 数据管理和常用功能的助手。
  • 配置： Pytest和Playwright配置用于设置。

框架结构

playright-mcp-automation-framework/
├── pages/                          # Page Object classes
│   ├── LoginPage.py
│   ├── InventoryPage.py
│   ├── CartPage.py
│   └── CheckoutPage.py
├── tests/                          # Test files
│   ├── test_login.py
│   ├── test_inventory.py
│   ├── test_cart.py
│   └── test_checkout.py
├── utils/                          # Utilities and helpers
│   ├── helpers.py
│   └── test-data.json
├── allure-results/                 # Allure report data
├── allure-report/                 # Generated Allure HTML report
├── test-results/                   # HTML reports
├── pytest.ini                      # Pytest configuration
├── requirements.txt                # Python dependencies
├── package.json                    # Node.js dependencies (MCP)
├── server.py                       # MCP server for AI integration
└── README.md

数据流图

[User/Test Runner] --> [Pytest] --> [Test Files] --> [Page Objects] --> [Playwright Browser]
                              |           |              |
                              |           |              --> [Utils/Helpers]
                              |           |
                              --> [Allure Reporting] --> [allure-results/]
                              --> [HTML Reporting] --> [test-results/]

🧰 测试覆盖率

该框架包括 39个综合测试用例 涵盖整个SauceDemo电子商务流程：

登录功能（9项测试）

测试用例 描述
test_valid_login_standard_user 验证标准用户是否可以成功登录
test_invalid_username 验证无效用户名的错误
test_invalid_password 验证无效密码的错误
test_locked_out_user 验证锁定用户是否收到错误消息
test_empty_username_and_password 验证空凭据的验证
test_logout_flow 验证注销重定向到登录页面
test_direct_url_access 验证防止未经授权访问的保护措施
test_session_handling 清除cookie后验证会话无效
test_performance_user 验证性能故障用户登录

库存功能（12次测试）

测试用例 描述
test_add_single_item_to_cart 验证单个商品是否可以添加到购物车
test_add_multiple_items_to_cart 验证是否可以添加多个项目
test_remove_item_from_cart_on_inventory_page 验证从库存中删除项目
test_sort_products_by_name_a_to_z 验证A-Z字母排序
test_sort_products_by_name_z_to_a 验证Z-A字母排序
test_sort_products_by_price_low_to_high 验证从低到高的价格排序
test_sort_products_by_price_high_to_low 验证从高到低的价格排序
test_navigate_to_cart_from_inventory 验证库存中的购物车导航
test_view_product_details 验证产品详细信息页面访问权限
test_add_item_from_product_details_page 验证是否从详细信息页面添加项目
test_ui_state_consistency 在操作过程中验证UI一致性
test_multi_tab_behavior 验证多标签功能

购物车功能（5次测试）

测试用例 描述
test_view_cart_with_items 验证购物车是否正确显示商品
test_remove_item_from_cart 验证从购物车中删除商品
test_continue_shopping_from_cart 验证导航返回库存
test_checkout_from_cart 验证购物车中的结账导航
test_cart_persists_after_page_refresh 验证刷新后购物车是否仍然存在

检查功能（13项测试）

测试用例 描述
test_valid_checkout 使用有效信息验证完整结账
test_missing_first_name 验证是否缺少名字
test_missing_last_name 验证是否缺少姓氏
test_missing_postal_code 验证是否缺少邮政编码
test_cancel_checkout 验证取消结账返回购物车
test_checkout_with_multiple_items 使用多个项目验证结账
test_checkout_overview_page 验证概述页面是否显示项目
test_cancel_from_checkout_overview 从概览页面验证取消
test_complete_order_and_return_to_inventory 验证结账后导航
test_checkout_with_empty_cart 使用空购物车验证结账按钮
test_price_validation 验证总价计算的准确性
test_tax_validation 验证税务计算
test_remove_item_from_overview 验证从概览中删除项目

📸 截图

该框架在测试执行期间自动捕获屏幕截图以进行视觉验证。Allure报告附有截图：

  • 登录测试：登录成功、错误消息、注销确认
  • 库存测试：产品列表、排序、购物车徽章更新
  • 购物车测试：购物车商品、空购物车、结账按钮
  • 检查测试：结账单、订单完成、错误状态

截图附件存储在 allure-report/data/attachments/ 并显示在Allure HTML报告中。

📸 证据

下表显示了测试执行期间捕获的通过测试的证据截图：

# 截图 测试用例 描述
1 test_valid_login_standard_user 标准用户登录成功-重定向到库存页面
2 test_invalid_username 无效用户名的错误消息
3 test_locked_out_user 显示锁定用户错误消息
4 test_empty_username_and_password 空凭据的验证错误
5 test_logout_flow 注销成功-重定向到登录页面
6 test_view_cart_with_items 购物车正确显示商品计数
7 test_valid_checkout 订单已成功完成，并显示确认消息
8 test_add_single_item_to_cart 具有添加到购物车功能的库存页面
9 test_checkout_with_multiple_items 购物车显示多个商品
10 test_add_multiple_items_to_cart 购物车徽章显示正确计数
11 test_sort_products_by_name_a_to_z 按字母顺序a-z排序的产品
12 test_checkout_overview_page 包含项目详细信息的结账概述
13 test_price_validation 含税价格明细
14 test_checkout_with_empty_cart 空购物车结账按钮状态
15 test_ui_state_consistance 操作过程中ui状态一致
16 test_remove_item_from_cart 商品已删除-购物车显示零商品
17 test_tax_validation 正确计算和显示税款
18 test_complete_order_and_return_to_库存 显示订单完成消息

注： 所有18个屏幕截图都代表了通过的测试执行，展示了SauceDemo电子商务流程的功能。

🎯 特性

  • 头部模式下的跨浏览器测试（Chromium、Firefox、WebKit）
  • 使用Pytest并行执行测试
  • 可重用代码的模块化页面对象模型
  • 通过MCP服务器生成人工智能辅助测试
  • 综合报告（Allure和HTML）
  • 目视验证的带头执行
  • 使用JSON夹具进行测试数据管理

⚙️ 安装说明

  1. 克隆存储库：

    git clone https://github.com/AbhishekKandari/playright-mcp-automation-framework.git
cd playright-mcp-automation-framework

  2. 创建虚拟环境：

    python -m venv .venv
.venv\Scripts\activate  # On Windows

  3. 安装依赖项：

    pip install -r requirements.txt
playwright install  # Install browser binaries

  4. 设置环境变量 （如有需要） .env 文件。

🧪 测试执行

运行所有测试：

pytest

运行特定的测试文件：

pytest tests/test_login.py

使用特定浏览器运行：

pytest --browser chromium

并行运行（默认）：

pytest  # Uses fullyParallel: true in config

以头部模式运行（默认）：

pytest  # headless: false in playwright.config.js

📊 报告

该框架通过多种渠道提供全面的报告功能：

HTML报告

自动生成于 test-results/report.html:

pytest --html=test-results/report.html

诱惑报告

生成诱惑结果：

pytest --alluredir=allure-results

生成并打开诱惑报告：

allure generate allure-results --clean -o allure-report
allure open allure-report

或者，直接提供Allure报告（需要Allure CLI）：

allure serve allure-results

📈 报告仪表板预览

注： Allure报告提供了测试执行的全面视图，包括：

  • 测试类别：Epic→ 特性→ 故事层次结构
  • 视觉趋势：随着时间的推移，通过/失败趋势
  • 附件支持：屏幕截图、日志和视频
  • 重试：重试分析和历史记录

报告内容

报告类型 位置 描述
HTML报告 test-results/report.html 带有测试结果的Pytest HTML报告
诱惑结果 allure-results/ 原始JSON测试结果数据
魅力HTML allure-report/ 带图表的交互式HTML报告
截图 allure-report/data/attachments/ 测试执行的视觉证据

📁 注： 这 attachments_passed/ 和 reporting_screenshots/ 文件夹包含专门用于README文档目的的屏幕截图。这些不是自动测试执行输出的一部分。

💡 最佳实践

  • 模块化代码： 使用页面对象进行UI交互，以确保可重用性。
  • 测试数据： 将测试数据存储在 utils/test-data.json 并通过助手加载。
  • 断言： 使用 assert 用于简单检查； expect 来自Playwright的复杂验证。
  • 固定装置： 利用Pytest夹具进行安装/拆卸（例如，自动登录）。
  • 并行执行： 并行运行测试以加快执行速度。
  • 头部模式： 使用头部执行进行调试和视觉验证。
  • 报告： 始终生成测试分析报告。
  • 版本控制： 定期提交更改，并为功能使用分支。
  • 代码质量： Python代码遵循PEP8；保持职能小而集中。
  • 错误处理： 使用try-exclusion in页面对象进行健壮的交互。
  • 文档： 更新README并将文档字符串添加到类/函数中。

🔧 命令摘要

  • 安装依赖项： pip install -r requirements.txt
  • 安装浏览器： playwright install
  • 运行所有测试： pytest
  • 运行特定测试： pytest tests/<file>.py
  • 生成HTML报告： pytest --html=test-results/report.html
  • 生成诱惑结果： pytest --alluredir=allure-results
  • 生成诱惑报告： allure generate allure-results --clean -o allure-report
  • Open Allure报告： allure open allure-report
  • Serve Allure报告： allure serve allure-results
  • 运行MCP服务器： python server.py

🚀 未来的增强功能

该框架被设计为可扩展的。计划在未来实施以下增强功能：

1.API集成

  • REST API测试：添加对使用Python的API端点测试的支持 requests 库或Playwright的API路由处理
  • API测试层：创建专用的API测试文件(tests/api/)
  • API实用程序：实施 utils/api_client.py 用于可重复使用的API调用
  • 响应验证：将API响应与预期架构进行比较
# Planned API test structure
def test_api_create_user():
    response = api_client.post('/api/users', data=user_payload)
    assert response.status_code == 201
    assert response.json()['id'] is not None

2.数据库集成

  • 数据库连接：添加SQLAlchemy或直接数据库连接（PostgreSQL、MySQL）
  • 数据固定装置：从数据库而不是JSON文件加载测试数据
  • 状态验证：通过查询数据库验证应用程序状态
  • 测试数据管理：创建用于播种和清理测试数据的实用程序
# Planned database fixture
@pytest.fixture
def db_connection():
    return create_engine('postgresql://user:pass@localhost/testdb')

def test_verify_user_in_database(db_connection):
    result = db_connection.execute("SELECT * FROM users WHERE username = 'test'")
    assert result.fetchone() is not None

3.CI/CD的实施

  • GitHub 操作：添加 .github/workflows/ 配备自动化测试流程
  • Jenkins管道：添加 Jenkinsfile 用于企业CI/CD集成
  • Docker支持：添加 Dockerfile 和 docker-compose.yml 用于容器化执行
  • 云执行：支持Sauce Labs、BrowserStack或LambdaTest执行

CI/CD框图

┌─────────────────────────────────────────────────────────────────────────────┐
│                        CI/CD Pipeline Architecture                           │
└─────────────────────────────────────────────────────────────────────────────┘

    ┌──────────┐     ┌──────────┐     ┌──────────┐     ┌──────────┐
    │   CODE   │     │  BUILD   │     │   TEST   │     │  DEPLOY  │
    │  PUSH    │────▶│  STAGE   │────▶│  STAGE   │────▶│  STAGE   │
    └──────────┘     └──────────┘     └──────────┘     └──────────┘
         │                │                │                │
         ▼                ▼                ▼                ▼
    ┌──────────┐     ┌──────────┐     ┌──────────┐     ┌──────────┐
    │  GitHub  │     │  Install │     │  Run     │     │  Publish │
    │  Trigger │     │  Deps    │     │  Tests   │     │  Reports │
    └──────────┘     └──────────┘     └──────────┘     └──────────┘
                              │                │                │
                              ▼                ▼                ▼
                         ┌──────────┐     ┌──────────┐     ┌──────────┐
                         │ Playwright│    │ Allure   │     │  Slack/  │
                         │ Install   │    │ Report   │     │  Email   │
                         │ Browsers  │    │ HTML     │     │  Notify  │
                         └──────────┘     └──────────┘     └──────────┘

增强架构框图

┌─────────────────────────────────────────────────────────────────────────────┐
│                    Enhanced Framework Architecture                          │
└─────────────────────────────────────────────────────────────────────────────┘

                              ┌─────────────────┐
                              │   CI/CD Server   │
                              │ (GitHub Actions) │
                              └────────┬────────┘
                                       │
                    ┌──────────────────┼──────────────────┐
                    │                  │                  │
              ┌─────▼─────┐    ┌──────▼──────┐    ┌─────▼─────┐
              │   Docker  │    │   Pytest    │    │  MCP AI   │
              │  Container│───▶│   Runner    │───▶│  Server   │
              └───────────┘    └──────┬──────┘    └───────────┘
                                       │
         ┌────────────────────────────┼────────────────────────────┐
         │                            │                            │
   ┌─────▼─────┐              ┌──────▼──────┐              ┌─────▼─────┐
   │   UI/API  │              │  Database   │              │  Reports  │
   │   Tests   │              │   Tests     │              │  (Allure) │
   └─────┬─────┘              └──────┬──────┘              └───────────┘
         │                            │
    ┌────▼────┐                 ┌────▼────┐
    │Playwright│                │ SQLAlchemy│
    │Browser  │                │Database  │
    └─────────┘                 └──────────┘

实施路线图

阶段 功能 描述 优先级
阶段1 API测试 添加REST API测试支持 高
第二阶段 数据库集成 连接到PostgreSQL/MySQL 中等
第3阶段 CI/CD管道 GitHub操作工作流 高
第4阶段 Docker支持 容器化测试执行 中等
第5阶段 云集成 Sauce Labs/BrowserStack 低

GitHub操作工作流示例

name: Playwright Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set up Python
        uses: actions/setup-python@v4
        with:
          python-version: '3.11'
      - name: Install dependencies
        run: |
          pip install -r requirements.txt
          playwright install --with-deps
      - name: Run tests
        run: pytest --alluredir=allure-results
      - name: Upload Allure results
        uses: actions/upload-artifact@v3
        if: always()
        with:
          name: allure-results
          path: allure-results/

🔄 CI/CD设置（GitHub操作）

该项目包括通过GitHub Actions自动执行测试。工作流每6小时运行一次测试，并在每次推送/PR上运行测试。

安装说明

1.启用GitHub操作

  1. 转到GitHub上的存储库
  2. 导航至 行动 标签
  3. 工作流将从以下位置自动检测 .github/workflows/

2.配置GitHub页面（可选）

要自动托管Allure报告，请执行以下操作：

  1. 首选 设置 → 页面
  2. 在“构建和部署”下，选择 GitHub 操作 作为来源
  3. 工作流将在每次运行后部署报告

3.手动运行工作流

  1. 首选 行动 → 剧作家预定测试
  2. 点击 运行工作流 → 运行工作流

工作流功能

特性 描述
计划运行 每6小时（协调世界时00:00、06:00、12:00、18:00）
多浏览器 Chromium、Firefox、WebKit
人工制品 诱人的结果、HTML报告、截图
自动部署 部署到主分支GitHub Pages的报告

查看结果

  • 诱惑报告：从Actions工件下载或在GitHub页面上查看
  • 测试结果：检查 行动 运行历史记录选项卡
  • 人工制品：每次运行都会生成可下载的测试工件

定制

修改 .github/workflows/playwright-tests.yml 更改：

  • 计划时间：编辑 cron 表达
  • 浏览器矩阵：添加/删除浏览器
  • 环境变量：为API密钥、URL等添加机密。

📊 CI/CD证据

本节提供了CI/CD管道执行和自动化测试运行的直观证据。

CI/CD管道执行

CI/CD报告

完整的CI/CD报告，包括详细的测试执行历史、工件和Allure报告，可在以下网址获得：

🔗 CI/CD报告

报告包括：

  • 测试执行历史
  • 诱惑力测试结果
  • HTML测试报告
  • 屏幕截图伪影
  • 生成日志和状态

🤝 贡献

遵循上述最佳实践。在提交之前，确保测试通过。使用描述性提交消息。

相关 MCP