Web 自动化测试智能体

测吧（北京）科技有限公司 黄延胜

今天我们开始讲解 Web 自动化测试智能体相关技术。

---

Web 自动化智能体

Web 自动化智能体是智能体的一种，在已有智能体的基础上，提供了 Web 交互能力。 核心元素包括大语言模型、推理决策机制、工具套件等元素。有了 Web 智能体，我们就可以实现手工测试用例的智能化执行。

• LLM 大语言模型
• ReAct 等推理决策机制
• Tookit Web 自动化工具

---

常见 Web 自动化智能体

• Browser Use
• Web Voyager
• Computer Use
• Runner H
• OpenAI Operator
• ByteDance Midsence
• Eko

这是目前行业里几个知名的 Web 自动化智能体。 包括 Browser Use，Web Voyager，Computer Use，Runner H，OpenAI 的 Operator。 字节跳动的 Midsence eko 等。 未来我们还会介绍更多知名的开源 Agent。

接下来我们通过字节跳动官方发布的， midsence 的演示视频，简单了解下什么是 web agent。

---

Midscene Web Agent 示例

---

Browser Use 示例

这是一个 Browser Use Agent 的演示，执行的任务是，阅读我的简历并找到机器学习职位，将它们保存到文件中，然后在新标签中开始申请它们。

---

Web 自动化智能体价值

效率

手工用例可以无缝转自动化，降低了自动化测试的应用门槛与实施成本

成本

编写测试用例更加容易，人类语言驱动，提高了测试执行效率

质量

配合模型驱动测试与知识图谱可以进一步的提高测试覆盖

了解了智能体的使用，我们来总结下 Web 自动化测试智能体的价值， 目前很多公司里都有大量的手工测试用例，少则几十条，多则成千上万条。 如果这些测试用例可以通过 AI 执行， 就可以让测试工程师从手工执行的繁琐流程中脱离，大大提高测试效率。 测试工作也就可以从体力劳动升级为脑力劳动， 测试工程师就有了更多的时间去完善测试设计，做好测试的分析度量。

---

Web 自动化智能体的核心元素

大模型

Ollama ChatGPT Claude

推理框架

ReACT LangGraph Dify

自动化工具套件

• click send_keys source
• Selenium Playwright

页面信息提取

• 基于截图的视觉识别方法
• 基于结构化信息的识别方法

web 自动化智能体主要用到如下几个技术。 大模型，帮助我们从上下文中生成想要的自动化指令。 自动化工具包，可以解析大模型的输出指令，调用底层的自动化测试工具框架，类似 selenium playwright 等框架，实现对 web 的基本自动化操作。我们需要让大模型理解页面，还需要提供给大模型一定的页面上下文。目前行业里主要有两个方案， 第一种是使用基于截图的视觉识别方法， 第二种是基于结构化信息提取的方法。结构化信息提取比截图可以获得更加丰富的信息。是专业工程师的首选。

---

基于截图的视觉识别方案 OmniParser

在基于截图的视觉识别方案里，微软的 omini parser、yolo 11 等框架都提供了比较好的视觉识别能力。这种方案更通用，可以扩展到移动端、桌面程序上。缺点是会缺少一些结构化信息，比如界面上的识别标记，id name class 等属性就读取不到了，影响一些基于业务的分析。

---

Web Voyager 工作原理

Web Voyager 工作原理是查看每个回合的带注释的浏览器屏幕截图， 然后选择下一步要采取的行动。 图像识别成本较大，可以借鉴，并不推荐。

这是 lang graph 上的一个 Web Voyager 的示例。它的工作原理是让大模型查看每个回合的带注释的浏览器屏幕截图。然后选择下一步要采取的行动。图像识别成本较大，可以借鉴，并不推荐。

大家可以点击 ppt 中的标题链接直接跳转到官方示例。

---

结构化信息提取方式

结构化信息提取方案是基于页面的结构读取的，比如读取网页的 dom 结构，或者手机端的界面结构。很多网站是动态 javascript 生成的网站，比如 vue react 等等。selenium 的 page source 只是获取原始的页面代码，不是页面渲染后的内容。大模型很难理解最原始的 javascript 与 html 内容。更好的方案是使用 javascript 读取 dom 并拼装成一个可以让大模型理解的标准结构，比如 html 结构，元素列表、或者 json 结构体。

---

页面内容提取逻辑

(args = { doHighlightElements: true, focusHighlightIndex: -1 }) => {
  // Function to traverse the DOM and create nested JSON
  function buildDomTree(node, parentIframe = null) {
    if (!node) return null;

    // Special case for text nodes
    if (node.nodeType === Node.TEXT_NODE) {
      const textContent = node.textContent.trim();
      if (textContent && isTextNodeVisible(node)) {
        return {
          type: "TEXT_NODE",
          text: textContent,
          isVisible: true,
        };
      }
      return null;
    }

    // Check if element is accepted
    if (node.nodeType === Node.ELEMENT_NODE && !isElementAccepted(node)) {
      return null;
    }

    const nodeData = {
      tagName: node.tagName ? node.tagName.toLowerCase() : null,
      attributes: {},
      xpath:
        node.nodeType === Node.ELEMENT_NODE ? getXPathTree(node, true) : null,
      children: [],
    };

    // Copy all attributes if the node is an element
    if (node.nodeType === Node.ELEMENT_NODE && node.attributes) {
      // Use getAttributeNames() instead of directly iterating attributes
      const attributeNames = node.getAttributeNames?.() || [];
      for (const name of attributeNames) {
        nodeData.attributes[name] = node.getAttribute(name);
      }
    }

    if (node.nodeType === Node.ELEMENT_NODE) {
      const isInteractive = isInteractiveElement(node);
      const isVisible = isElementVisible(node);
      const isTop = isTopElement(node);

      nodeData.isInteractive = isInteractive;
      nodeData.isVisible = isVisible;
      nodeData.isTopElement = isTop;

      // Highlight if element meets all criteria and highlighting is enabled
      if (isInteractive && isVisible && isTop) {
        nodeData.highlightIndex = highlightIndex++;
        if (doHighlightElements) {
          if (focusHighlightIndex >= 0) {
            if (focusHighlightIndex === nodeData.highlightIndex) {
              highlightElement(node, nodeData.highlightIndex, parentIframe);
            }
          } else {
            highlightElement(node, nodeData.highlightIndex, parentIframe);
          }
        }
      }
    }

    // Only add iframeContext if we're inside an iframe
    // if (parentIframe) {
    //     nodeData.iframeContext = `iframe[src="${parentIframe.src || ''}"]`;
    // }

    // Only add shadowRoot field if it exists
    if (node.shadowRoot) {
      nodeData.shadowRoot = true;
    }

    // Handle shadow DOM
    if (node.shadowRoot) {
      const shadowChildren = Array.from(node.shadowRoot.childNodes).map(
        (child) => buildDomTree(child, parentIframe)
      );
      nodeData.children.push(...shadowChildren);
    }

    // Handle iframes
    if (node.tagName === "IFRAME") {
      try {
        const iframeDoc = node.contentDocument || node.contentWindow.document;
        if (iframeDoc) {
          const iframeChildren = Array.from(iframeDoc.body.childNodes).map(
            (child) => buildDomTree(child, node)
          );
          nodeData.children.push(...iframeChildren);
        }
      } catch (e) {
        console.warn("Unable to access iframe:", node);
      }
    } else {
      const children = Array.from(node.childNodes).map((child) =>
        buildDomTree(child, parentIframe)
      );
      nodeData.children.push(...children);
    }

    return nodeData;
  }

  return buildDomTree(document.body);
};

这是一个非常复杂的 js 文件示例，里面包含了若干子函数，包含了高亮元素、提取元素路径、提取页面的可视化的可接受事件的元素提取方法。核心思路是使用 JavaScript 读取页面上下文中的所有元素，对这些元素进行遍历，然后过滤出来有价值的一些控件，比如有界面又有可触发事件的核心元素。有了有效的元素列表，我们就可以把这些元素在后续的流程里发给大模型，让大模型判断应该去操作哪个元素。大家点击标题的链接，即可跳转到源文件。

---

Dify Agent 默认使用 ReACT 提示词

在大模型应用开发这一章节里，我们会讲解具体的智能体开发细节。 可以使用 Dify 等平台或者 lang chain lang graph 去构建自己的智能体。

---

---

Q&A

最后总结一下，本节课我们讲解了 agent 的基本知识， 并介绍了一个开源的 web agent 框架。 Web 自动化 Agent ，可以让我们实现由人类语言驱动网页进行自动化操作， 可以用在日常的测试工作中，提高我们的工作效率。 既然掌握了这些知识，那就在工作中快点用起来吧。