惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
宝玉的分享
宝玉的分享
Jina AI
Jina AI
Martin Fowler
Martin Fowler
W
WeLiveSecurity
V
Vulnerabilities – Threatpost
GbyAI
GbyAI
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
P
Privacy International News Feed
D
DataBreaches.Net
Security Archives - TechRepublic
Security Archives - TechRepublic
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Scott Helme
Scott Helme
U
Unit 42
Hacker News - Newest:
Hacker News - Newest: "LLM"
Google DeepMind News
Google DeepMind News
酷 壳 – CoolShell
酷 壳 – CoolShell
Vercel News
Vercel News
I
InfoQ
N
Netflix TechBlog - Medium
罗磊的独立博客
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
IT之家
IT之家
雷峰网
雷峰网
Hugging Face - Blog
Hugging Face - Blog
T
Tailwind CSS Blog
S
Securelist
S
Schneier on Security
T
Troy Hunt's Blog
www.infosecurity-magazine.com
www.infosecurity-magazine.com
C
Cisco Blogs
H
Hacker News: Front Page
Spread Privacy
Spread Privacy
T
Tenable Blog
博客园 - Franky
Apple Machine Learning Research
Apple Machine Learning Research
Recent Commits to openclaw:main
Recent Commits to openclaw:main
D
Darknet – Hacking Tools, Hacker News & Cyber Security
博客园_首页
量子位
AI
AI
L
LINUX DO - 最新话题
J
Java Code Geeks
小众软件
小众软件
爱范儿
爱范儿
月光博客
月光博客
H
Help Net Security
aimingoo的专栏
aimingoo的专栏

磊磊落落

世間有大愛,世間有大我 - 磊磊落落 端午遊遼寧團山海洋公園 - 磊磊落落 為什麼要讀古文? - 磊磊落落 莊河老街 - 磊磊落落 春遊橫山寺 - 磊磊落落 莊河青堆子古鎮 - 磊磊落落 在日常生活中,可以用 OpenClaw 做哪些事? - 磊磊落落 如何在 CentOS Stream 9 上安装 OpenClaw,并接入企业微信? 当下人人都在养龙虾,这龙虾(OpenClaw)为啥突然就火了? - 磊磊落落 如何将 Spring Statemachine 作为一个轻量级工作流引擎来使用? - 磊磊落落 编写一个 VS Code 扩展:将 Copilot 支持的大模型通过 REST API 方式暴露出来 编写提示词需要遵循的五个原则(附实践案例) - 磊磊落落 關於 2026 年即將生效的「吸毒記錄可封存」法案 - 磊磊落落 如何使用 Spec Kit 工具进行规范驱动开发? - 磊磊落落 Markdown 将成为 AI 时代的通用编程语言? - 磊磊落落 使用 FastMCP 编写一个 MySQL MCP Server Cursor 初体验:将 React 项目从 JavaScript 升级到 TypeScript MCP 是什么?它是如何工作的? - 磊磊落落 2025 國慶假期總結 - 磊磊落落 週末逛泊霞灣與橫山寺 - 磊磊落落 如何在 Spring Boot 中使用 P6Spy 拦截 SQL 语句? Java 中如何使用 MapStruct 进行对象映射? - 磊磊落落
以自然语言的方式使用 Playwright MCP 进行浏览器自动化操作 - 磊磊落落
磊磊落落 · 2025-11-03 · via 磊磊落落

由上文「MCP 是什么?它是如何工作的?」可以知道,MCP 是大语言模型连接外部工具或服务的桥梁。

Playwright 是微软开源的一款类似 Selenium 的浏览器自动化测试框架。相比 Selenium,Playwright 更加轻量、功能更丰富,且执行速度更快。大语言模型爆发之前,虽然 Playwright 也能胜任一些自动化任务,但主要还是用于自动化测试。

大语言模型爆发之后,特别是智能体的概念提出之后,浏览器不再仅是一个 Web 网站的入口,而变成了一个智能化调度任务的平台。随之而来的,诸如 Playwright 等浏览器自动化框架也得到更广泛的流行。

在大语言模型爆发之前,虽然 Playwright 框架早已出现,也很好用,而且也有 CodeGen(代码自动生成)等特性,但终究需要有编程经验的人才能驾驭得了「这艘快船」。而在当下,乘着大语言模型爆发的春风,Playwright MCP 将 Playwright 的浏览器自动化能力封装成了一个 MCP Server,能够让大语言模型客户端(诸如 Claude Code、Cursor 和 VS Code 等)通过 MCP 协议直接控制浏览器,这让没有任何编程经验的人来用自然语言指挥浏览器做一些复杂的自动化任务成为了可能。在可预见的未来,诸如 Playwright MCP 的浏览器自动化方案会赋能智能体实现更多的智能场景,也会改写自动化测试的实践方式。

本文以 VS Code 为大语言模型客户端,演示如何以自然语言的方式使用 Playwright MCP 进行简单的浏览器自动化操作,以及尝试用自然语言的方式编写自动化测试用例。

1 环境准备

在本地 VS Code 安装 Copilot Chat 扩展,这样我们就拥有了一个 AI 对话框。然后,因为 Playwright MCP 是一个 TypeScript 应用,需要在本地以 npx 命令的方式运行,所以还需要在本地安装 Node.js,并使用如下命令确认 Node.js 是否安装成功。

上述步骤完成后,打开 VS Code,创建一个临时文件夹 playwright-mcp-demo;然后在该文件夹下创建一个 .vscode 目录;最后在 .vscode 目录下创建一个 MCP Server 的配置文件 mcp.json,并填入如下内容。

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

这样,Playwright MCP Server 就在 VS Code 配置好了,点击 mcp.jsonplaywright 上方的 Start 按钮即可启动 Playwright MCP Server。

启动 Playwright MCP Server

接下来即可在 Copilot Chat 使用该 MCP Server 了。

2 尝试用自然语言执行简单的任务

下面尝试在 Copilot Chat 输入提示词,然后将模式由默认的 Ask 切换为 Agent,选择一个大语言模型(本文选择的是 Claude Sonnet 3.5),最后点击发送即可触发任务的执行。

Playwright MCP 提示词

本文使用的提示词如下,尝试让大语言模型调用 Playwright MCP Server 用浏览器打开我的博客,然后翻阅主要页面,最后总结博客的功能,并找出我的联系方式和友链网站。

请使用 Playwright MCP 在浏览器打开网址 leileiluoluo.com,然后像真实用户一样翻阅该站点的各个主要页面,然后简述一下该网站的功能,并尝试找出站长的联系方式以及其友情链接的站点名字和网址。完成后,请关闭浏览器。

发送指令后,可以看到,Copilot Chat 根据我的指令,用我本地的 Chrome 浏览器打开了我的博客,在查看了主页、关于和友情链接三个页面后关闭了浏览器。

Playwright MCP 执行步骤

最后给我输出了如下结果:

Playwright MCP 执行结果

可以看到,大语言模型准确的完成了我指派的任务,在未显式提供选择器的情况下,自动找到了关于和友情链接页面的 DOM 元素并进入页面抓取到了我需要的信息。

3 尝试用自然语言编写自动化测试用例

前面我们在 Copilot Chat 使用自然语言的方式调用 Playwright MCP 做了一个简单的浏览器自动化任务。下面我们将探索使用自然语言编写自动化测试用例的可行性。

待测试的页面是 Selenium 官网提供的一个「样例 Web Form」,包含文本输入框、下拉框、文件上传框、日期选择框、提交按钮等各种页面元素。

Selenium Web Form 示例页面

而针对该页面的测试代码之前是使用 Python 语言编写的(详情请参考之前的文章「Selenium WebDriver 基础使用」)。

from unittest import TestCase
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.select import Select


class TestSeleniumForm(TestCase):
    def setUp(self) -> None:
        # 无痕模式的 Chrome
        options = webdriver.ChromeOptions()
        options.add_argument('--incognito')

        self.browser = webdriver.Chrome(options=options)
        self.addCleanup(self.browser.quit)

    def test_web_form(self) -> None:
        # 打开表单页面
        self.browser.get('https://www.selenium.dev/selenium/web/web-form.html')
        self.assertEqual(self.browser.title, 'Web form')

        # Text 输入
        text_input = self.browser.find_element(By.ID, 'my-text-id')
        text_input.send_keys('Selenium')

        # Password 输入
        password = self.browser.find_element(By.NAME, 'my-password')
        password.send_keys('Selenium')

        # Dropdown 选择 Two
        dropdown = Select(self.browser.find_element(By.NAME, 'my-select'))
        dropdown.select_by_value('2')

        # 选择文件
        file_input = self.browser.find_element(By.CSS_SELECTOR, 'input[name="my-file"]')
        file_input.send_keys('/tmp/file.txt')

        # 日期选择
        date_input = self.browser.find_element(By.XPATH, '//input[@name="my-date"]')
        date_input.send_keys('04/21/2023')

        # 点击 Submit 按钮
        submit_button = self.browser.find_element(By.XPATH, '//button[@type="submit"]')
        submit_button.click()

        # 等待进入已提交页面
        WebDriverWait(self.browser, 10).until(EC.title_is('Web form - target page'))

        # 断言
        message = self.browser.find_element(By.ID, 'message').text
        self.assertEqual(message, 'Received!')

可以看到,如上 Python 代码使用标准 Python 单元测试框架,基于 Selenium 实现了 Web Form 页面打开、Text 输入、Password 输入、文件选择、日期选择、Submit 按钮点击以及提交成功后的校验逻辑。

下面尝试使用 Playwright MCP 实现同样的自动化测试逻辑。

我们在 playwright-mcp-demo 根目录创建一个测试用例提示词文件 webform-test.prompt.md,并尝试用自然语言的方式说清楚需要测试和验证的逻辑,最后交给大语言模型来执行。

提示词文件 webform-test.prompt.md 的内容如下:

# 使用 Playwright MCP 测试 Web Form 的测试用例

该测试用例包含用例描述、测试步骤和报告生成三部分。请仔细阅读前两部分来分别了解该用例的测试场景、具体的测试步骤。最后在当前文件夹生成一个测试报告,报告要包含的内容请参阅第三部分 —— 报告生成。

## 1 用例描述

这是一个测试 Web Form 的场景,用于验证 Web Form 的各个组件是否能够正常使用。您需要在浏览器打开如下 WebForm 地址,然后根据第二步提供的测试步骤进行详细测试和验证。

- WebForm 地址

https://www.selenium.dev/selenium/web/web-form.html

## 2 测试步骤

具体的测试步骤如下:

1. 打开 WebForm 地址后,验证网页的标题为「Web form」;
2. 在 Text input 输入框输入「Playwright MCP Test」;
3. 在 Password 输入框输入「Playwright」;
4. 在 Dropdown (select) 输入框选择「Two」;
5. 在 File input 输入框,点击选择文件,并选定当前工程根目录下的文件 `file.txt`6. 在 Date picker 输入框,输入当前日期「11/03/2025」;
7. 点击 Submit 按钮,确认页面返回「Form submitted」后关闭浏览器。

## 3 报告生成

您需要在当前文件夹下生成一个测试报告,文件名为 `webform-test-result.md`,格式为 Markdown。需要详细记录每个步骤的测试结果,展示对应步骤成功还是失败,失败的话,要给出失败的原因。若每个测试步骤均执行成功,请将最后一步「Form submitted」返回后的页面进行截屏并附加到测试报告中。

提示词文件 webform-test.prompt.md 会被 VS Code 自动识别,并在文件编辑窗口的上方显示一个执行的按钮。当点击执行按钮后,Copilot Chat 会打印出大语言模型从 prompt.md 文件识别出的 TODO List,然后打开浏览器依次执行。

执行提示词文件

可以看到,浏览器被自动打开并输入了测试用例中的 Web Form 地址,然后按照步骤输入了对应的字段并进行了提交和验证。

浏览器自动化测试效果

执行完成后,浏览器被自动关闭,并按要求生成了对应的测试报告文件。

自动生成的测试报告

经过如上实验,我们知道借助大语言模型和 Playwright MCP,使用自然语言编写简单的自动化测试用例是完全可行的。

4 小结

综上,本文首先介绍了 Playwright MCP 是什么,然后以 VS Code 为大语言模型客户端,演示如何以自然语言的方式使用 Playwright MCP 进行简单的浏览器自动化操作,以及尝试用自然语言的方式编写自动化测试用例。

经过如上实践,我们初步验证了使用智能体实现浏览器自动化以及使用自然语言进行自动化测试的可行性。

示例工程 playwright-mcp-demo 的完整内容已提交至 GitHub,供有需要的同学参考。

参考资料

[1] YouTube: Why Do You Need (or NOT) the Playwright MCP Server - https://www.youtube.com/watch?v=FGwtDhjnBMc

[2] YouTube: Manual Testing with Playwright MCP – No Code, Just Prompts - https://www.youtube.com/watch?v=2vnttb-YZrA

[3] YouTube: Playwright v1.56: From MCP to Playwright Agents - https://www.youtube.com/watch?v=_AifxZGxwuk

[4] GitHub: Playwright MCP server - https://github.com/microsoft/playwright-mcp

[5] Visual Studio Code: Use MCP servers in VS Code - https://code.visualstudio.com/docs/copilot/customization/mcp-servers

[6] 公众号:超牛的浏览器自动化 MCP,让 AI 像人类一样玩转网页 - https://mp.weixin.qq.com/s/fF3AMPumzouwdX6gnPYEyg