TRAE IDE & SOLO 与 Playwright 实现网页自动化测试
本文详细介绍了如何配置和使用Playwright自动化测试工具。首先需要安装TRAEIDE、Node.js(≥18)和Python(3.8.8),然后通过终端安装uvx运行环境和Playwright库。接着在TRAEIDE中添加MCPServer-Playwright服务,并创建自定义智能体进行配置。最后可创建"网页测试助手"等智能体,通过勾选Playwright工具和相关内置
操作步骤:
1. 安装TRAE IDE
https://www.trae.cn/?utm_source=content&utm_medium=doc_mcp&utm_campaign=figma
2.安装Node.js(版本要大于18)
https://nodejs.org/en/blog/release/v20.20.0
3.安装Python(版本3.8.8)
https://www.python.org/downloads/release/python-388/
以上安装完成后,为了方便后续通过命令安装依赖,我们运行TRAE IDE软件 在菜单中 打开【终端】——【新建终端】,此时在软件页面下方出现终端窗体

-
Windows安装命令(PowerShell):
在终端执行:powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
执行 source $HOME/.local/bin/env命令, 加载 uvx 所需的运行时环境变量和初始化配置。
执行以下命令,验证是否安装成功。uvx --version - 运行 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) ... -
运行 python3 -m playwright install 命令,安装 Playwright 所需的浏览器(Chromium/Firefox/WebKit)。开始安装后,终端会展示以下内容:注:如果python3 -m playwright install 执行不成功,可以换成:python -m playwright install
-
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
-
首先打开 TRAE IDE。
-
在 IDE 模式界面中,点击界面右上角的 设置 图标,进入设置中心。或在 SOLO 模式界面中,点击对话面板右上角的 设置 图标,进入设置中心。
-
在左侧导航栏中,选择 MCP,打开 MCP 窗口。你将进入 MCP 市场。在 MCP 窗口的右上角,点击 添加 > 从市场添加。若你是首次添加 MCP Server,还可以直接点击窗口中部的 从市场添加 按钮。注:如果市场添加找不到Playwright,可以关掉杀毒软件
-
在 MCP 市场中找到 Playwright。点击右侧的 + 按钮。界面上显示 添加 MCP Server 弹窗。
-
点击 介绍页面。预览 窗口出现并展示 MCP Server - Playwright 在 GitHub 上的介绍页面。
-
滚动页面至 Configuration to use Playwright Server 部分,复制 JSON 配置内容,然后将其粘贴至 添加 MCP Server 弹窗中的配置内容输入框,配置内容中的 env 信息(例如 API Key、Token、Access Key 等字段)须替换为真实信息。
-
点击 确认 按钮。
-
添加完成后,你可以直接使用 Builder with MCP 智能体来体验 Playwright。若你希望创建一个自定义智能体,通过配置提示词和工具来使其更好地处理你的需求,请继续往下操作。

-
创建自定义智能体并为其配置 Playwright
-
智能体(Agent)是你面向不同开发场景的编程助手。你可以创建自定义智能体,通过灵活配置提示词和工具集,使其更高效地帮你完成复杂任务。
- 在 AI 对话输入框中输入 @,然后点击浮起面板底部的 创建智能体 按钮。

-
你将进入以下 创建智能体 面板。
- 配置该智能体:
- (可选) 上传智能体的头像。
- 输入智能体的名称(例如:网页测试助手)。
- (可选) 配置智能体的提示词。参考提示词如下,你可以直接使用或根据需求制订提示词。
- 在 工具-MCP 部分,仅勾选 Playwright。
- 在 工具-内置 部分,勾选 阅读、编辑、终端、预览、联网搜索。
- 点击底部的 创建 按钮。
- 配置了 MCP Server - Playwright 的智能体创建成功。点击 立即使用 按钮,开启与智能体的对话。

-
-
-
接下来看一下使用效果:

更多推荐



所有评论(0)