我构建网页爬虫已经有很多年了。从 BeautifulSoup、Selenium 到 Playwright，我以为自己已经见识过所有的套路。然而上个月，我撞上了一堵极其顽固的墙，差点让我彻底放弃整个项目。
这不仅是一个关于传统爬虫技术如何失效的故事，更解释了为什么我现在将 AI 视为数据提取工具箱中的正规军。
起因：一个极度反爬的网站
一位客户需要我从一家时尚零售网站上抓取商品列表。这听起来并非什么难事，对吧？我打开网页，看到了熟悉的结构：div.product-card，以及像 price、title、image 这样的 CSS 类名。我迅速写了一个 BeautifulSoup 脚本，运行之后却一无所获。
原来，该网页的 HTML 完全是动态渲染的。每一个商品卡片都由 JavaScript 生成，而且每次刷新页面时，CSS 类名都会随机改变（这很可能是使用了 CSS Modules 或 Tailwind 的代码混淆）。更糟糕的是，他们部署了极其严格的 Cloudflare 验证，在发起几次请求后就会直接封锁无头浏览器。
我尝试过并宣告失败的方法
首先是使用 requests + BeautifulSoup 进行静态解析，结果只返回了一个空空的 <div>。接着，我尝试用 Selenium 配合 Chrome 浏览器，虽然成功抓取了 5-10 页，但很快就被 Cloudflare 标记并封锁了 IP。即使用了 stealth 伪装设置和代理，依然无济于事。改用带有 stealth 插件的 Playwright，结果如出一辙，该网站的反爬虫逻辑异常强悍。
此后，我还尝试对网页截图并使用 Tesseract 进行 OCR 识别，但由于网页中花哨的字体和重叠的元素，识别准确率惨不忍睹。我也尝试了一些第三方的收费爬虫 API，但它们要么价格过于昂贵，要么返回的数据不够完整。在折腾了整整三天后，我几乎准备放弃，打算告诉客户这根本无法实现。
一次意外的启发
在向朋友大吐苦水时，他提到自己最近一直在使用 AI 从 PDF 发票中提取数据。“为什么不直接用在网页上呢？”他说，“把网页截个图，发送给视觉模型，让它直接返回 JSON 格式的数据。”
起初我深表怀疑。虽然我用过 GPT-4进行文本摘要，但用它来提取结构化数据？这难道不会又慢又贵吗？但当时我已经走投无路，于是决定写一段简单的脚本进行测试。
AI 视觉提取方案的实现
我的核心思路是：利用 Playwright 启动无头浏览器，访问目标 URL，等待页面网络闲置（networkidle）以确保动态内容加载完毕，然后截取一张全屏截图。将该截图转换为 Base64 编码后，直接作为图像输入发送给 OpenAI 的 GPT-4o 模型。在 Prompt 中，我要求它提取商品信息，并以包含 name, price (美元), image_url, availability 字段的 JSON 数组格式返回。
以下是当时的核心代码结构：
import base64
from openai import OpenAI
from playwright.sync_api import sync_playwright
def fetch_and_extract(url):
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page()
page.goto(url, wait_until="networkidle")
screenshot = page.screenshot(full_page=True)
browser.close()
base64_image = base64.b64encode(screenshot).decode("utf-8")
client = OpenAI()
response = client.chat.completions.create(
model="gpt-4o",
messages=[
{
"role": "user",
"content": [
{
"type": "text",
"text": "Extract product info in JSON format with name, price, image_url, and availability."
},
{
"type": "image_url",
"image_url": {
"url": f"data:image/jpeg;base64,{base64_image}"
}
}
]
}
]
)
return response.choices[0].message.content结果令人震惊，这个折腾了我整整三天的难题，AI 竟然在 10 分钟内就完美解决了。视觉模型不仅没有受到混淆 CSS 或 Cloudflare 动态 DOM 的干扰，还极其精准地识别并提取了所有商品信息，彻底颠覆了我对网页数据采集的认知。
【AgentUpdate 深度解析】 这种从“解析 DOM 树”向“基于视觉（VLM）进行 UI 理解”的范式转变，正是 AI Agent 迈向通用网页操作（Web-use）的核心技术趋势。横向对比来看，传统的基于 XPath 或 CSS 选择器的声明式爬虫极其脆弱，一旦前端改版即宣告失效；而像 Anthropic 最近推出的 Computer Use 机制以及微软的 WebArena，都在践行“像素即输入（Pixel-in, Action-out）”的理念。这表明，未来的 AI Agent 不再依赖于特定网站的 API 或死板的 HTML 结构，而是像人类一样通过视觉观察屏幕并直接进行决策与数据交互。虽然目前 VLM 在大规模高并发抓取上面临 Token 成本高和延迟问题，但随着轻量级端侧视觉模型（如 Qwen2-VL、Llama-3.2-Vision）的普及，基于视觉的网页理解将极大地降低 Agent 自动化的门槛，彻底重构数据采集、RAG 管道以及 RPA 自动化行业的生态链。
