BrowserBase Stagehand 项目中的动作缓存机制详解-优快云博客

BrowserBase Stagehand 项目中的动作缓存机制详解

stagehand An AI web browsing framework focused on simplicity and extensibility. 项目地址: https://gitcode.com/gh_mirrors/stag/stagehand

前言

在现代Web自动化测试和爬虫开发中，效率优化是一个永恒的话题。BrowserBase Stagehand 项目提供了一种创新的解决方案，通过智能缓存机制来优化自动化操作流程。本文将深入探讨Stagehand中的动作缓存技术，帮助开发者理解并应用这一强大功能。

为什么需要动作缓存？

在传统的Web自动化流程中，每次执行操作（如点击按钮、填写表单等）都需要重新分析页面结构，这不仅耗时，还可能产生不必要的计算资源消耗。Stagehand通过引入动作缓存机制，可以：

显著减少LLM（大型语言模型）的调用次数
降低操作延迟
提高自动化脚本的执行效率
减少API调用成本

核心概念：observe与act

Stagehand提供了两个关键方法来实现智能操作：

observe方法

observe方法允许开发者在实际执行操作前预览将要执行的动作。这个方法会返回一个包含操作细节的对象：

const [actionPreview] = await page.observe("点击快速开始链接");

返回的对象结构如下：

{
  "description": "快速开始链接",
  "action": "click",
  "selector": "/html/body/div[1]/div[1]/a",
  "arguments": []
}

act方法

act方法用于实际执行操作。当基于observe的结果执行时，不需要额外的LLM调用：

await page.act(actionPreview);

基础缓存实现

让我们从最简单的文件缓存实现开始，了解缓存机制的基本原理。

缓存读写函数

// 读取缓存
async function getCache(key: string): Promise<ObserveResult | undefined> {
  try {
    const cache = await readFile("cache.json");
    const parsed = JSON.parse(cache);
    return parsed[key];
  } catch {
    return undefined;
  }
}

// 写入缓存
async function setCache(key: string, value: ObserveResult): Promise<void> {
  const cache = await readFile("cache.json");
  const parsed = JSON.parse(cache);
  parsed[key] = value;
  await writeFile("cache.json", JSON.stringify(parsed));
}

带缓存的执行函数

async function actWithCache(page: Page, key: string, prompt: string, selfHeal = false) {
  try {
    const cacheExists = await getCache(key);

    let action: ObserveResult;
    if (cacheExists) {
      action = await getCache(prompt);
    } else {
      [action] = await page.observe(prompt);
      await setCache(prompt, action);
    }

    await page.act(action);
  } catch (e) {
    console.error(e);
    if (selfHeal) {
      console.log("尝试自我修复...");
      await page.act(prompt);
    } else {
      throw e;
    }
  }
}

高级缓存策略

基础实现虽然简单，但在实际应用中可能需要更复杂的缓存策略。

基于页面内容的缓存

// 获取页面内容作为缓存键的一部分
const pageContent = await page.content();
const key = hash(prompt + pageContent); // 使用哈希函数生成唯一键

结合可访问性树

// 获取可访问性树信息
const a11yTree = await page.accessibility.snapshot();
const key = hash(prompt + JSON.stringify(a11yTree));

缓存失效策略

在实际应用中，需要考虑缓存何时失效：

DOM结构变化：当页面结构发生变化时，缓存的selector可能失效
内容更新：即使DOM结构不变，内容可能已更新
动态元素：对于动态生成的元素需要特殊处理

可以通过以下方式增强缓存可靠性：

// 检查元素是否存在
async function isElementValid(selector: string) {
  return await page.$(selector) !== null;
}

// 增强型缓存执行
async function enhancedActWithCache(page: Page, key: string, prompt: string) {
  const cachedAction = await getCache(key);
  if (cachedAction && await isElementValid(cachedAction.selector)) {
    await page.act(cachedAction);
  } else {
    const [action] = await page.observe(prompt);
    await setCache(key, action);
    await page.act(action);
  }
}

性能优化建议

分层缓存：结合内存缓存和持久化缓存
批量操作：对连续操作进行批量缓存
智能预取：预测可能执行的操作并提前缓存
缓存压缩：对大型页面结构进行压缩存储

实际应用示例

假设我们需要自动化一个登录流程：

async function automatedLogin(page: Page) {
  const loginPrompt = "点击登录按钮";
  const usernamePrompt = "在用户名输入框中输入admin";
  const passwordPrompt = "在密码输入框中输入123456";
  const submitPrompt = "点击提交按钮";

  // 使用页面URL作为缓存键前缀
  const url = await page.url();
  
  await actWithCache(page, `${url}_login`, loginPrompt);
  await actWithCache(page, `${url}_username`, usernamePrompt);
  await actWithCache(page, `${url}_password`, passwordPrompt);
  await actWithCache(page, `${url}_submit`, submitPrompt);
}