百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

Cursor+Claude+Playwright:AI 让自动化测试效率暴涨,快到飞起!

yund56 2025-07-16 08:58 8 浏览

一、引言

随着AI时代的到来,软件测试变得越来越复杂,如何高效、准确地进行自动化测试成了每一个开发团队必须面对的问题。在日常工作中,测试工作常常面临各种挑战,比如功能复杂、需求频繁变更、时间紧迫等。传统的手工测试不仅耗时耗力,还容易出错。而自动化测试虽然能提高效率,但配置和维护成本较高。今天,要向大家介绍一个强大的工具组合——Cursor+Claude+Playwright-mcp,这将彻底改变AI时代的测试流程

什么是Cursor + MCP服务?

Cursor是一款功能强大的代码编辑器,而Playwright-mcp(MCP服务)则是一个与 浏览器 深度集成的工具,使你可以直接用AI与浏览器交互,完成各种浏览器操作,从此告别手动点点点的烦恼。

MCP 工具介绍(Playwright)

工具名称

功能描述

参数

browser_navigate

导航到指定 URL

url(字符串):目标 URL

browser_go_back

返回浏览历史中的上一页

无参数

browser_go_forward

前进到浏览历史中的下一页

无参数

browser_click

在网页上执行点击操作

element(字符串):元素描述
ref(字符串):元素唯一标识

browser_hover

将鼠标悬停在指定元素上

element(字符串):元素描述
ref(字符串):元素唯一标识

browser_drag

在两个元素之间执行拖拽操作

startElement(字符串):源元素描述
startRef(字符串):源元素标识
endElement(字符串):目标元素描述
endRef(字符串):目标元素标识

browser_type

在可编辑元素中输入文本

element(字符串):元素描述
ref(字符串):元素唯一标识
text(字符串):输入内容
submit(布尔值):是否提交(默认 false)

browser_select_option

在下拉菜单中选择指定选项

element(字符串):元素描述
ref(字符串):元素唯一标识
values(数组):要选择的选项值数组

browser_choose_file

选择一个或多个文件进行上传

paths(数组):文件绝对路径数组(支持单文件或多文件)

browser_press_key

模拟键盘按键

key(字符串):按键名称(如 ArrowLeft 或字符 a)

browser_snapshot

捕获当前页面的无障碍快照(比截图更优)

无参数

browser_save_as_pdf

将当前页面保存为 PDF 文件

无参数

browser_take_screenshot

捕获当前页面截图

raw(字符串):可选返回无损 PNG(默认 JPEG)

browser_wait

等待指定时间(最长 10 秒)

time(数字):等待时间(秒)

browser_close

关闭当前网页标签页

无参数

github地址:
https://github.com/microsoft/playwright-mcp

二、配置教程,简单几步轻松搞定

  1. 安装Cursor并接入MCP服务

首先,确保你已经安装了Cursor编辑器。然后,找到mcp.json文件并进行编辑

cursor配置,添加新的MCP服务

编辑mcp.json文件配置 playwright-mcp 服务,并保存mcp.json文件


mcp.json配置信息

快照模式(默认模式):使用可访问性快照来提高性能和可靠性

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

正常情况下,我们使用默认模式已经能解决 90%的问题,从日常的简单操作到较为复杂的业务处理,默认模式都能展现出了出色的适应性和问题解决能力。比如,在常见的文件传输和数据存储方面,默认模式能够快速准确地完成任务,极大地提高了工作效率,减少了出错的可能性。

另外还有两种模式

1.1 运行无头浏览器(没有 GUI 的浏览器)

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless"
      ]
    }
  }
}

1.2 视觉模式:使用屏幕截图进行基于视觉的交互

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--vision"
      ]
    }
  }
}
  1. 终端 安装、运行 playwright-mcp 服务
npx @playwright/mcp@latest --port 8931

三、实机演示,效率惊人

为了让大家更直观地感受这一组合的强大之处,我们进行一场实机演示。还是使用我们绚丽的烟花特效 HTML 项目,在chat窗口中输入:“帮我用palywright-mcp服务测试一下各个功能”Cursor 如同被激活了超能力,开始调用 MCP tool 中的服务,直接帮我们操作浏览器

并且依据页面中现存的功能,生成了测试用例,其覆盖率涵盖了每一项可视功能

最终梳理测试状况,告诉你哪些是通过的,哪些是存在问题的,能够使开发过程迅速定位问题,进行有针对性地调整。

四、结语

当AI能够高效地执行测试任务时,究竟应当欣喜还是惶恐?反正于我而言,更享受每天清晨醒来,不再为测试用例而烦恼。虽说每天都在书写代码,然而最为钟爱的,还是运用 AI 进行自动化测试的那短短几分钟。毕竟,谁不想早点下班呢?

当AI开始写测试用例、跑测试、写报告...我们究竟是在见证测试行业的消亡,还是涅槃重生?欢迎在评论区留下你的见解!

相关推荐

什么是JavaScript,它能做什么(javascript干啥的)

一个页面分成三个部分,结构,样式,行为。HTML代表了页面的结构(骨架),CSS代表了页面的样式(皮肤),JavaScript代表了页面的行为(这种行为是被动的)。主动的行为需要一个大脑,后端作为我们...

一款自定义字幕内容的截屏生成器:fake-screenshot!

这是一个可以伪造任何网站界面截图的工具。但本工具的目的其实不是破坏,而是为了警告:不要轻易相信网上看到的“截图”!本工具的目的是传递(如上的)信息,而不是破坏。因此所有经过本工具制作出来的截图都被打...

JavaScript-JavaScript 219

1)JavaScript简介JavaScript:是一种脚本语言(程序),脚本是一条条的文字命令,执行时由系统的一个解释器将其一条条的翻译成机器可识别的指令然后执行,脚本语言是不经编译而是解释执行的,...

Vue3 神级工具:终于可以实现打字的动画效果了!

Typed.js是一个轻量级的JavaScript库,用于在网页上实现打字机动画效果。它支持自定义打字速度、循环模式、回调函数等,非常适合用于动态展示标语、代码片段或交互式文本效果。核心特性打字...

好用的JavaScript客户端PDF插件——jsPDF

介绍和往常一样,jsPDF是一个开源的客户端的PDF解决方案,在之前的文章中已经介绍过几个Web端和PDF相关的库,jsPDF同样是一个不错的客户端PDF引SDK,你可以通过jsPDF在客户端完成相...

历时10个多月,学习了这132 个CSS 特效,还不来学习

这132个特效,是我历时10个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧,有时间做这些。其实,我目前工作还是挺饱...

Flux.1 Kontext:用文字编辑图像(flux.1.kontext)

FLUX.1Kontext是来自BlackForestLabs的一款新图像编辑模型。它是用于通过文本提示编辑图像的最佳模型之一,并且是FLUX.1家族的最新成员。在我们的测试中,我们发...

采用Stylus 扩展让你的浏览器字体变得更美观

今天锋哥带大家来玩一个有意思的操作。我对字体有着很高的敏感度,我对网页默认的字体,不是很满意。突如其来的疯狂念头,我能不能把我们网页的所有字体,就是默认的字体,强制改为我喜欢的这个霞鹜文楷字体呢?答案...

JavaScript奇技淫巧:隐形字符(javascript字符型转数值型方法)

JavaScript奇技淫巧:隐形字符本文,分享一种奇特的JS编程技巧,功能是:可以使字符串“隐形”、不可见!效果展示如下图所示,一个字符串经物别的操作之后,其长度有621字节,但内容却是“隐形”不可...

Axure9原型设计:能增删改数据的动态饼图(2)

在本篇中,我们将延续上篇的设计思路,进一步探索如何在Axure9中实现“可增删改数据”的动态饼图效果。最近无聊,在网上闲逛,看到一篇教程《能增删改数据的动态饼图》,故仿照实践。因信息量较大,分三篇...

JavaScript奇淫技巧:命令行语法高亮

JavaScript奇淫技巧:命令行语法高亮本文,将实现命令行输出带有语法高亮、带行号的JS代码。效果如下图所示:对于JS程序员而言,这个效果是有些惊喜的。而实现起来,却似乎是出乎意料的简单。直接上源...

JS如何判断文字被ellipsis了?(js判断字符是否存在)

原文来源于:程序员成长指北;作者:嘉琪coder如有侵权,联系删除前言如果想要文本超出宽度后用省略号省略,只需要加上以下的css就行了。ellipsis{overflow:hidden;...

前端资源-实用的JS插件(前端js工具)

现在前端资源越来越多,有创意十足的,有实用性高的,这些对于设计师和前端人员来说都是不错的灵感和资源,所以我们可多关注这些信息,对自己的专业技术有也会帮助的。今天设计达人网为大家分享有:页面进度条、图像...

p5.js 中文入门教程(p5js编辑器不能用)

本文简介点赞+关注+收藏=学会了本文的目标是和各位工友一起有序的快速上手p5.js,会讲解p5.js的基础用法。本文会涉及到的内容包括:项目搭建p5.js基础2D图形文字图形样式...

创建酷炫动画效果的10个JavaScript库

Dynamics.js是设计基于物理规律的动画的重要JavaScript库。它可以赋予生命给所有包含CSS和SVG属性的DOM(文本对象模型)元素,换句话说,Dynamics.js适用于所有Java...