浏览 MCP与Skills教程与资源
Playwright MCP 实操：隔离浏览器、读取页面与填写草稿
用微软 Playwright MCP 和一个本地无外部提交的练习页，走完页面快照、元素定位、输入与结果回读，理解登录态和网页副作用的边界。
先用独立浏览器，避免借用个人登录态
本例使用微软维护的 @playwright/mcp、Codex CLI、Node.js 18 或更新版本，以及用于静态页面的 Python 3。练习页只在 127.0.0.1 上提供，不需要登录、支付或真实业务账号。若没有 Python，可以用你已熟悉的本地静态服务器，保持相同端口与页面路径即可。
Playwright MCP 默认可以使用持久浏览器档案；本例明确加 --isolated。隔离会话从独立状态开始，不会自动借用你正在使用的浏览器标签页。隔离并不限制网站能接收什么请求，也不是网络安全沙箱。
保存这个不会向外发送表单的练习页
新建空目录 C:/mcp-browser-lab，把下面内容保存成 UTF-8 的 index.html。页面没有提交地址：‘生成草稿’只把输入显示在本页，输入本身也没有自动保存。这里的标题、字段和值是完整教学工件，不是某个真实采购网站的操作授权。
MCP 草稿练习页
<!doctype html>
<html lang="zh-CN"><meta charset="utf-8"><title>MCP 草稿练习</title>
<body>
<h1>会议预约草稿</h1>
<label>会议主题 <input id="topic" name="topic"></label>
<label>人数 <input id="people" type="number" min="1" max="10" value="1"></label>
<button id="preview" type="button">生成草稿</button>
<p id="result" role="status">尚未生成草稿</p>
<script>
document.querySelector('#preview').addEventListener('click', () => {
const topic = document.querySelector('#topic').value;
const people = document.querySelector('#people').value;
document.querySelector('#result').textContent =
'草稿：' + topic + '；人数：' + people + '；未提交';
});
</script>
</body></html>仅监听本机的静态服务
python -m http.server 8765 --bind 127.0.0.1 --directory C:/mcp-browser-lab
保持这个终端运行；先在普通浏览器打开 http://127.0.0.1:8765/，确认页面标题正确。如果端口被占用，换端口并同步修改后续任务地址。
给这次练习一个独立的 Playwright 连接
将以下内容合并到 Codex 用户配置；本例为 Windows。npx 首次可能下载包，@latest 会随发布变化，长期使用时应核对并锁定适合自己的版本。
隔离会话，不加载浏览器扩展
[mcp_servers.playwright_lab] command = "cmd" args = ["/c", "npx", "-y", "@playwright/mcp@latest", "--isolated", "--browser", "chromium"]
本例没有使用 --extension、--cdp-endpoint 或 --storage-state，因此不需要导出个人 Cookie。启动时若提示浏览器组件缺失，按该版本 Server 返回的安装指引处理；不要把‘Server 已启动’当作浏览器已启动。
先读取结构，再填写，最后检查页面结果
先读取结构，再填写，最后检查页面结果
只使用 playwright_lab 完成下面的本地练习： 1. 打开 http://127.0.0.1:8765/，报告实际 URL 与页面标题。 2. 获取页面快照，找到“会议主题”“人数”和“生成草稿”，不要猜元素引用。 3. 填入主题“MCP 连接复盘”、人数“3”。先回读字段，确认无误。 4. 点击“生成草稿”，再次读取页面快照。 5. 返回状态文本，预期是“草稿：MCP 连接复盘；人数：3；未提交”。 不要打开其他网站，不安装浏览器扩展，不使用个人登录态。 如某个步骤失败，报告失败的工具、参数与页面当前状态，不跳过它编造结果。
预期来自练习页的实际代码；只有你的运行记录出现了对应值，才能写成你的测试结果。
快照中的元素引用为何不能跨页面硬抄
先发现，再行动
browser_navigate 负责导航，browser_snapshot 返回可访问性结构，输入和点击工具再按当前工具 schema 指定元素。工具参数会随版本变化，应使用当前会话返回的 schema；从别人的截图抄一个元素编号没有稳定含义。页面导航、刷新或结构变化后，旧引用可能失效。
页面回读比‘工具返回成功’更接近任务结果
输入成功只证明某个控件接收了动作；没有证明填的是正确表单、值通过校验或服务器已保存。本例要核对最终状态文本中的主题、人数和‘未提交’三个部分，任一不符都回到同一页检查。截图适合人工复核位置，结构化快照更适合核对文本和控件。
把练习迁移到真实网站时，先重新判断副作用
本练习页不会自动保存；真实网页可能在输入、失焦、选项变化或打开链接时写入状态。因此‘还没点提交’不能推出‘什么也没改’。改用业务沙盒并检查网站实际保存机制，不能沿用这页的安全结论。
根据最后成功的一步定位
导航显示连接被拒绝
- 原因
- 本地静态服务未运行、监听地址不同或端口不一致；尚未到页面交互层。
- 怎么改
- 先用普通浏览器访问同一 URL，确认服务终端没有退出；不要修改 MCP 工具权限来解决 HTTP 服务不存在。
页面可见，但元素引用失效
- 原因
- 页面发生刷新或快照后 DOM 已改变，先前引用不再对应当前结构。
- 怎么改
- 重新取快照并按字段标签定位；不要重复点击旧引用。
生成的草稿人数不对
- 原因
- 可能填了错误控件、旧值未被替换或网页校验改变了值。
- 怎么改
- 在点击前先回读输入值，必要时清空并重填。动作成功提示无法排除这些情况。
浏览器一打开就是个人账号
- 原因
- 配置可能使用了持久档案、扩展或加载了存储状态，和本例前提不一致。
- 怎么改
- 停止练习并核对实际启动参数；以独立 --isolated 连接重试，不清空个人浏览器档案。