AI导哈

AI驱动测试自动化工具

该文档提供了一套使用免费或试用工具（如Agent LLM、Playwright MCP、GitHub Copilot和GitHub Actions）设置和运行AI驱动测试自动化演示的完整指南，适用于初学者。

  • by DD-TestEningeer
  • 本地部署
  • 更新于
在 GitHub 查看 DD-TestEningeer/PlaywrightMCPDemo

使用说明

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

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

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

1. 先决条件

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

2. 账户注册

  1. GitHub

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

  2. 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

安装Git

安装VS Code

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）的连接

  2. 为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/<your-username>/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（迪维卡尔·德尼亚斯瓦尔，此为用户名或特定称谓的直接翻译，实际使用时可能需根据上下文调整）

相关 MCP