轻松掌握 MCP 第二弹｜利用 Trae 打造网页自动化测试全攻略

在上一期中，我们聊到了怎么通过 MCP Server – Figma AI Bridge，把 Figma 设计稿转变成整洁的前端代码，轻松生成网页，效率直接暴涨！如果你还没看过，可以点这里补习一下哦👉

玩转MCP第一弹｜手把手教你将 Figma 设计稿转化为前端代码

说到现代网页开发，自动化测试可是确保应用质量、加快迭代速度的重要一环。Playwright 凭借其对多浏览器的支持、超强的自动化能力和灵活的 API，成为了端到端测试的绝佳选择。本期的「玩转 MCP 」会详细讲解如何在 Trae IDE 中高效集成 Playwright，搭建自动化测试方案，帮助你快速验证网页的交互逻辑，同时减少人工测试的成本，提升开发效率！想在电脑上实践的小伙伴们可以通过这个链接访问官方文档哦~

https://sourl.cn/vb4Tsd）

那么，咱们开始吧！

效果展示

下面是使用 Trae IDE 进行网页自动化测试的一些效果展示：

● 打开网页：在这个示例中，Trae IDE 自动加载了页面。

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

### 轻松上手Trae IDE：网页自动化测试指南

首先，我们来看看Trae IDE在网页自动化测试中的一些效果展示吧！

在这个例子中，Trae IDE会自动帮你打开网页，像这样：MCP 官方文档，你只需点击一下这个超链接，就能快速进入所需页面。

接下来，让我们进入具体操作步骤。

第一步：安装 Trae IDE

Trae IDE可是个厉害的工具，它跟AI深度结合，能进行智能问答、代码自动补全，甚至还能帮你自动编写代码。想象一下，开发项目时，你可以和AI随时互动，效率绝对提升！只需访问Trae CN官网（链接：https://sourl.cn/vb4Tsd），下载Trae IDE的安装包，然后安装到你的电脑上就行了。

第二步：配置 MCP Server 的运行环境

如果你已经安装好的话，可以直接跳到第三步。为了确保MCP Server能正常运行，你需要安装以下依赖：

• ● npx：这个是基于Node.js的，版本需要大于等于18。
• ● uvx：一个命令行工具，帮助你快速运行Python脚本。

为了方便后续通过命令行安装这些依赖，我们需要在Trae IDE中打开终端。步骤超级简单：

1. 首先，启动Trae IDE。
2. 然后，在顶部菜单栏中，点击终端 > 新建终端，这样就会在界面底部看到终端面板。

这样一步步来，自动化测试就不再是难事了！

轻松安装 uvx 和 Node.js 的步骤分享

首先，打开你的终端，准备安装 uvx：

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

2. 安装完成后，回到终端，输入一个命令来确认安装是否成功。

python3 --version

如果看到 Python 的版本号，那就说明你安装成功了哦！

3. 接下来，运行下面的命令，来安装 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"

4. 接着，输入命令 source $HOME/.local/bin/env，这一步是为了加载 uvx 所需要的环境变量和配置。

5. 最后，运行下面的命令来检查是否安装成功。

uvx --version

如果你看到 uvx 的版本号，那就太好了，说明安装成功了！

完成 uvx 的安装后，接下来我们来安装 Node.js：

1. 访问 Node.js 的官网，下载并安装 Node.js 18 或更高版本。

2. 安装完成后，回到终端，运行下面的命令确认安装是否成功。

node -vnpx -v

如果成功了，终端会返回你安装的 Node.js 的版本号，比如：

v18.19.010.2.0

3. 重启 Trae IDE，让 Node.js 的安装生效。

第三步：安装 Playwright

如果你想在 Trae IDE 中使用 Playwright 来做网页自动化测试，先得在你自己的电脑上完成 Playwright 的安装。步骤如下：

1. 在终端运行 pip3 install playwright 命令，来安装 Playwright 的 Python 客户端库，这样就可以在 Python 代码里使用 playwright 模块了。安装时，终端会显示一些内容：

xxxxxxxxxxx ~ % pip3 install playwrightCollecting 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=12 (from playwright) Obtaining dependency information for pyee=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 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

1. 首先，打开 Trae IDE。

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

### 教你如何添加 MCP Server，不再麻烦！

在界面上，你会看到一个MCP的标签。

3. 在这个MCP标签下，找到+ 添加 MCP Servers的按钮。如果你之前已经添加过 MCP Server，直接点击右侧的+ 添加按钮就可以了。

4. 在MCP Server市场上，搜索“Playwright”这个关键词，然后点击旁边的 + 按钮。

5. 这时会弹出一个添加 MCP Server的窗口，点击介绍页面就可以进一步了解。

轻松配置Playwright Server，快来试试吧！

6. 滚动到页面下方，找到使用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. 在智能体选项卡的右侧，点击+ 创建智能体按钮。

轻松配置你的智能体，自动化网页测试

现在，我们来聊聊如何设置你的智能体，其实就像在给一个小助手布置工作。首先，打开智能体配置面板，接下来，我们一步步来。

第二步：来配置你的智能体吧：

• ● (可选) 上传一个头像，让你的智能体更个性化。
• ● 给智能体起个名字，比如“网页测试助手”。
• ● (可选) 设置一些提示词，你可以直接用下文的示例，或者根据自己的需求来调整。
• ● 在工具-MCP那一栏，记得只勾选Playwright。
• ● 在工具-内置那里，勾选文件系统（File System）、终端（Terminal）、联网搜索（Web Search）。这三个工具的功能分别是：

• 文件系统：可以用来管理文件，新增、删除或修改。
• 终端：你可以在这里运行命令，并查看命令的结果和状态。
• 联网搜索：帮助你在网上查找和任务相关的信息。

配置完成后，你的面板大概就长这样：

第三步：接下来，点击底部的创建按钮。

这样，就成功创建了一个配置了MCP Server – Playwright的智能体。接着，点击立即使用按钮，就可以开始和智能体对话了。

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

在上一步中，点击立即使用后，系统会自动带你到AI对话框，并默认选用网页测试助手这个智能体（如果你没有创建自定义的智能体，就会用Builder with MCP）。接下来，你可以和这个智能体交流，告诉它你的测试需求，智能体会利用Playwright提供的工具和服务来帮你自动完成任务。具体步骤如下：

1. 在本地新建一个文件夹，然后在Trae IDE（链接：https://sourl.cn/vb4Tsd）中打开它。

2. 在 AI 对话框的右下角，挑选你想要使用的模型（本教程里我们用的是 DeepSeek-V3-0324）。

3. 把你要测试的网页链接粘贴到输入框里（比如：
https://docs.trae.com.cn/ide/model-context-protocol）。

4. 输入一些测试指令并发送。比如说：打开这个页面、打开页面并截图、或者点击页面上的链接，等等。

提示

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

Trae IDE 会利用 Playwright MCP Server 中的工具和服务来完成你所要求的操作。下面的输出过程供你参考：

参考信息：

Playwright 支持的功能

Playwright MCP Server 能够支持的功能如下：

用 Trae IDE 实现网页自动化测试，轻松搞定创意需求！

想知道怎么用 Trae IDE 的模型上下文协议（MCP）来搞定网页自动化测试吗？其实，这个功能真的很强大，能让你轻松实现各类创意需求。你是不是也想试试呢？