摘要：上一期，我们介绍了如何通过使用 MCP Server - Figma AI Bridge，轻松将你的 Figma 设计稿转换为整洁的前端代码，并生成相应的网页，让设计到落地的效率飙升！快没看过的小伙伴可以戳这里补课哦👉
玩转MCP第一弹｜手把手教你将 Figma 设计稿转化为前端代码
在现代化的 Web 开发中，自动化测试已成为确保应用质量、加速迭代周期的关键环节。Playwright 凭借其跨浏览器支持、强大的自动化能力以及灵活的 API，成为自动化端到端测试的理想选择。本期「玩转 MCP 」将详细介绍如何在 Trae IDE 中高效集成 Playwright 这一 MCP Server，构建自动化测试解决方案，帮助你快速验证网页的交互逻辑，减少人工测试成本，提升整体开发效率！（完整内容同步发布于官方文档站，想在电脑跟练的小伙伴也可以通过这里访问呦~，链接：）
让我们开始吧！
效果展示
以下为部分使用 Trae IDE 自动化测试网页的效果展示：
● 打开网页：该示例中，Trae IDE 自动打开了页面。
● 打开网页并点击页面上的超链接：该示例中，Trae IDE 自动打开了页面，
并点击了 “MCP 官方文档” 这一添加了超链接的文字。
操作步骤
跟随教程，在项目中集成 MCP Server - Playwright，配置智能体，然后使用指令来测试网页。
第一步：安装 Trae IDE
Trae IDE 与 AI 深度集成，提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力。使用 Trae 开发项目时，你可以与 AI 灵活协作，提升开发效率。前往 Trae CN 官网（链接：https://sourl.cn/vb4Tsd），下载 Trae IDE 的安装包，然后将其安装至你的计算机。
第二步：配置 MCP Sever 的运行环境（已安装的小伙伴可跳至第三步）
为确保正常启动 MCP Server，你需要安装以下依赖：
● npx：依赖于 Node.js，版本需大于等于 18。
● uvx：命令行工具，用于快速运行 Python 脚本。
首先，为便于后续通过命令行安装依赖，让我们在 Trae IDE 中打开终端。步骤如下：
1. 启动 Trae IDE。
2. 在顶部菜单栏中，点击终端 > 新建终端，界面底部显示终端面板。
打开终端后，使用以下步骤安装 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 | shWindows 安装命令（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.03. 重启 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页签。
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. 配置该智能体：
● (可选) 上传智能体的头像。
● 输入智能体的名称（例如：网页测试助手）。
● (可选) 配置智能体的提示词。参考提示词如下，你可以直接使用或根据需求制订提示词。
你是一个专业的网页自动化测试专家，精通 Playwright 自动化测试工具。你的任务是根据用户的指令帮助其测试网页。● 在 工具-MCP部分，仅勾选Playwright。
● 在 工具-内置部分，勾选文件系统（File System）、终端（Terminal）、联网搜索（Web Search）。三个内置工具的作用如下：
文件系统：对文件进行增删改查。
终端：在终端运行命令，并获取命令的运行状态和结果。
联网搜索：搜索和用户任务相关的网页内容。
配置完成后的面板如下：
3. 点击底部的创建按钮。
配置了 MCP Server - Playwright 的智能体创建成功。点击 立即使用按钮，开启与智能体的对话。
第七步：开启对话，自动测试网页
在上一环节中，点击 立即使用按钮后，系统会自动跳转至 AI 对话框，并默认选用网页测试助手智能体（若未创建自定义智能体，则使用Builder with MCP）。你可以与该智能体对话，描述你的测试需求，智能体会调用 Playwright 提供的工具和服务来自动执行任务。步骤如下：
1. 在本地新建一个文件夹，然后在 Trae IDE （链接：https://sourl.cn/vb4Tsd）中打开它。
2. 在 AI 对话输入框右下角，选择你想使用的模型（本教程使用 DeepSeek-V3-0324）。
3. 在输入框中粘贴待测试页面的 URL（例如：https://docs.trae.com.cn/ide/model-context-protocol）。
4. 输入测试指令并发送。例如：打开该页面、打开该页面并截图、打开该页面并点击页面上的超链接，等等。
提示
你可以参考 Playwright 支持的能力来设计指令。
Trae IDE 将调用 Playwright MCP Server 中的工具和服务完成相应操作。以下输出过程供参考：
参考信息：
Playwright 支持的能力
Playwright MCP Server 支持的能力如下：
借助 Trae IDE 的模型上下文协议（MCP）功能轻松实现了网页自动化测试，你是否也跃跃欲试，想用 MCP 实现创意需求？
来源：字节跳动技术团队