DOM Snapshot

如果想获取全套课程资料，请关注微信公众号 「AI面包君」，回复 「课程资料」 即可领取。

1. 给模型一份更容易使用的页面说明

quotes.toscrape.com 首页的 HTML 大概长这样：

<!DOCTYPE html><html><head>...300 行 head 标签和 meta...</head>
<body>
<div class="container">
  <div class="row header-box">
    <div class="col-md-8">
      <h1><a href="/" style="text-decoration: none">Quotes to Scrape</a></h1>
    </div>
    ...
  </div>
  <div class="quote" itemscope itemtype="http://schema.org/CreativeWork">
    <span class="text" itemprop="text">"The world as we have created it..."</span>
    ...
  </div>
  ...
</div>
</body></html>

原始 HTML 包含大量布局和页面结构信息。若当前任务只是找到登录入口，可以先提取与操作有关的部分，减少不必要的输入。

LLM 要回答的问题只有一个：

"用户要登录。我应该点哪个元素？"

就这个点击任务而言，先告诉模型有哪些可交互元素、名称是什么、对应哪个编号，就可以开始选择。需要阅读正文时，后面再加入内容提取工具。

这一章的产出：

[0] <a> Quotes to Scrape       → https://quotes.toscrape.com/
[1] <a> Login                  → https://quotes.toscrape.com/login
[2] <a> (about)                → https://quotes.toscrape.com/author/Albert-Einstein
...
[42] <a> Next →                → https://quotes.toscrape.com/page/2/

本章输出一份带编号的简化快照。它能减少重复结构，但也会丢掉部分信息；后面要检查这份快照是否足以完成任务。

<!-- bread-visual:start -->

图解： 只保留任务需要的交互信息，并给元素编号。 这些是课程示例编号；页面变化后要重新抽取，旧编号不能一直复用。

<!-- bread-visual:end -->

---

2. 跑起来

cd ch01_dom_snapshot
python main.py

预期输出

依次抽 3 个页面：

1. 首页 → 55 个元素（很多 tag 链接 + Login 链接 + Next 按钮）
2. /login → 7 个元素，关键的是 <input name="username"> / <input name="password"> / <input type="submit">
3. /search.aspx → 含两个 <select>（author / tag 下拉）

最后浏览器停留 3 秒 —— 这时打开 DevTools 看页面源码，你会看到所有被抽到的元素都多了一个 data-bread-id="N" 属性。这是后续章节"通过编号点击元素"的钥匙。

---

<!-- bread-practice:start -->