---
title: "W07 上机练习四：Claude Code＋Playwright MCP 按本地资料填网页表单"
---

# 🧪 练习四：Claude Code＋Playwright MCP 按本地资料填网页表单

[上机导航](https://ai.lingnan.top/materials/2026-autumn/w07/lab-manual) · [常见问题](https://ai.lingnan.top/materials/2026-autumn/w07/faq) · [工具说明总览](https://ai.lingnan.top/materials/2026-autumn/w07/tools-index)

材料在学生材料包的 `04_填网页表单/` 里。

## 这个练习做什么

给 Claude Code 装上 Playwright MCP，让它读文件夹里的两份资料（一份简历、一份实习意向），打开课程网站上的练习表单，逐项填好；填完先停下给人核对，人补上学号后再提交。

| 项 | 内容 |
| --- | --- |
| 客户端 | Claude Code（录屏用 2.1.303，macOS 终端），接 DeepSeek，模型 deepseek-flash；权限是默认模式，每条命令、每次浏览器操作都先问 |
| 工作区 | 一个新文件夹，放 `材料包/` 里的 `我的简历.md`、`实习意向.md` |
| 工具 | Playwright MCP，操作本机 Chrome |
| 表单 | https://ai.lingnan.top/survey/2026-autumn-w07-demo （练习用，填虚构信息） |
| 录屏长度 | 4 分 25 秒，等待和逐个确认的部分加速播放 |

### 🎬 讲解录播

<video controls preload="metadata" playsinline style="display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px" src="/course-materials/2026-autumn/w07/slides/media/w07-demo1c.mp4"></video>

录播 4 分 25 秒，带讲解和字幕，播放器右下角可以全屏。

## 准备

- 电脑上装好 Google Chrome。
- Claude Code 已经接好 DeepSeek（例如用 CC Switch 配置），在终端里输入 `claude` 能正常对话。
- 新建一个文件夹，把 `材料包/我的简历.md`、`材料包/实习意向.md` 拷进去。

## 先装工具：Playwright MCP

在这个文件夹里打开终端，输入 `claude` 启动。第一次进这个文件夹，它会问是否信任，选“信任”。然后发送：

```txt
帮我装 Playwright MCP：npm 用 npmmirror 源，全局安装，注册到用户作用域，不要用 npx，不下载浏览器内核，本机有 Chrome 就用 Chrome；装完告诉我怎么确认
```

它会先查 node、npm 的版本和下载源、本机有没有 Chrome，再请求运行安装命令。每条命令都会弹确认，看清再批准。录屏里它自己选的命令是下面三条（供对照；你的电脑上路径可能不同，由它自己判断）：

```txt
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install -g @playwright/mcp --registry=https://registry.npmmirror.com
claude mcp add --scope user playwright -- /opt/homebrew/bin/playwright-mcp --browser chrome
claude mcp list
```

**确认连接**：输入 `/exit` 退出 Claude Code，再输入 `claude` 重新启动，然后输入：

```txt
/mcp
```

列表里有 `playwright`，打着 ✔、显示 connected、25 个工具，就装好了。选中它回车，能看到状态是已连接，命令带着 `--browser chrome`。

## 指令原文

### 指令一：按资料填表，先不提交

```txt
打开 https://ai.lingnan.top/survey/2026-autumn-w07-demo ，根据这个文件夹里的简历和实习意向把报名表填好。每一项都要能在资料里找到依据，资料里没有的空着并告诉我；项目经历和申请动机按题目字数要求从资料里改写。填完先不要提交，把整页截图给我核对。
```

它会弹出一个 Chrome 窗口，这是 Playwright 控制的浏览器。每一次打开网页、读页面、填写、点击，终端里都先请求确认。

### 指令二：核对后补学号、提交

自己对着两份资料把截图逐项看过，再发送：

```txt
核对过了。学号填 20269999，提交吧，提交后把成功页截图给我。
```

录屏里用的学号是 20269999。表单以学号区分每份答案，同一学号再提交会覆盖旧答案，复现时换成你自己编的 8 位数字。

## 看点

- 网页表单有好几种控件：文本框、单选、多选、矩阵、长文本。智能体先读页面结构，弄清每道题是什么控件，再对着资料逐个填。
- 资料里找不到依据的不编：学号空着，并在回报里说明。
- 两段长文本按字数要求改写，它先用程序数过字数再填。
- 提交撤不回，它停下来让人核对，学号也由人来补。

## ✅ 自查

1. **看调用记录**：终端里能看到 Playwright 的工具调用，如 `browser_navigate`（打开网页）、`browser_snapshot`（读页面结构）、`browser_fill_form`（填文本框）、`browser_click`（点选）、`browser_take_screenshot`（截图）。
2. **提交前的截图**：对着两份资料逐项核，每一项都能在资料里找到出处；学号一栏是空的。
3. **两段长文本**：字数在题目要求之内；里面的经历、数字都出自资料，没有资料以外的内容。
4. **回报**：它列出了每项的依据，说明了学号为什么空着；年级那一项有没有提醒你确认（见下面常见问题）。
5. **提交后**：成功页写着“已提交”“练习表单已记录”。

## 常见问题

**表单全是必填，资料里没有学号怎么办？**
这是有意设计的。指令一要求“资料里没有的空着并告诉我”，它空着学号、在回报里说明。核对过后由你在指令二里补上，再让它提交。

**它提醒年级和入学年份对不上。**
简历写的是“大二（2024 级）”，按 2026 年秋算应该是大三。录屏里它按资料填了大二，并请人确认。这类矛盾该由人决定，不要让它自己改资料。

**确认框太多，能不能一律放行？**
默认权限模式下，每条命令、每次浏览器操作都要确认，录屏里装工具确认了 6 次左右，填表和提交确认了二十多次。看清每一条在做什么再点。安装和提交这类动作，不要为了省事选“以后不再询问”。

**装的时候它想下载浏览器，或者卡在下载上。**
Playwright 默认会下载自己的浏览器内核（Chrome for Testing），国内网络下不来。安装提示词里写明“不下载浏览器内核，本机有 Chrome 就用 Chrome”，并用 npmmirror 源。电脑上要先装好 Google Chrome。

**为什么要求“不要用 npx”？**
用 npx 注册时，每次启动都要联网取包，国内网络下容易慢或失败。全局装好后，启动时直接用本机的命令。

**装好了，但 `/mcp` 里看不到 playwright。**
MCP 在 Claude Code 启动时加载，装完要退出再重新启动。重启后仍看不到，让它运行 `claude mcp list` 查一下注册情况。

**它没用 Playwright，用了别的办法上网。**
电脑上如果装过别的浏览器类技能或工具，Claude Code 可能先用它们。在指令里写明“用 Playwright MCP 打开网页”。

**Chrome 弹出“翻译此页”之类的气泡。**
不影响填表。注意不要在终端里按 Esc 去关它：Esc 会打断 Claude Code 正在做的操作。

**整页截图里有一题被顶部导航条挡住，或者长文本框只显示末尾几行。**
整页截图的版面问题，录屏里也出现过。以它读回的表单值和你在 Chrome 窗口里直接看到的为准。

**提交后它报告控制台里有几条 404。**
录屏里是页面预取一个链接失败，和这次提交无关。成功页显示“已提交”即可。

**用 Windows 能不能照做？**
录屏在 macOS 上完成。Windows 上照这套提示词让 Claude Code 装 Playwright MCP，未实测。