Playwright-MCP Web 运行时探索

Playwright-MCP Web 运行时探索 — 学习笔记（第04课）

课程目标

  • 使用 Playwright-MCP 让 Claude Code 打开 EventFlow 页面并读取页面结构
  • 限定 Agent 只做页面摸排，不写代码、不做完整测试
  • 输出包含页面、角色、入口、关键元素、动作、跳转和疑点的功能地图
  • 分别探索普通用户和活动发起者的主要路径
  • 判断 AI 是否漏掉关键页面、误解入口或编造功能
  • 在 Agent 卡住、循环、误解页面时打断并纠偏

本课产物

完成本课后，应得到以下文档：

# 文件名 内容
1 第04课_EventFlow_Web功能地图.md 页面清单、入口、角色、关键元素、动作和跳转
2 第04课_EventFlow_Web探索疑点清单.md AI不确定、需人工确认、需后续探测的问题
3 第04课_探索会话记录.md 关键 Prompt、AI 输出、人类纠偏记录
4 第04课_人工评审批注.md 如何审查和修订 AI 功能地图的示例

一、Web 运行时探索

1.1 文档与页面真相

从现实情况来看，需求文档、接口文档和源码未必能完整说明页面真实状态。在对实际的 Web 系统进行测试时，不能只靠"读文档"，测试人员通常需要先手动进入系统摸排页面，记录功能入口和业务路径。

本课的核心：让 Agent 借助 Playwright-MCP 完成这件事。

页面真相的藏身之处：

信息 可能藏在哪里
登录后默认跳转到哪里 运行时页面
某个按钮是否置灰 页面状态
普通用户和活动发起者看到的菜单是否不同 角色登录后的界面
报名成功后页面如何变化 实际操作后的状态
异常提示文案是什么 表单提交后的页面反馈

1.2 功能地图的定位

第04课_EventFlow_Web功能地图.md 是系统页面结构和业务入口的第一轮认知记录。

产物类型 核心关注点
功能地图 页面、入口、角色、动作、跳转、疑点
测试用例 前置条件、步骤、预期结果
测试契约 前置状态、验证意图、核心断言
自动化脚本 可执行测试代码

1.3 多轮探索策略

为了覆盖不同场景、不同角色、不同身份，一般来说要分别使用每一个角色进行探索：

轮次 探索角色 目标
第1轮 未登录用户 识别首页、导航、登录入口、公开可见内容
第2轮 普通用户 识别活动浏览、详情、报名、取消等入口
第3轮 活动发起者 识别创建活动、管理活动、查看报名等入口

每探索一轮都记录 "看到了什么" 和 "没看懂什么"，前者构成了功能地图，后者构成了疑点清单。

二、Playwright-MCP：AI 的眼睛和手

2.1 工具分工

工具 在本课中的作用
Claude Code 理解任务、组织观察结果、输出 Markdown
Playwright-MCP 打开浏览器、读取页面结构、执行基本交互
测试人员（人类） 划定范围、评审结果、纠偏和最终判断

2.2 工具选择与安装

Playwright 是微软开发的浏览器自动化工具，提供两种 Agent 接入方式：

对比维度 Playwright-MCP Playwright-CLI
接入方式 MCP 协议 Skills 方式
浏览器窗口 显示 不显示
登录状态 保持 不保持
历史记录 保留 不保留
并行启动 不支持 支持

选择建议：

  • Playwright-MCP — 适合对单个浏览器的长期使用、探索、观察、推理
  • Playwright-CLI — 适合临时任务、不保留记录的安装步骤和流程，后台静默运行

三、探索前准备

3.1 账号与探索范围

账号准备：

角色 账号 密码
普通用户 qa.demo@eventflow.test Password!
活动发起者 organizer@eventflow.test Passw0rd!

探索范围：

  • 未登录状态下的首页和公开入口
  • 普通用户登录后的主路径
  • 活动发起者登录后的主路径

3.2 探索记录文件模板

# 第04课 探索会话记录

## 探索目标
使用 Playwright-MCP 对 EventFlow Web 端做运行时摸排，输出功能地图和疑点清单。

## 探索范围
- 未登录状态
- 普通用户路径
- 活动发起者路径

## 关键 Prompt
记录本课每一轮探索使用的 Prompt。

## 人类纠错记录
记录 AI 卡住、误解、循环探索时的处理方式。

3.3 统一输出字段

功能地图 Markdown 使用固定表头：

| 页面/区域 | 角色 | 入口 | 关键元素 | 可执行动作 | 跳转/状态变化 | 疑点 |

四、第一轮探索：未登录状态

4.1 启动探索 Prompt

你是一个软件测试工程师专家。请使用 playwright-mcp 打开 EventFlow Web 端：http://127.0.0.1:5174

任务：
请进行第一轮运行时摸排，目标是建立 Web 功能地图，不要写自动化代码，不要修改任何文件。

探索范围：
1. 未登录状态下首页能看到什么。
2. 页面中有哪些入口、按钮、导航、表单或提示信息。
3. 哪些功能看起来需要登录后才能继续。

输出要求：
1. 使用 Markdown 表格。
2. 表格字段包括：页面/区域、角色、入口、关键元素、可执行动作、跳转/状态变化、疑点。
3. 对不确定的内容写入"疑点"，不要编造。
4. 如果遇到弹窗、遮罩或无法继续的页面状态，请先停止并说明当前状态，不要无限重试。

4.2 期望观察内容

观察项 示例
首页主要区域 标题、导航、活动列表、登录入口
公开内容 是否能看到活动列表或详情
需要登录的入口 报名、创建活动、个人中心
登录入口 登录按钮、登录表单、跳转链接
初始疑点 未登录能否查看活动详情

以当前 EventFlow 实际页面为例，根地址会跳转到 /events，页面标题是 EventFlow Lite。未登录导航包含 "首页/登录/注册"，首页可见 "城市活动发现"、"筛选活动"、活动列表、状态筛选按钮、分页按钮，以及活动卡片上的 "查看详情并报名" 入口。

如果 AI 输出过于简略，可以追问：
"请补充首页中可见的主要入口、按钮和导航项。仍然只做未登录状态观察，不要登录，不要写代码。"

五、第二轮探索：普通用户路径

5.1 探索 Prompt

请继续使用 playwright-mcp 探索 EventFlow 的普通用户路径。

账号：
普通用户：qa.demo@eventflow.test / Password!

任务：
请登录普通用户账号，探索活动浏览、活动详情、报名、取消报名等相关入口。

约束：
1. 只做功能地图探索，不做完整测试验证。
2. 不写自动化代码。
3. 不修改项目文件。
4. 每发现一个页面或状态变化，都记录到功能地图。
5. 如果不确定某个业务规则，请写入疑点清单。

输出：
请更新 EventFlow Web 功能地图.md 的普通用户部分，并单独列出普通用户路径的疑点。

5.2 重点观察内容

  • 登录后默认跳转到哪个页面
  • 普通用户的导航栏与未登录时的差异
  • 活动列表中的操作入口（筛选、排序、分页）
  • 活动详情的完整信息（标题、时间、地点、状态等）
  • 报名入口状态（可报名/已满额/已结束）
  • 报名后的页面反馈与状态变化
  • 取消报名的入口与流程

六、第三轮探索：活动发起者路径

6.1 探索 Prompt

请继续使用 playwright-mcp 探索 EventFlow 的活动发起者路径。

账号：
活动发起者：organizer@eventflow.test / Passw0rd!

任务：
请登录活动发起者账号，探索创建活动、编辑或管理活动、查看报名信息等相关入口。

约束：
1. 只记录页面、入口、关键元素、可执行动作和状态变化。
2. 不写自动化代码。
3. 不修改项目文件。
4. 对没有实际看到的信息，不要推测为事实。

输出：
请更新 EventFlow Web 功能地图.md 的活动发起者部分，并单独列出需要人工确认的问题。

6.2 重点观察内容

  • 活动发起者的导航栏与普通用户的差异
  • "创建活动"的入口与表单结构
  • 已创建活动的管理面板
  • 查看/管理报名者的入口
  • 编辑/取消活动的功能
  • 活动发起者是否能看到普通用户路径中的所有功能

路由清单

示例：

  • / — 首页（重定向到 /events）
  • /events — 活动列表
  • /events/:id — 活动详情
  • /login — 登录页
  • /register — 注册页
  • /profile — 个人中心
  • /events/create — 创建活动
  • /events/:id/manage — 活动管理

6. 人工评审批注

  • 需要补充的页面：
  • 需要重新确认的入口：
  • 疑似 AI 误解的地方：

七、整理功能地图与疑点清单

7.1 功能地图结构

# EventFlow Web 功能地图

## 1. 探索范围
- Web 地址：http://127.0.0.1:5174
- 探索账号：普通用户、活动发起者
- 探索时间：
- 探索工具：Playwright-MCP

## 2. 未登录状态功能地图

| 页面/区域 | 角色 | 入口 | 关键元素 | 可执行动作 | 跳转/状态变化 | 疑点 |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| ... | ... | ... | ... | ... | ... | ... |

## 3. 普通用户功能地图

| 页面/区域 | 角色 | 入口 | 关键元素 | 可执行动作 | 跳转/状态变化 | 疑点 |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| ... | ... | ... | ... | ... | ... | ... |

## 4. 活动发起者功能地图

| 页面/区域 | 角色 | 入口 | 关键元素 | 可执行动作 | 跳转/状态变化 | 疑点 |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| ... | ... | ... | ... | ... | ... | ... |

## 5. 页面跳转关系摘要

```text
首页 -> 登录页 -> 活动列表 -> 活动详情 -> 报名状态
```

7.2 疑点清单结构

疑点编号 角色 页面/功能 疑点描述 为什么重要 建议后续处理
Q-WEB-001 普通用户 活动详情 报名后是否允许取消尚未确认 影响报名链路测试契约 第5课纳入风险矩阵，第7课探索线验证
Q-WEB-002 活动发起者 活动管理 创建活动后是否能编辑已有报名者 影响数据完整性测试 需人工确认业务规则

八、人工评审与卡点处理

8.1 人类评审清单

检查项 判断标准
是否覆盖主要角色 未登录、普通用户、活动发起者是否都有记录
是否覆盖主要路径 登录、浏览、报名、创建或管理活动等核心路径是否出现
是否区分事实和推测 实际看到的内容与 AI 推测是否分开
是否有疑点清单 AI 不确定的地方是否被明确列出
是否存在编造 是否出现页面中不存在的按钮、字段、接口或业务规则
是否角色混淆 普通用户和活动发起者的入口是否被混写
是否可作为下一课输入 功能地图是否足够支撑风险矩阵生成

评审意见保存到 第04课_人工评审批注.md。

8.2 Agent 卡住后的处理

Agent 卡在登录、弹窗、iframe、列表循环或详情页返回中时，使用以下干预 Prompt：

刚才探索过程似乎卡住了，请不要继续重复尝试。

请先输出：

  1. 当前所在页面或状态
  2. 你尝试了哪些操作
  3. 失败现象是什么
  4. 你认为可能的原因
  5. 建议的下一步处理方式

约束：不要继续点击，不要写代码，不要修改文件。

原则：如果连续两次不能摆脱卡点，人工介入判断，或把该点写入疑点清单。

附录：Playwright-MCP 常用操作速查

操作 说明
browser_navigate 导航到指定 URL
browser_snapshot 获取当前页面的无障碍结构树
browser_click 点击页面元素
browser_type 输入文本到表单字段
browser_select_option 选择下拉选项
browser_fill_form 批量填写表单字段
browser_console_messages 获取浏览器控制台日志

本笔记源自第04课：使用 Playwright-MCP 进行 Web 运行时探索与功能地图生成。

posted @ 2026-07-14 00:04  风一样的骚年010  阅读(8)  评论(0)    收藏  举报