Natbot代码详解：深入理解Crawler类的每个方法实现与GPT-3浏览器自动化技术

祝珏如

494人浏览 · 2026-05-08 15:27:46

祝珏如 · 2026-05-08 15:27:46 发布

Natbot代码详解：深入理解Crawler类的每个方法实现与GPT-3浏览器自动化技术

【免费下载链接】natbot Drive a browser with GPT-3 项目地址: https://gitcode.com/gh_mirrors/na/natbot

想要了解如何使用GPT-3驱动浏览器自动化吗？Natbot项目提供了一个简洁而强大的解决方案。这个开源项目通过Crawler类实现了智能浏览器控制，让AI能够像人类一样浏览网页、点击链接和填写表单。本文将深入解析Crawler类的每个方法实现，帮助您理解其工作原理和设计思路。

什么是Natbot？🤖

Natbot是一个基于Python的浏览器自动化工具，它利用GPT-3的智能决策能力来控制浏览器完成各种任务。项目的核心思想是将网页内容简化为结构化数据，让AI能够理解并操作网页元素。Crawler类是整个系统的核心组件，负责与浏览器交互、解析DOM结构、提取可操作元素等关键功能。

Crawler类初始化与浏览器启动

Crawler类的构造函数在natbot.py中定义，它使用Playwright库启动Chromium浏览器：

def __init__(self):
    self.browser = (
        sync_playwright()
        .start()
        .chromium.launch(
            headless=False,
        )
    )
    self.page = self.browser.new_page()
    self.page.set_viewport_size({"width": 1280, "height": 1080})

这段代码创建了一个可视化的浏览器实例，并设置了1280×1080的视口大小，确保网页元素能够正确渲染和定位。

页面导航与基础操作方法

go_to_page方法：智能页面跳转

natbot.py中的go_to_page方法负责导航到指定URL：

def go_to_page(self, url):
    self.page.goto(url=url if "://" in url else "http://" + url)
    self.client = self.page.context.new_cdp_session(self.page)
    self.page_element_buffer = {}

这个方法会自动处理URL格式，确保浏览器能够正确访问目标页面。同时，它创建了一个CDP会话用于后续的DOM操作，并初始化了页面元素缓冲区。

scroll方法：实现页面滚动

滚动功能在natbot.py中实现，支持向上和向下滚动：

def scroll(self, direction):
    if direction == "up":
        self.page.evaluate(
            "(document.scrollingElement || document.body).scrollTop = (document.scrollingElement || document.body).scrollTop - window.innerHeight;"
        )
    elif direction == "down":
        self.page.evaluate(
            "(document.scrollingElement || document.body).scrollTop = (document.scrollingElement || document.body).scrollTop + window.innerHeight;"
        )

通过JavaScript注入的方式，Crawler能够精确控制页面滚动位置，确保AI能够浏览到页面的所有内容。

元素交互：点击与输入操作

click方法：精准元素点击

natbot.py中的click方法实现了智能点击功能：

def click(self, id):
    # 移除所有链接的target属性，防止新窗口打开
    js = """
    links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        links[i].removeAttribute("target");
    }
    """
    self.page.evaluate(js)
    
    element = self.page_element_buffer.get(int(id))
    if element:
        x = element.get("center_x")
        y = element.get("center_y")
        self.page.mouse.click(x, y)
    else:
        print("Could not find element")

这个方法首先通过JavaScript移除所有链接的target属性，防止点击时在新窗口中打开页面。然后根据元素ID从缓冲区获取坐标信息，执行精准点击。

type方法：文本输入功能

文本输入功能在natbot.py中简洁实现：

def type(self, id, text):
    self.click(id)
    self.page.keyboard.type(text)

通过先点击目标输入框，再模拟键盘输入的方式，确保文本能够正确输入到指定元素中。

crawl方法：核心DOM解析引擎

视口计算与元素筛选

crawl方法是Crawler类最复杂也最重要的部分，位于natbot.py。它首先计算当前视口信息：

device_pixel_ratio = page.evaluate("window.devicePixelRatio")
win_scroll_x = page.evaluate("window.scrollX")
win_scroll_y = page.evaluate("window.scrollY")
win_upper_bound = page.evaluate("window.pageYOffset")

通过这些计算，系统能够确定哪些元素当前在浏览器视口中可见，避免处理不可见的元素。

DOM快照与元素解析

Crawler使用CDP的DOMSnapshot.captureSnapshot接口获取完整的DOM结构：

tree = self.client.send(
    "DOMSnapshot.captureSnapshot",
    {"computedStyles": [], "includeDOMRects": True, "includePaintOrder": True},
)

这个方法获取了DOM节点的完整信息，包括位置、大小、属性等数据，为后续的元素分析提供了基础。

元素分类与属性提取

convert_name函数在natbot.py中定义了元素分类逻辑：

def convert_name(node_name, has_click_handler):
    if node_name == "a":
        return "link"
    if node_name == "input":
        return "input"
    if node_name == "img":
        return "img"
    if node_name == "button" or has_click_handler:
        return "button"
    else:
        return "text"

这个函数将DOM元素简化为几种基本类型：链接、输入框、图片、按钮和文本，大大降低了AI理解的复杂度。

元素关系树构建

add_to_hash_tree函数在natbot.py中实现了元素关系树的构建：

def add_to_hash_tree(hash_tree, tag, node_id, node_name, parent_id):
    # 递归构建元素关系树
    parent_id_str = str(parent_id)
    if not parent_id_str in hash_tree:
        parent_name = strings[node_names[parent_id]].lower()
        grand_parent_id = parent[parent_id]
        add_to_hash_tree(hash_tree, tag, parent_id, parent_name, grand_parent_id)
    # ... 后续处理逻辑

这个递归函数建立了元素的父子关系，帮助系统理解页面结构，特别是处理嵌套链接和按钮的情况。

可见元素过滤与格式化

在natbot.py中，系统对解析出的元素进行最终过滤和格式化：

for element in elements_in_view_port:
    # 检查元素是否包含文本或可点击
    if inner_text.strip() == "" and not is_clickable:
        continue
    
    page_element_buffer[id_counter] = element
    elements_of_interest.append(
        f"""<{converted_node_name} id={id_counter}{meta}>{inner_text}</{converted_node_name}>"""
    )
    id_counter += 1

最终生成简化的HTML-like表示，如<link id=1>About</link>，这种格式既保留了必要信息，又大大减少了token消耗。

实用技巧与最佳实践 🚀

1. 元素定位优化

Crawler使用中心点坐标进行元素点击，确保点击位置的准确性。在natbot.py中：

"origin_x": int(x),
"origin_y": int(y),
"center_x": int(x + (width / 2)),
"center_y": int(y + (height / 2)),

2. 属性提取策略

find_attributes函数在natbot.py中实现了高效的属性提取：

def find_attributes(attributes, keys):
    values = {}
    for [key_index, value_index] in zip(*(iter(attributes),) * 2):
        if value_index < 0:
            continue
        key = strings[key_index]
        value = strings[value_index]
        if key in keys:
            values[key] = value
            keys.remove(key)
            if not keys:
                return values
    return values