玩转 MCP 第二弹｜一文教你用 Trae 实现网页自动化测试

TRAE
2,312 阅读9分钟

上一期，我们介绍了如何通过使用 MCP Server - Figma AI Bridge，轻松将你的 Figma 设计稿转换为整洁的前端代码，并生成相应的网页，让设计到落地的效率飙升！快没看过的小伙伴可以戳这里补课哦👉（玩转 MCP 第一弹 ）

在现代化的 Web 开发中，自动化测试已成为确保应用质量、加速迭代周期的关键环节。Playwright 凭借其跨浏览器支持、强大的自动化能力以及灵活的 API，成为自动化端到端测试的理想选择。本期「玩转 MCP 」将详细介绍如何在 Trae IDE 中高效集成 Playwright 这一 MCP Server，构建自动化测试解决方案，帮助你快速验证网页的交互逻辑，减少人工测试成本，提升整体开发效率！

让我们开始吧！

效果展示

以下为部分使用 Trae IDE 自动化测试网页的效果展示：

操作步骤

跟随教程，在项目中集成 MCP Server - Playwright，配置智能体，然后使用指令来测试网页。

第一步：安装 Trae IDE

Trae IDE 与 AI 深度集成，提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力。使用 Trae 开发项目时，你可以与 AI 灵活协作，提升开发效率。前往 Trae CN 官网，下载 Trae IDE 的安装包，然后将其安装至你的计算机。

第二步：配置 MCP Sever 的运行环境（已安装的小伙伴可跳至第三步）

为确保正常启动 MCP Server，你需要安装以下依赖： 

  • npx：依赖于 Node.js，版本需大于等于 18。 
  • uvx：命令行工具，用于快速运行 Python 脚本。 

首先，为便于后续通过命令行安装依赖，让我们在 Trae IDE 中打开终端。步骤如下：

  1. 启动 Trae IDE。

  2. 在顶部菜单栏中，点击 终端 > 新建终端， 界面底部显示 终端 面板。

    打开终端后，使用以下步骤安装 uvx：

1.前往  Python 官网，下载并安装 Python 3.8 或更高版本。 

  1. 安装完成后，在终端中执行以下命令确认是否安装成功。 

     python3 --version

     若安装成功，终端中会输出已安装的 Python 的版本号。 

  2. 执行以下命令，安装 uv（包含 uvx）。

    macOS / Linux 安装命令： 

    •      curl -LsSf https://astral.sh/uv/install.sh | sh

      Windows 安装命令（PowerShell）： 

    •        powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

  3. 执行 source $HOME/.local/bin/env 命令，加载 uvx 所需的运行时环境变量和初始化配置。

  4. 执行以下命令，验证是否安装成功。 

      uvx --version

      若安装成功，终端中会输出已安装的 uvx 的版本号。 

uvx 安装完成后，使用以下步骤安装 Node.js：

  1. 请前往 Node.js 官网，下载并安装 Node.js 18 或更高版本。 

  2. 安装完成后，在终端中运行以下命令确认是否安装成功。 

      node -v
  npx -v

    若安装成功，终端中会输出已安装的 Node.js 的版本号，例如：  3. v18.19.0 10.2.0

  3. 重启 Trae IDE 以使 Node.js 生效。

第三步：安装 Playwright 

若想在 Trae IDE 中使用 Playwright 进行网页自动化测试，需要先在本地计算机上完成 Playwright 的安装。步骤如下：

  1. 运行 pip3 install playwright 命令，安装 Playwright 的 Python 客户端库，使其可以在 Python 代码中使用 playwright 模块。开始安装后，终端会展示以下内容：

       xxxxxxxxxxx ~ % pip3 install playwright
   Collecting playwright
     Obtaining dependency information for playwright from https://files.pythonhosted.org/packages/32/4a/5f2ff6866bdf88e86147930b0be86b227f3691f4eb01daad5198302a8cbe/playwright-1.51.0-py3-none-macosx_11_0_arm64.whl.metadata
     Downloading playwright-1.51.0-py3-none-macosx_11_0_arm64.whl.metadata (3.5 kB)
   Collecting pyee<13,>=12 (from playwright)
     Obtaining dependency information for pyee<13,>=12 from https://files.pythonhosted.org/packages/25/68/7e150cba9eeffdeb3c5cecdb6896d70c8edd46ce41c0491e12fb2b2256ff/pyee-12.1.1-py3-none-any.whl.metadata
     Downloading pyee-12.1.1-py3-none-any.whl.metadata (2.9 kB)
     ...
   ```

  2. 运行 python3 -m playwright install 命令，安装 Playwright 所需的浏览器（Chromium/Firefox/WebKit）。开始安装后，终端会展示以下内容：

       xxxxxxxxxxx ~ % python3 -m playwright install
   Downloading Chromium 134.0.6998.35 (playwright build v1161) from https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1161/chromium-mac-arm64.zip
   124.1 MiB [==================  ] 89% 3.5sError: Request to https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1161/chromium-mac-arm64.zip timed out after 30000ms
       at ClientRequest.rejectOnTimeout (/Library/Frameworks/Python.framework/Versions/3.12/lib/python3.12/site-packages/playwright/driver/package/lib/server/utils/network.js:76:15)
   ...
   ```

第四步：添加 MCP Server - Playwright

  1. 打开 Trae IDE。

  2. 在 AI 对话框的右上角，点击 设置 图标，然后在菜单中选择 MCP。 

    界面上显示 MCP 页签。

  3. 在 MCP 页签中，点击  + 添加 MCP Servers 按钮。若你已添加过 MCP Server，则点击右侧区域的  + 添加按钮。

  4. 在MCP Server 市场搜索关键词，找到 Playwright，然后点击右侧的  +  按钮。

  5. 界面上显示 添加 MCP Server 弹窗，点击 介绍页面。

  6. 滚动页面至 Configuration to use Playwright Server 部分，复制 JSON 配置内容，然后将其粘贴至 添加 MCP Server 弹窗中的配置内容输入框，

  7. 点击底部的 确认 按钮。

     MCP Server - Playwright 配置完成，并已自动添加至内置智能体 - Builder with MCP。

你可以回到 AI 对话框，直接使用 Builder with MCP 来体验 Playwright（参考“第七步”）。若你希望创建一个自定义智能体，通过配置提示词和工具来使其更好地处理你的需求，请继续往下操作。

第五步：开启 “自动运行” 功能

为使测试过程最大限度自动化，我们可以使用 Trae IDE 的 “自动运行”（Auto-Run）功能。开启后，智能体会自动运行模型认为安全且不在黑名单中的命令和 MCP 服务器。智能体提出建议执行的命令时，如果命令前缀在黑名单中，执行命令前会请求用户确认。创建自定义智能体前，先为其开启该功能，步骤如下：

  1. 在 AI 对话框的右上角，点击 设置 图标，然后在菜单中选择 智能体。

      界面上显示 智能体 页签。

  2. 滚动至 自动运行 部分，打开开关，然后在弹窗中点击 确认。  “自动运行” 功能已开启。勿关闭 智能体 页签，我们将继续在该页签上创建智能体。

第六步：创建自定义智能体并为其配置 Playwright

智能体（Agent）是你面向不同开发场景的编程助手。你可以创建自定义智能体，通过灵活配置提示词和工具集，使其更高效地帮你完成复杂任务。

  1. 在 智能体 页签右侧区域，点击  + 创建智能体 按钮。

     智能体配置面板已打开。

  2. 配置该智能体：

    1. (可选) 上传智能体的头像。

    2. 输入智能体的名称（例如：网页测试助手）。

    3. (可选) 配置智能体的提示词。参考提示词如下，你可以直接使用或根据需求制订提示词。

         你是一个专业的网页自动化测试专家，精通 Playwright 自动化测试工具。你的任务是根据用户的指令帮助其测试网页。

    4. 在 工具- MCP 部分，仅勾选 Playwright。

    5. 在 工具- 内置 部分，勾选 文件系统 （File System） 、终端（Terminal）、联网搜索（Web Search） 。三个内置工具的作用如下：

    6. 文件系统：对文件进行增删改查。 

    7. 终端：在终端运行命令，并获取命令的运行状态和结果。 

    8. 联网搜索：搜索和用户任务相关的网页内容。

    9.   配置完成后的面板如下：

  3. 点击底部的 创建 按钮。

    配置了 MCP Server - Playwright 的智能体创建成功。点击 立即使用 按钮，开启与智能体的对话。

第七步：开启对话，自动测试网页

在上一环节中，点击 立即使用 按钮后，系统会自动跳转至 AI 对话框，并默认选用 网页测试助手 智能体（若未创建自定义智能体，则使用 Builder with MCP）。你可以与该智能体对话，描述你的测试需求，智能体会调用 Playwright 提供的工具和服务来自动执行任务。步骤如下：

  1. 在本地新建一个文件夹，然后在 Trae IDE 打开它。

  2. 在 AI 对话输入框右下角，选择你想使用的模型（本教程使用 DeepSeek-V3-0324）。

  3. 在输入框中粘贴待测试页面的 URL（例如：docs.trae.com.cn/ide/model-c…

  4. 输入测试指令并发送。例如：打开该页面、打开该页面并截图、打开该页面并点击页面上的超链接，等等。

    提示： 你可以参考 Playwright 支持的能力来设计指令。  Trae IDE 将调用 Playwright MCP Server 中的工具和服务完成相应操作。以下输出过程供参考：

参考信息：Playwright 支持的能力

Playwright MCP Server 支持的能力如下：

API 方法能力
start_codegen_session开始一个新的代码生成会话来记录 Playwright 操作。
end_codegen_session结束代码生成会话并生成测试文件。
get_codegen_session获取关于代码生成会话的信息。
clear_codegen_session清除代码生成会话而不生成测试文件。
playwright_navigate导航到一个 URL。
playwright_screenshot对当前页面或特定元素进行截图。
playwright_click点击页面上的元素。
playwright_iframe_click点击 iframe 中的元素。
playwright_fill填写输入字段。
playwright_select使用 Select 标签选择页面上的元素。
playwright_hover悬停在页面的元素上。
playwright_evaluate在浏览器控制台执行 JavaScript。
playwright_console_logs检索浏览器的控制台日志（带过滤选项）。
playwright_close关闭浏览器并释放所有资源。
playwright_get执行 HTTP GET 请求。
playwright_post执行 HTTP POST 请求。
playwright_put执行 HTTP PUT 请求。
playwright_patch执行 HTTP PATCH 请求。
playwright_delete执行 HTTP DELETE 请求。
playwright_expect_response要求 Playwright 开始等待 HTTP 响应。
playwright_assert_response等待并验证先前初始化的 HTTP 响应等待操作。
playwright_custom_user_agent为浏览器设置自定义 User Agent。
playwright_get_visible_text获取当前页面的可见文本内容。
playwright_get_visible_html获取当前页面的 HTML 内容。
playwright_go_back在浏览器历史中后退。
playwright_go_forward在浏览器历史中前进。
playwright_drag将元素拖动到目标位置。
playwright_press_key按下键盘键。
playwright_save_as_pdf将当前页面保存为 PDF 文件。
avatar
文章
阅读
粉丝