写点什么

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:164901

评论

发布
暂无评论

从0开始:活动打卡小程序开发笔记

CC同学

叹服!阿里自述SpringCloud微服务:入门+实战+案例

Java 架构 微服务 Spring Cloud

Zero-ETL、大模型和数据工程的未来

Baihai IDP

人工智能 大模型 数据工程 企业号 5 月 PK 榜 LLMs

数说热点 | 跟着《长月烬明》起飞,今年各地文旅主打的就是一个听劝

MobTech袤博科技

Github高赞!Alibaba最新亿级并发系统架构(2023 版全彩小册)

Java你猿哥

Java 架构 分布式 高并发 架构设计

面试官:如何保证 RabbitMQ 的消息可靠性

Java 面试 RabbitMQ 消息队列 消息中间件

太强了!阿里人用138个案例讲明白了Spring全家桶+Docker+MQ

Java spring 微服务 Spring Cloud Spring Boot

第四范式开源强化学习研究通用框架,支持单智能体、多智能体训练,还可训练自然语言任务!训练速度提升17%

Geek_32eb82

SpringBoot 项目解决跨域的几种方案

Java Spring Boot

分享:集群吞吐量以1抵5,车企MySQL八大痛点的解决方案

OceanBase 数据库

数据库 oceanbase

全球首个开发者村“开村”!数字之光在何处点亮?

白洞计划

病假单|病假条|体检报告|诊断证明书|病历证明|医院化验单|ct报告|b超单|怀孕检查

病假条病假单

面试被Spring Cloud拿捏?莫慌,阿里人用五个模块讲明白了SpringCloud微服务架构

Java 架构 微服务 Spring Cloud

小红书如何应对万亿级社交网络关系挑战?图存储系统 REDtao 来了!

小红书技术REDtech

云原生 存储 图数据库 跨云多活

架构师必备!阿里P8耗时6个月手码架构师进阶笔记真的香

Java你猿哥

架构 前端架构 架构设计 架构师 后端架构

多种文件清理:Disk Cleanup Pro 激活版

真大的脸盆

Mac Mac 软件 磁盘清理 清理工具

从0到100:小区物业报修小程序开发笔记

CC同学

Spring Security 中的基本认证过滤器链

Java架构历程

Java spring security 三周年连更

Wallys AP controllers devices/PQ4019 and IPQ4029 chipsets support 20 km remote transmission

Cindy-wallys

IPQ4019 ipq4029

刘强:作业帮给OceanBase提了九条意见

OceanBase 数据库

数据库 oceanbase

SAPUI5 本地工程中的键值对 sapux - true 的作用

汪子熙

前端开发 SAP Fiori SAP UI5 三周年连更

GPIO实验-主芯片GPIO输出实验

鸿蒙之旅

OpenHarmony 三周年连更

SpringBoot自动配置原理详解

Java Spring Boot

即时通讯技术文集(第14期):WebSocket精华文章合集 [共15篇]

JackJiang

网络编程 即时通讯 IM

膜拜!阿里人用10W字面经把Java面试官拿下了

Java java面试 Java八股文 Java面试题 Java面试八股文

广立微大数据平台全线升级 为芯片全生命周期保驾护航

科技热闻

实战解读:隐钥科技数据库加密解决方案及场景化解析

Lily

chatGPT是割韭菜的镰刀还是创业的新风口? | 社区征文

迷彩

AIGC 生成式人工智能 三周年征文 三周年连更

硬核!阿里自爆虐心万字面试手册,Github上获赞89.7K

Java 程序员

利用Python分析快手APP全国大学生用户数据(2022 年初赛第四题 )

繁依Fanyi

大数据

一条SQL如何被MySQL架构中的各个组件操作执行的

华为云开发者联盟

sql 开发 华为云 华为云开发者联盟 企业号 5 月 PK 榜

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