MCP:Trae中集成Playwright 实现网页自动化测试

 

     Trae IDE 可以通过智能问答的形式补齐代码，纠正程序中的错误，根据用户的自然语言，实现AI自动编程。近期使用了一下Trae,发现很强大。我把一个有前后端的项目导入Trae IDE，当时还有一些报错，但是很快在Trae 的提示下去纠错，前后端程序很快就运行起来了。今天跟着教程实操了一下Trae 在测试领域的应用，通过在项目中集成 MCP Server - Playwright，配置智能体，然后使用指令来测试网页，非常智能好用。

一 安装Trae IDE

在Trae官网https://www.trae.cn/?utm_source=content&utm_medium=doc_mcp&utm_campaign=playwright下载 Trae IDE 的安装包，根据提示，安装即可。

二 配置 MCP Sever 的运行环境

1.python3：去python官网下载安装python3.8或更高的版本。

2.npx：依赖于node.js，node.js版本需要大于18。安装成功以后，输入下面命令会展示其版本。

3.uvx: 命令行工具，用于快速运行Python脚本。uv中包含uvx，

安装命令 mac & linux：

brew install uv

uvx如果安装完成后，如果提示 uv 不在 PATH，需要手动加路径：

echo 'export PATH="$HOME/.cargo/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

安装成功以后，配置PATH，最后检查安装的uvx的版本，操作命令:uvx --version

 

 

安装命令 windows：

打开 Windows 的 PowerShell（按下 Win + X，选择 “Windows PowerShell” 或 “终端”）

打开powershell，运行下面的命令行

irm https://astral.sh/uv/install.ps1 | iex

 windows安装完成后，重启 PowerShell 或终端，即可使用 uv 命令（如 uv --version 验证安装）

 

 

三 安装Playwright

简介：

Playwright 是 微软 开发的一个 跨浏览器端到端（E2E）自动化测试框架，主要用来测试 Web 应用，但后来也扩展到 移动 Web 和 API 测试。

特点

• 跨浏览器支持
  支持 Chromium（Chrome、Edge）、WebKit（Safari）、Firefox
  → 同一个测试脚本可以跑在不同内核浏览器上验证兼容性
• 多语言 API
  支持 JavaScript / TypeScript、Python、Java、.NET
• 强大的自动等待机制
  元素加载、网络响应、动画结束等都自动等待，不需要写 sleep()
• 支持无头（headless）与有头模式
  → 可用于 CI/CD，也可本地可视化调试
• 跨平台
  Windows、macOS、Linux 都能运行

安装Playwright：

如果想在Trae 中应用Playwright 进行网页自动化测试，需要通过命令先安装Playwright。

1）pip3 install playwright 命令，安装 Playwright 的 Python 客户端库,使得python中可以使用Playwright。

pip install playwright

 

2）python3 -m playwright install命令，安装Playwright 所需的浏览器（Chromium/Firefox/WebKit）。

 

python -m playwright install

如果在安装浏览器插件的时候没有出现安装过程，说明当前已经正确安装了

测试一下当前所需的浏览器是否安装成功的脚本

# from playwright.sync import sync_playwrightfrom playwright import sync_api
from playwright.sync_api import sync_playwright, Page, Browser, Requestdef check_browsers():with sync_playwright() as p:# 检查Chromiumtry:browser = p.chromium.launch(headless=True)  # headless=True表示无界面运行browser.close()print("Chromium 安装正常")except Exception as e:print(f"Chromium 安装异常: {e}")# 检查Firefoxtry:browser = p.firefox.launch(headless=True)browser.close()print("Firefox 安装正常")except Exception as e:print(f"Firefox 安装异常: {e}")# 检查WebKittry:browser = p.webkit.launch(headless=True)browser.close()print("WebKit 安装正常")except Exception as e:print(f"WebKit 安装异常: {e}")if __name__ == "__main__":check_browsers()

运行结果如下：

 

四 添加 MCP Server - Playwright

1.打开Trae IDE--右侧设置---菜单切换选MCP

 

2.在MCP页面--添加--从市场添加--搜索Playwright

 

3.点击介绍页面，跳转到GitHub上关于Playwright的介绍

 

 

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

 

 

 

 

 

 

5.点击底部【确认】按钮，此时MCP Server-Playwright 配置完成，并已自动添加到内置的智能体内。

6.返回AI对话框，直接@Builder with MCP 来体验 Playwright。

五 开启“自动运行”功能

开启的目的：智能体自动运行模型认为安全且不在黑名单中的命令和MCP服务。智能体提出建议执行的命令时，如果命令前缀在黑名单中，执行命令前会请求用户确认。创建自定义智能体时，先为其开启该功能。操作如下：

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

 

六 创建智能体并为其配置Playwright

1.在刚刚的智能体Tab 页面，创建智能体，填写基本信息，名称比如：网页测试助手

 

2.提示词，可以参考教程：

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

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

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

• 文件系统：对文件进行增删改查。
• 终端：在终端运行命令，并获取命令的运行状态和结果。
• 联网搜索：搜索和用户任务相关的网页内容。

 

                

 

5.点击底部【创建】按钮，配置完成，点击【立即使用】按钮，开启与智能体的对话。

 

七 开启对话，测试网页

回到AI对话框，此时可以根据Playwright支持的能力，设计指令，进行测试。

参考信息：Playwright 支持的能力

示例1:输入https://docs.trae.com.cn/ide/model-context-protocol打开这个页面的 URL，点击超链接

示例2:输入https://docs.trae.com.cn/ide/model-context-protocol 打开这个页面的 URL，并截图。

Trae IDE 会根据输入指令，创建一个项目，生成实现该功能的代码，并且自动进行网页测试。测试的截图也会存在项目中，示例2的效果如下图：

 

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 文件。