告别手工编写测试脚本！Claude+Playwright MCP快速生成自动化测试脚本

在进行自动化测试时，前端页面因为频繁迭代UI 结构常有变动，这往往使得自动化测试的脚本往往“写得快、废得也快”，维护成本极高。

在大模型之前大家往往都会使用录制类工具，但录制类工具生成的代码灵活性较差、定位方式不太合理只能， 页面轻微改动就可能导致脚本完全失效。

然后AI大模型出现后, 测试工程师开始尝试借助大模型（如 ChatGPT）生成测试代码，但因为大模型无法实时获取网页的 DOM 结构和内容，整个开发过程也是相当麻烦，我们需要不断地将页面内容复制给大模型。

这正是 Playwright MCP 想要解决的问题。

Playwright MCP通过MCP协议，大模型不再对网页内容进行乱想瞎猜，而是真实感知DOM和页面结构后再发出操作指令。

因此，测试人员只需用自然语言描述测试需求，就能由模型完成整个测试流程——从打开页面、执行交互、采集结果，到生成可运行的测试代码，极大降低了测试脚本的开发门槛和维护成本。

即便页面结构发生变化，也可以快速地完成测试脚本的开发甚至抛弃测试脚本直接使用Prompt就可以完成稳定的测试，从而真正实现了更智能、更高效、更稳定的自动化测试体验。

什么是Playwright MCP

Playwright MCP是一个主要依赖于浏览器的可访问树的web自动化测试能力的MCP Server。

它允许使用LLM大模型使用结构化命令控制网页浏览器，从而可以快速且更准确的操作浏览器，非常适合网页导航、表单填写、数据提取和自动化测试等任务。

Playwright MCP 的主要优势：

  • 快速响应：基于结构化命令，交互更轻量

  • 高确定性：避免自然语言歧义，执行结果更可靠

  • 易于集成：适用于 Copilot、Cursor 等 AI 编程工具

  • 便于调试：多客户端可共享一个浏览器上下文

什么是MCP

MCP（Model Context Protocol） 是一种为大语言模型（LLM）设计的协议，MCP充当 LLM 与实际应用之间的桥梁或“翻译器”，将自然语言转化为结构化指令，使得模型可以更精确、高效地控制外部行为。

通过 MCP，大语言模型可以像调用 API 一样发出导航、点击、输入等指令，并接收结构化反馈，极大增强了模型的上下文理解与操作能力。

MCP使用传统的客服端-服务端架构模式

MCP客户端

可以理解成一个“中间人”，它会把我们发出的自然语言指令通过大模型转换成标准的 MCP 指令，再和 MCP 服务器建立连接，发送请求、接收响应。

MCP服务器

MCP 服务器可以理解为一个 “调度大脑 + 工具集合”，里面封装了很多功能和服务，比如访问文件、操作文件、和网页进行交互等等。

当MCP客户端发来请求时，服务器就从工具箱里找出合适的工具，完成对应的任务。

常用MCP客户端简介

GitHub Copilot + VS Code

GitHub Copilot的Agent模式可以使用MCP的Tools，优点是结合代码环境方便测试与生成自动化逻辑，支持多种插件扩展，使用体验非常流畅便。

缺点是 MCP 工具的集成和识别较不稳定，有时需要重启 VS Code或者电脑才能正确加载 MCP工具。然后当然你还需要额外付出10美金一个月。

Claude Desktop（Antropic）

Claude Desktop 是由 Anthropic 官方推出的桌面客户端，Claude Desktop 在MCP工具调用方面的体验非常出色，响应迅速、调用稳定。

  • 优点：

  • 原生支持 MCP 工具，配置简单；

    • Claude 模型推理能力强，适合进行多轮复杂对话和自动化流程。

  • 缺点：

    • 国内用户注册需使用海外手机号验证；

    • 免费账号有 Token 限制，内容稍长容易触发配额限制。

Cherry Studio

Cherry Studio 是由国内开发者打造的一款轻量型桌面客户端，支持接入多个主流厂商的大模型（如 OpenAI、Anthropic、Moonshot 等），但需用户自行配置对应的API Key。

缺点是部分模型集成体验不佳，尤其是在调用Playwright MCP等需要具备连贯推理能力的工具时，可能出现模型停顿、不继续执行等问题，对流畅使用造成较大影响。

目前不推荐用于复杂自动化测试等场景。

Cursor IDE

Cursor 自然不用多介绍了，这是专为 AI 编程设计的 VS Code 分支版本，对于MCP的配置和支持同样十分方便，但是在使用Playwright MCP时出现被判定为可疑行为被阻止的情况

环境准备

前置准备（Prerequisites）

  • Node.js

    因为MCP其实就是nodejs程序，要运行MCP我们需要安装Nodejs环境，

    访问 https://nodejs.org/en/download 下载并安装推荐版本。

  • Playwright

    安装完 Node.js 后，可以使用以下命令安装 Playwright 及其浏览器依赖：

    • -npm install -g playwright：全局安装 Playwright，使其在所有项目中可用

    • -npx playwright install：安装 Playwright 所需的 Chromium、Firefox 和 WebKit 浏览器。

    • 可以到我的个人号：atstudy-js，看完整版内容

      这里有10W+ 热情踊跃的测试小伙伴们，一起交流行业热点、测试技术各种干货，一起共享面试经验、跳槽求职各种好用的。        

      多行业测试学习交流群，内含直播课+实战+面试资料

      AI测试、 车载测试、自动化测试、银行、金融、游戏、AIGC.

安装Playwright MCP

Playwright MCP 有两个常用的实现版本，两个MCP库都可以使用：

    • - @playwright/mcp：

      由Microsoft官方发布和维护，是最基础、最标准的MCP客户端实现

    • - @executeautomation/playwright

      -mcp-server：

      由社区开发者@executeautomation 构建，功能更加丰富，例如支持多页签、截图、保存测试结果等扩展能力，适合进阶使用者或自动化测试场景更复杂的项目。

安装Playwright MCP

    • - npm install -g 

      @playwright/mcp

    • - npm install -g 

      @executeautomation/playwright-mcp-server

输入以下命令验证安装成功

    • - npx @playwright/mcp --version

使用 Claude Desktop + 

Playwright MCP 自动生成测试代码实战

步骤一：

在 Claude Desktop 配置 Playwright MCP

1. 打开 Claude Desktop Settings → 切换至 Developer → 点击 Edit Config，打开 claude-desktop-config.json 文件。

2. 添加以下配置来启用 Playwright MCP：

{  "mcpServers": {    "playwright": {      "command": "npx",      "args": ["-y", "@executeautomation/playwright-mcp-server"]    }  }}

3. 保存文件并重启 Claude Desktop，在聊天窗口中就可以看到Playwright MCP提供的Tools了

步骤二：

使用Prompt自动生成测试代码

配置完成后，我们开始演示如何通过Playwright MCP去生成Playwright的测试代码

示例 Prompt：

输入了prompt后，接下来就可以直接发送命令

Please explore https://www.baidu.com and generate a playwright test that performs a search for `LangChain MCP Adapter`.

Claude就会使用Playwright MCP工具执行以下操作：

- 打开默认浏览器，访问百度

- 快照页面结构，识别搜索框；

- 输入关键词LangChain MCP Adapter并点击搜索；

- 验证搜索结果 —— 检查是否出现相关内容的搜索结果

- 关闭浏览器

- 基于执行记录生成完整的 Playwright 测试代码。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/web/93917.shtml
繁体地址，请注明出处：http://hk.pswp.cn/web/93917.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

一款更适合 SpringBoot 的API文档新选择（Spring Boot 应用 API 文档）

一款更适合 SpringBoot 的API文档新选择（Spring Boot 应用 API 文档）

SpringDoc：Spring Boot 应用 API 文档生成的现代化解决方案 概述 SpringDoc 是一个专为 Spring Boot 应用设计的开源库，能够自动生成符合 OpenAPI 3 规范的 API 文档。它通过扫描项目中的控制器、方法注解及相关配置，动态生成 JSON/YAML/HTML…
阅读更多...
文献阅读 250821-When and where soil dryness matters to ecosystem photosynthesis

文献阅读 250821-When and where soil dryness matters to ecosystem photosynthesis

When and where soil dryness matters to ecosystem photosynthesis 来自 <When and where soil dryness matters to ecosystem photosynthesis | Nature Plants> ## Abstract: Background: Projected increases in the intensity and frequency of droughts in the twen…
阅读更多...
React学习（九）

React学习（九）

目录&#xff1a;1.react-进阶-antd-新增2.react-进阶-antd-删除选中1.react-进阶-antd-新增新增代码&#xff0c;跟需改的代码类似&#xff0c;直接copy修改组件代码进行修改userEffect可以先带着&#xff0c;没啥用A6组件用到的函数跟修改的也类似&#xff1a;这个useEffect函…
阅读更多...
零基础从头教学Linux（Day 17）

零基础从头教学Linux（Day 17）

三层交换机一、三层交换机的配置1.关于如何配置三层交换机&#xff0c;首先我们应该先创建VLANSwitch>en Switch#vlan database % Warning: It is recommended to configure VLAN from config mode,as VLAN database mode is being deprecated. Please consult userdocument…
阅读更多...
任务十四 推荐页面接口开发

任务十四 推荐页面接口开发

一、接口准备 在对接qq音乐接口之前，首先要将之前的项目，一定要记得备份一份； 备份完成之后，首先要在vscode终端安装axios，这个是请求后端的工具，和之前的ajax一样，都是请求后端的工具。只不过axios更专业化，跟强大 至于qq音乐接口怎么获取，一般有两个途径，第一个是…
阅读更多...
医疗AI与医院数据仓库的智能化升级：异构采集、精准评估与高效交互的融合方向(下)

医疗AI与医院数据仓库的智能化升级：异构采集、精准评估与高效交互的融合方向(下)

核心功能创新详解： 统一门户与角色化工作台： 统一入口： 用户通过单一URL登录，系统根据其角色和权限自动呈现专属工作台。 角色化工作台： 临床医生工作台： 首屏展示常用患者查询入口、快速统计（如“我的患者检验异常趋势”）、相关临床文献推荐、待处理任务（如报告审核）…
阅读更多...
数据库面试常见问题

数据库面试常见问题

数据库 Delete Truncate Drop 区别 答：这三个操作都是针对数据库的表进行操作，都有删除表的功能，其中的区别在于： Delete：只将表中的数据进行删除，不删除定义不释放空间，是dml语句，需要提交事务，如果不想删除可以回滚。delete每次删除一行，并在事务日志中为所删除…
阅读更多...
用nohup setsid绕过超时断连，稳定反弹Shell

用nohup setsid绕过超时断连，稳定反弹Shell

在We渗透过程中&#xff0c;我们常常会利用目标系统的远程代码执行&#xff08;RCE&#xff09;漏洞进行反弹Shell。然而&#xff0c;由于Web服务器&#xff08;如PHP、Python后端&#xff09;的执行环境通常存在超时限制&#xff08;如max_execution_time或进程管理策略&#…
阅读更多...
Java设计模式-模板方法模式

Java设计模式-模板方法模式

Java设计模式-模板方法模式 模式概述 模板方法模式简介 核心思想&#xff1a;定义一个操作中的算法骨架&#xff08;模板方法&#xff09;&#xff0c;将算法中某些步骤的具体实现延迟到子类中完成。子类可以在不改变算法整体结构的前提下&#xff0c;重定义这些步骤的行为&…
阅读更多...
Centos7物理安装 Redis8.2.0

Centos7物理安装 Redis8.2.0

Centos7物理安装 Redis8.2.0一、准备依赖环境首先安装编译 Redis 所需的依赖&#xff1a;# CentOS/RHEL系统 yum install -y gcc gcc-c make wget 二、下载并编译 Redis 8.2.0# 1. 下载Redis 8.2.0源码包 wget https://download.redis.io/releases/redis-8.2.0.tar.gz# 2. 解压…
阅读更多...
牛津大学xDeepMind 自然语言处理（3）

牛津大学xDeepMind 自然语言处理（3）

条件语言模型无条件语言模型 概率计算&#xff1a;通过链式法则分解为预测下一词概率&#xff08;将语言建模问题简化为建模给定前面词语历史的下一个词的概率&#xff09;基于循环神经网络的无条件语言模型&#xff1a;根据历史词语预测下一个词的概率条件语言模型 定义&#…
阅读更多...
Vue2.x核心技术与实战(一)

Vue2.x核心技术与实战(一)

目录 一、Vue2.x：快速上手+插值表达式+指令上 1.1 Vue快速上手 1.1.1 Vue概念 1.1.2 创建实例 1.1.3 插值表达式 { { }} 1.1.4 响应式特性 1.1.5 开发者工具 1.2 Vue指令 1.2.1 v-html 1.2.3 v-show / v-if v-show v-if 1.2.4 v-else / v-else-if 1.2.5 v-on v…
阅读更多...
SCAU学习笔记 - 自科三面前端方向实战演示

SCAU学习笔记 - 自科三面前端方向实战演示

本来是准备写完二面直接开始写算法三面的&#xff0c;maimai那个封面图我都做好了。但是可恶的出题人说要等我出完解析再针对性避开出题&#xff0c;所以swan决定把那个先搁置&#xff0c;本文我们先以2023年的自科三面前端方向题为例带各位快速入门前端三件套&#xff08;因为…
阅读更多...
前后端联合实现文件上传，实现 SQL Server image 类型文件上传

前后端联合实现文件上传，实现 SQL Server image 类型文件上传

1、前端 Vue3QualityFileInfoDialog.vue<script setup lang"ts" name"QualityFile"> ...... // 上传&#xff0c;防抖 const onUploadClick debounce(() > {// 模拟点击元素if (fileInputRef.value) {// 重置以允许重复选择相同文件fileInputRef…
阅读更多...
使用安卓平板，通过USB数据线（而不是Wi-Fi）来控制电脑（版本1）

使用安卓平板，通过USB数据线（而不是Wi-Fi）来控制电脑（版本1）

这是一个对延迟和稳定性要求很高的场景。 核心原理是&#xff1a;利用USB数据线&#xff0c;在手机和电脑之间创建一个高速的“虚拟网络连接”&#xff0c;然后在这个稳定的网络通道上运行远程控制软件。 方案1&#xff1a; 在完全没有无线网络&#xff08;Wi-Fi&#xff09;和…
阅读更多...
linux报permission denied问题

linux报permission denied问题

linux报permission denied问题 一般是没有可执行权限&#xff0c;需要先添加执行权限 1. 确认文件权限 在你的项目目录下执行&#xff1a; ls -l ./folder你可能会看到类似&#xff1a; -rw-r--r-- 1 user user 1234 Aug 18 12:00 script.sh注意&#xff1a;这里缺少 x&#xf…
阅读更多...
Vue深入组件：组件事件详解2

Vue深入组件：组件事件详解2

声明触发的事件 为了让组件的用法更清晰（作为文档），同时让 Vue 能区分事件与透传 attribute，推荐显式声明组件要触发的事件。根据组件是否使用 <script setup>，声明方式有所不同。 使用 <script setup> 时：defineEmits() 宏 在 <script setup> 中，…
阅读更多...
FLASK项目快速构建

FLASK项目快速构建

Flask 项目构建 exts.py # flask_sqlalchemy from flask_sqlalchemy import SQLAlchemy from flask_mail import Mail from flask_caching import Cache from flask_wtf import CSRFProtect from flask_avatars import Avatars from flask_jwt_extended import JWTManager from…
阅读更多...
数据结构--2：ArrayList与顺序表

数据结构--2：ArrayList与顺序表

1.顺序表的创建 2.常见操作 3.遍历 4.扩容机制 5.例子1.顺序表的创建在集合框架中&#xff0c;ArrayList是⼀个普通的类&#xff0c;实现了List接口&#xff0c;具体框架图如下&#xff1a;2.常见操作代码…
阅读更多...
【Kubesphere】K8s容器无法访问内网xx网络问题

【Kubesphere】K8s容器无法访问内网xx网络问题

问题遇到的现象和发生背景 Kubesphere中运行的一个容器&#xff0c;可以ping通我们公司内网网段172.16.XX.XX&#xff0c;但是在容器内无法ping通192.168.5.XX&#xff0c;但是我在宿主机是可以ping通192.168.5.XX&#xff0c;这个192.168.5.XX是通过xx设备接进来的&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023