使用说明

Playwright JavaScript测试框架

使用Playwright和纯JavaScript的AI Agent MCP专业端到端测试框架。

概述

该项目提供了一个完全用JavaScript编写的生产就绪的Playwright测试框架，与AI Agent MCP系统集成，用于自动浏览器测试和web自动化。

特性

✅ 跨浏览器测试（Chromium、Firefox、WebKit）
✅ 100%JavaScript-不需要TypeScript
✅ 并行测试执行
✅ 带有完整跟踪的HTML报告
✅ 故障时自动截图
✅ 调试模式支持
✅ 测试代码生成（codegen）
✅ AI代理MCP集成

先决条件

Node.js：16.0.0或更高
npm：8.0.0或更高

快速开始

1.安装依赖项

cd c:\Users\91840\AiAgentPlaywright\playwright-js
npm install

2.运行测试

npm test

3.查看测试报告

npm run test:report

可用命令

命令	描述
`npm test`	运行所有测试
`npm run test:ui`	在交互式UI模式下运行测试
`npm run test:headed`	使用可见浏览器运行测试
`npm run test:debug`	在调试模式下运行测试
`npm run test:report`	查看HTML测试报告
`npm run codegen`	交互式生成测试代码

项目结构

playwright-js/
├── tests/
│   └── e2e/
│       ├── example.spec.js          # Basic example tests
│       └── navigation.spec.js       # Navigation and interaction tests
├── playwright.config.js             # Playwright configuration
├── package.json                     # Dependencies and scripts
├── playwright-report/               # Generated test reports
├── test-results/                    # Test run artifacts
└── README.md                        # This file

测试示例

基本测试

const { test, expect } = require('@playwright/test');

test('example test', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

具有多个测试的测试套件

test.describe('Login Tests', () => {
  test('user can login', async ({ page }) => {
    await page.goto('https://example.com/login');
    await page.fill('#username', 'user@example.com');
    await page.fill('#password', 'password');
    await page.click('#login-button');
    await expect(page).toHaveURL(/dashboard/);
  });
});

配置（descripter.config.js）

关键设置：

testDir: ./tests/e2e -测试地点
完全平行: true -并行运行测试
记者: html -生成HTML报告
截图: only-on-failure -捕获故障截图
痕迹: on-first-retry -记录调试痕迹

支持的浏览器：

铬 -全力支持
火狐 -全力支持
引擎 -全力支持

浏览器自动化

导航到页面

await page.goto('https://example.com');

查找元素

// By role
const button = page.getByRole('button', { name: 'Submit' });

// By text
const link = page.getByText('Click here');

// By CSS selector
const input = page.locator('#email');

// By XPath
const element = page.locator('//button[text()="Save"]');

与元素互动

// Click
await button.click();

// Type text
await input.fill('user@example.com');

// Select dropdown
await select.selectOption('Option 1');

// Check checkbox
await checkbox.check();

断言

// Check visibility
await expect(element).toBeVisible();

// Check text content
await expect(element).toHaveText('Expected Text');

// Check URL
await expect(page).toHaveURL(/dashboard/);

// Check title
await expect(page).toHaveTitle('Page Title');

调试

在调试模式下运行

npm run test:debug

暂停执行

await page.pause(); // Execution pauses and Playwright Inspector opens

运行单项测试

npx playwright test tests/e2e/example.spec.js -g "test name"

查看痕迹

测试失败后，查看跟踪：

npm run test:report

测试报告

运行测试后，查看HTML报告：

npm run test:report

报告显示：

测试状态（通过/失败）
执行时间
故障截图
视频录制（如果启用）
完整的浏览器跟踪

CI/CD集成

为了实现持续集成，请设置 CI 环境变量：

CI=true npm test

这将配置：

连续测试执行（1名工人）
自动重试（最多2次）
详细报告

GitHub操作示例

- name: Run Playwright Tests
  run: npm test
  env:
    CI: true

AI代理MCP集成

该项目与MCP（模型上下文协议）服务器集成，以实现：

从AI代理执行远程测试
基于需求的动态测试生成
实时测试结果流
通过MCP协议实现浏览器自动化

常见问题

测试超时

增加配置中的超时时间： timeout: 30000
使用 await page.waitForLoadState() 在断言之前

未找到元素

使用 await page.waitForSelector() 交互前
检查元素是否可见 await expect(element).toBeVisible()

CI中的测试失败，但在本地通过

集 CI=true npm test 模拟CI环境
检查时间问题并添加适当的等待时间

最佳实践

使用有意义的测试名称 -描述正在测试的内容
保持测试的独立性 -每个测试都不应依赖于其他测试
使用页面对象 -创建用于常见交互的辅助模块
添加适当的等待 -使用显式等待而不是硬编码延迟
测试用户流 -关注真实的用户工作流程，而不是实施细节

资源

许可证

麻省理工学院

支持

对于问题和疑问：

检查剧作家文档
审查测试输出和跟踪
使用调试模式逐步完成测试
有关代理集成，请参阅MCP协议文档