本教程深入探讨了在使用 scrapy 进行网页抓取时，css 选择器可能在一个看似相同的页面上失效的原因。核心问题在于浏览器渲染的动态 html 与 scrapy 默认获取的原始 html 之间存在差异，这通常由 javascript 或 ajax 调用引起。文章将指导如何验证 scrapy 实际抓取到的 html 内容，并提供有效的调试方法，以避免选择器误判。
在进行网页抓取时，开发者常会遇到一个令人困惑的问题：一个在浏览器开发者工具中验证有效的 CSS 选择器，在 Scrapy 爬虫中却无法返回任何结果，尤其是在抓取多个结构相似的页面时。这种现象的根本原因并非选择器语法错误，而是 Scrapy 所“看到”的网页内容与用户在浏览器中看到的内容存在差异。
浏览器渲染与 Scrapy 抓取HTML的差异
现代网页为了提供更丰富的用户体验，普遍采用 JavaScript 或 AJAX 技术动态加载内容。当你在浏览器中访问一个页面时，浏览器会首先下载初始的 HTML 文档，然后执行其中的 JavaScript 代码。这些 JavaScript 可能会发起额外的网络请求（AJAX），获取数据并动态地插入、修改或删除 DOM 元素，最终呈现出用户所见的完整页面。
然而，Scrapy 作为一个 HTTP 客户端，默认情况下只负责发送 HTTP 请求并接收服务器返回的原始 HTML 响应。它不会执行页面中的 JavaScript 代码，也不会等待 AJAX 请求完成并更新 DOM。这意味着 Scrapy 抓取到的 response.text 往往是页面在任何 JavaScript 执行之前的“静态”版本。如果目标元素是由 JavaScript 动态生成的，或者其父级结构在 JavaScript 执行后才最终确定，那么 Scrapy 的选择器自然无法找到它们。
考虑一个具体的例子：假设我们有一个选择器 div.dp-conteudo__esquerda span.varpb。 在一个页面上，Scrapy 成功获取了 <span class="varpb">putear</span>，因为它确实位于 div.dp-conteudo__esquerda 内部，并且在初始 HTML 中就存在。 但在另一个页面上，即使在浏览器的“查看源代码”中能看到 <span class="varpb">putear</span>，Scrapy 却一无所获。这很可能是因为：
- Scrapy 获取的原始 HTML 中，span.varpb 元素压根就不在 div.dp-conteudo__esquerda 这个父级结构下。它可能存在于页面的其他位置，或者
- div.dp-conteudo__esquerda 这个容器本身，或者其中的 span.varpb 元素，是经过 JavaScript 动态加载或修改后才出现的。Scrapy 仅看到了初始的、不包含这些元素的 HTML。
验证 Scrapy 所见HTML的调试策略
要解决此类问题，最关键的步骤是确认 Scrapy 实际抓取到的 HTML 内容。以下是两种常用的调试方法：
立即学习“前端免费学习笔记（深入）”；
1. 将 response.text 保存到本地文件
在 Scrapy Shell 中，你可以方便地将当前 response 对象的文本内容保存为本地 HTML 文件。这样，你就可以使用浏览器打开这个文件，并利用浏览器的开发者工具进行检查，确保你所查看的 HTML 与 Scrapy 所获取的完全一致。
操作步骤：
-
启动 Scrapy Shell 并 fetch 目标 URL：
scrapy shell
-
在 Shell 中，抓取你想要调试的页面：
In [1]: fetch('https://dicionario.priberam.org/putear') # ... Scrapy logging ... In [2]: fetch('https://dicionario.priberam.org/puteares') # ... Scrapy logging ... -
将 response.text 保存到本地文件。为每个页面保存一个独立的文件，以便比较：
In [3]: with open('putear.html', 'wt', encoding='utf8') as fd: ...: fd.write(response.text) ...: In [4]: # 切换到第二个页面的response In [5]: fetch('https://dicionario.priberam.org/puteares') In [6]: with open('puteares.html', 'wt', encoding='utf8') as fd: ...: fd.write(response.text) ...: 现在，你可以在文件系统找到 putear.html 和 puteares.html。使用浏览器打开这些文件，然后使用开发者工具检查它们的 DOM 结构。你会发现，对于第二个页面，你预期的 div.dp-conteudo__esquerda span.varpb 路径可能并不存在。
2. 使用 view(response) 命令
Scrapy Shell 提供了一个便捷的 view(response) 命令，它会使用你系统默认的浏览器打开 Scrapy 当前 response 对象的 HTML 内容。这让你能够直观地看到 Scrapy 实际接收到的页面渲染效果，而无需手动保存文件。
操作步骤：
- 在 Scrapy Shell 中 fetch 目标 URL：
In [1]: fetch('https://dicionario.priberam.org/puteares') # ... Scrapy logging ... - 执行 view(response) 命令：
In [2]: view(response)
你的默认浏览器将打开一个新标签页，显示 Scrapy 抓取到的 HTML 内容。此时，你可以像平时一样使用浏览器的开发者工具来检查元素，了解其真实的 DOM 结构。
通过这两种方法，你可以清晰地识别出 Scrapy 抓取到的 HTML 与浏览器最终渲染的 HTML 之间的差异。一旦确认了 Scrapy 所见的实际 HTML 结构，你就可以相应地调整你的 CSS 选择器，使其与实际的 DOM 结构匹配。
总结与注意事项
- 核心理解： 永远要记住，Scrapy 默认只处理服务器返回的原始 HTML。如果页面内容依赖于 JavaScript 动态加载或修改，Scrapy 将无法直接获取。
- 调试为王： 当选择器失效时，首要任务是验证 Scrapy 实际获取的 HTML 内容。使用 scrapy shell 配合 fetch、with open(...) 或 view(response) 是最有效的调试手段。
- 选择器精度： 确保你的 CSS 选择器足够精确，既能匹配目标元素，又能避免误伤其他相同类名的元素。例如，如果 span.varpb 在页面中出现多次，但只有特定父级下的才是你需要的，那么 div.dp-conteudo__esquerda span.varpb 这样的组合选择器是必要的。
- 动态内容处理： 如果确认目标内容确实是通过 JavaScript 动态加载的，那么你需要考虑使用更高级的工具，如 Scrapy-Splash、Selenium 或 Playwright，这些工具能够模拟浏览器行为，执行 JavaScript 并等待页面完全渲染。但这超出了纯 CSS 选择器调试的范畴。
通过理解 Scrapy 的工作原理和掌握有效的调试技巧，你可以更准确地构建爬虫，提高数据抓取的成功率。
