MCP 教程：一文教你用 Trae 实现网页自动化测试

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

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

让我们开始吧！

01 效果展示

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

• 打开网页：该示例中，Trae IDE自动打开了页面。

https://docs.trae.com.cn/ide/model-context-protocol 

• 打开网页并点击页面上的超链接：该示例中，Trae IDE 自动打开了页面，

https://docs.trae.com.cn/ide/model-context-protocol 

并点击了 “MCP 官方文档” 这一添加了超链接的文字。

02 操作步骤

跟随教程，在项目中集成 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 中打开终端。步骤如下：

• 启动 Trae IDE。

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

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

• 前往 Python 官网（链接：https://www.python.org/downloads/），下载并安装 Python 3.8 或更高版本。

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

python3 --version

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

• 执行以下命令，安装 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"

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

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

uvx --version

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

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

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

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

node  -vnpx -v

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

v18.1910.2.0

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

第三步：安装 Playwright 

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

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

xxxxxxxxxxx ~ % pip3 install playwrightCollecting playwrightObtaining dependency information for playwright from https://files.pythonhosted.org/packages/32/4a/5f2ff6866bdf88e86147930b0be86b227f3691f4eb01daad5198302a8cbe/playwright-1.51.0-py3-none-macosx_11_0_arm64.whl.metadataDownloading 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)  ...

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

xxxxxxxxxxx ~ % python3 -m playwright installDownloading Chromium 134.0.6998.35 (playwright build v1161) from https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1161/chromium-mac-arm64.zip124.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

• 打开 Trae IDE。

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

界面上显示 MCP 页签。

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

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

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

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

• 点击底部的 确认 按钮。

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

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

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

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

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

界面上显示 智能体 页签。

• 滚动至 自动运行 部分，打开开关，然后在弹窗中点击 确认。

“自动运行” 功能已开启。勿关闭 智能体 页签，我们将继续在该页签上创建智能体。

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

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

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

智能体配置面板已打开。

• 配置该智能体：

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

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

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

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

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

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

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

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

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

  配置完成后的面板如下：

• 点击底部的 创建 按钮。

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

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

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

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

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

• 在输入框中粘贴待测试页面的 URL（例如：https://docs.trae.com.cn/ide/model-context-protocol）。

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

提示

你可以参考 Playwright 支持的能力来设计指令。

Trae IDE 将调用 Playwright MCP Server 中的工具和服务完成相应操作。以下输出过程供参考：

03 参考信息

Playwright MCP Server 支持的能力如下：