Playwrightmcpdemo

AI驱动的测试自动化演示指南

使用Agent LLM、Playwright MCP、GitHub Copilot和GitHub Actions

这份文档提供了完整的、适合初学者的分步指南，用于设置和运行一个（项目/系统/应用等，具体根据上下文补充） AI驱动的测试自动化演示 使用免费或试用工具。

______________________________________________________________________

1. 先决条件

• 配备有电脑的 Windows 10及以上版本 或者 macOS（中文常译为“苹果电脑操作系统”或简称“苹果系统”）
• 稳定的网络连接
• 对命令行有基本的了解

______________________________________________________________________

2. 账户注册

1. GitHub

- 访问 https://github.com/ 注册 - 注册免费版 - 验证电子邮件并启用GitHub免费账户

1. GitHub Copilot（免费试用）

注 => GitHub Copilot 免费版面向无法通过组织或企业访问 Copilot 的个人开发者开放。此免费计划包括： 有限的 访问精选的Copilot功能，让您免费体验AI驱动的编码辅助。

- 访问 https://github.com/settings/copilot/features - 开始免费试用（30天） - 打开网址 - https://github.com/copilot - 您需要将链接与VS Code关联 - 打开网址：https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

______________________________________________________________________

3. 工具安装

安装 Node.js

• 从（官方/指定网站）下载LTS版本

• 使用默认设置进行安装

• 验证安装：

  node -v
  npm -v

安装Git

• 从……下载

• 使用默认设置进行安装

• 验证：

  git --version

安装VS Code

• 从……下载 https://code.visualstudio.com（Visual Studio Code 官方网站）

• 使用默认设置安装

• 安装扩展：

- GitHub Copilot - JavaScript/TypeScript 支持

______________________________________________________________________

4. 项目设置

打开终端并运行：

mkdir ai-playwright-mcp
cd ai-playwright-mcp
mkdir pages
npm init -y

安装 Playwright：

npm init playwright@latest
npx playwright install

检查 Playwright 版本：

npx playwright --version

______________________________________________________________________

5. 配置项目结构

ai-playwright-mcp/
├── package.json
├── playwright.config.js
├── tests/
│   └── example.spec.js
├── pages/
│   └── home.page.js
└── utils/
    └── helpers.js

______________________________________________________________________

6. 进行第一次写作测试

创建 tests/example.spec.js

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

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

运行测试：

npx playwright test

开放报告：

npx playwright show-report

______________________________________________________________________

7. 页面对象示例

创造 pages/home.page.js

class HomePage {
  constructor(page) {
    this.page = page;
    this.heading = page.locator("h1");
  }
  async goto() {
    await this.page.goto("https://example.com");
  }
  async getHeadingText() {
    return await this.heading.textContent();
  }
}
module.exports = HomePage;

______________________________________________________________________

8. 使用GitHub Copilot

1. 打开 VS Code
2. 安装 GitHub Copilot 扩展
3. 使用GitHub帐户登录
4. 在测试文件中输入注释：

// Test login functionality with valid credentials

Copilot 将建议测试代码 → 接受或修改

______________________________________________________________________

9. 代理大型语言模型（LLM）设置

1. 安装Agent LLM（开源选项）：

- 克隆： git clone https://github.com/Josh-XT/Agent-LLM.git - 按照说明设置与本地大型语言模型（GPT4All / llama.cpp）的连接

1. 为Playwright运行MCP服务器：

npx @playwright/mcp@latest --isolated

1. 将Connect Agent LLM连接到Playwright MCP以实现自主测试生成

______________________________________________________________________

10. 报告设置

更新 playwright.config.js

const { defineConfig } = require("@playwright/test");

module.exports = defineConfig({
  testDir: "tests",
  timeout: 30000,
  retries: 1,
  use: {
    headless: true,
    screenshot: "only-on-failure",
    video: "retain-on-failure",
    trace: "retain-on-failure",
  },
  reporter: [["html", { open: "never" }]],
});

运行测试并打开报告：

npx playwright test
npx playwright show-report

______________________________________________________________________

11. GitHub仓库设置

初始化git：

git init
git add .
git commit -m "Initial commit"

连接到GitHub：

git remote add origin https://github.com//ai-playwright-mcp.git
git push -u origin main

______________________________________________________________________

12. GitHub Actions CI（持续集成）设置

创建文件 .github/workflows/playwright.yml

name: Playwright Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "18"
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npm test
      - name: Upload Playwright report
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: playwright-report

在GitHub Actions标签中推送代码并查看测试结果

______________________________________________________________________

13. 实时演示流程

1. 打开 VS Code
2. 使用Copilot建议编写测试用例
3. 使用 Playwright MCP 在本地运行测试
4. 查看包含截图和追踪信息的HTML报告
5. 提交并推送到GitHub
6. 验证GitHub Actions中的CI运行情况
7. 从操作中下载报告工件

______________________________________________________________________

14. 最佳实践

• 在使用之前，请务必查看Copilot的建议
• 使用稳定的测试数据以避免不稳定的测试
• 限制免费层级的使用（Copilot 试用、GitHub Actions 分钟数）
• 将测试保持在 pages/ 和 utils/ 目录中，保持有序
• 仅在安全的测试环境中使用Agent LLM进行自主探索

______________________________________________________________________

15. 下一步行动

• 扩展登录、表单、API验证的测试
• 在GitHub Actions中尝试并行测试执行
• 尝试将API和UI测试整合在一起
• 探索使用Agent LLM的其他免费大型语言模型（LLM）

______________________________________________________________________

你准备好了

现在你拥有了一个完全可用的 基于人工智能的测试自动化演示项目 与；带有；用

• 本地剧作家测试
• GitHub Copilot 代码生成
• 大型语言模型代理的自主探索
• GitHub Actions CI/CD 流水线
• 包含截图和追踪信息的HTML报告

定期练习以增强信心，并扩大你的质量保证（QA）自动化规模。

______________________________________________________________________

非常感谢。

@Dnyaneshwar Divekar（迪维卡尔·德尼亚斯瓦尔，此为用户名或特定称谓的直接翻译，实际使用时可能需根据上下文调整）