写点什么

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

  • 2025-05-14
    北京
  • 本文字数:3610 字

    阅读完需:约 12 分钟

大小:1.33M时长:07:46
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 支持的能力如下:


2025-05-14 19:164982

评论

发布
暂无评论

粗糙的草稿编辑成文章的五个步骤

董一凡

写作

如何度量敏捷开发团队

Yanel 说敏捷产品

敏捷 敏捷开发

学会用"云—雨—伞"引导敏捷实践

Yanel 说敏捷产品

敏捷 敏捷开发

从"远程工作"到"分布式团队"

Yanel 说敏捷产品

项目管理 敏捷 敏捷开发

职场寒冬,给你讲四个小故事

池建强

人生 职场

我的理财小心得

史前靓仔

自动化测试框架知识,读这一篇就够了!

禅道项目管理

程序员 DevOps 自动化 测试

流量的战场,如何做裂变?

Yanel 说敏捷产品

产品 产品经理 产品设计 产品开发 产品推荐

Mac效率配置指南

Winann

macos 效率 效率工具 Mac

常用电脑软件清单

彭宏豪95

软件 工具 windows 生产力

PyTorch 1.5 发布,与 AWS 合作 TorchServe

神经星星

人工智能 facebook 微软 亚马逊云 AWS Lightsail 工具

DIY 可用性测试

Yanel 说敏捷产品

产品 产品经理 产品设计 测试 产品推荐

聊聊“坚持”这件事

小天同学

个人成长 写作 坚持 自控力

Oracle 将为职场歧视买单,4100 位女员工集体诉讼

神经星星

oracle 互联网巨头 互联网 职场

tcp_tw_recycle 【坑】

孤星可

TCP 服务端

python 文章中图片下载

Flychen

为什么公众号订阅没有「分组」的功能?

Fenng

微信公众平台 产品设计

2020版Kubernetes快速上手指南,让你所见即所得

ABC实验室

Kubernetes 容器 云原生 群集安装 新手指南

使用JUnit、AssertJ和Mockito编写单元测试和实践TDD (二)为什么要写单元测试

编程道与术

编程 编程语言 TDD 代码审查 单元测试

变化在加速,你的机会和挑战在哪里?

Yanel 说敏捷产品

产品 产品经理 产品设计 产品开发 产品推荐

"深刻创新"八步法

Yanel 说敏捷产品

产品 产品经理 产品设计 产品开发 产品推荐

企业经营 "造物" "造人" "造钱"三阶段

Yanel 说敏捷产品

敏捷 敏捷开发

你懂什么是"结对测试"么?

Yanel 说敏捷产品

产品 产品经理 产品设计 产品开发 产品推荐

人是一切

Neco.W

个人感想 感悟

游戏夜读 | 游戏数据分析师

game1night

做一个"靠谱"的敏捷教练

Yanel 说敏捷产品

敏捷 敏捷开发

扎心!天天写代码,方向真的对吗?

Apache Flink

大数据 flink 流计算 实时计算

Linux-常用命令

Flychen

Linux

你必须了解的产品经济学

Yanel 说敏捷产品

产品 产品经理 产品设计 产品开发 产品推荐

Netty 源码解析(七): NioEventLoop 工作流程

猿灯塔

我是如何读完技术书,然后忘得一干二净的

ayesd

读书 读书方式

MCP 教程:一文教你用 Trae 实现网页自动化测试_字节跳动_Trae_InfoQ精选文章