OpenClaw浏览器自动化：GLM-4.7-Flash控制Chrome完成表单填写

1. 为什么选择OpenClaw处理网页表单

上周我需要每天手动登录三个不同的后台系统填报数据，每次操作都要重复输入账号密码、定位表单字段、检查数据格式。这种机械劳动持续三天后，我决定用OpenClaw解放双手——这个开源框架最吸引我的地方在于，它能像人类一样直接操控浏览器，而背后的大模型负责理解页面结构和决策操作步骤。

与传统爬虫工具不同，OpenClaw+GLM-4.7-Flash的组合展现出三个独特优势：

第一是环境适应性。当目标网站改版时，传统脚本需要重新调整XPath或CSS选择器，而GLM-4.7-Flash能通过视觉理解自动适应新布局。我在测试期间故意修改了本地测试页面的DOM结构，系统仍然成功识别出"提交"按钮的位置。

第二是容错处理。在模拟百度搜索时，偶然出现的网络延迟导致页面加载超时。令我惊讶的是，智能体自动检测到异常后，不仅重新加载了页面，还从缓存中恢复了之前已填写的搜索关键词。

第三是自然语言交互。完成初始配置后，我只需要在飞书对话框输入"帮我在测试平台提交今日订单数据"，系统就能自动启动完整流程。这种体验比维护复杂的Python脚本要直观得多。

2. 环境准备与核心配置

2.1 基础组件安装

在MacBook Pro（M1芯片，macOS Ventura 13.5）上，我使用官方推荐的一键安装方案：

curl -fsSL https://openclaw.ai/install.sh | bash
openclaw onboard --install-daemon

安装过程中需要特别注意两点：

1. 当提示选择模型供应商时，我勾选了"Custom"选项，手动填入ollama部署的GLM-4.7-Flash服务地址
2. 在技能选择界面，必须确保勾选了selenium-driver和web-automation这两个核心模块

安装完成后，我在终端看到一段警告信息："Selenium技能需要额外浏览器驱动"。这里需要手动下载对应版本的ChromeDriver，放在/usr/local/bin目录下。我使用的是Chrome 124版本，所以执行了：

wget https://chromedriver.storage.googleapis.com/124.0.6367.91/chromedriver_mac64.zip
unzip chromedriver_mac64.zip
mv chromedriver /usr/local/bin/

2.2 模型服务配置

我的GLM-4.7-Flash服务部署在内网服务器，通过修改~/.openclaw/openclaw.json实现对接：

{
  "models": {
    "providers": {
      "glm-local": {
        "baseUrl": "http://192.168.1.105:8080/v1",
        "apiKey": "sk-no-key-required",
        "api": "openai-completions",
        "models": [
          {
            "id": "glm-4.7-flash",
            "name": "Local GLM Service",
            "contextWindow": 128000,
            "maxTokens": 8192
          }
        ]
      }
    }
  }
}

配置完成后，通过命令验证模型可用性：

openclaw models list

终端应该显示类似如下的输出：

✔ glm-local
  ├─ glm-4.7-flash (Local GLM Service)
  └─ Status: Ready (ping: 23ms)

3. 表单自动化实战演示

3.1 测试目标设定

我选择公司内部的一个CRM系统作为测试对象，需要自动完成：

1. 登录页面（含验证码识别）
2. 订单录入表单（动态字段依赖）
3. 数据提交后的结果校验

首先在OpenClaw工作区创建任务描述文件crm_task.yaml：

task: CRM订单自动化
steps:
  - action: navigate
    url: https://internal-crm.example.com/login
  - action: fill
    target: 登录表单
    data:
      username: $ENV:CRM_USER
      password: $ENV:CRM_PWD
      captcha: $ASK
  - action: click
    target: 登录按钮
  - action: wait_for
    target: 订单管理菜单
  - action: fill_dynamic_form
    form_type: 订单录入
    data_source: /data/orders.csv

3.2 验证码处理方案

测试系统使用了简单的数字验证码，我通过组合OpenClaw的两种能力解决：

1. 使用page-screenshot技能截取验证码区域
2. 通过GLM-4.7-Flash的视觉理解能力识别字符

关键配置是在skills目录下新建captcha_handler.py：

from openclaw.skills.base import Skill

class CaptchaHandler(Skill):
    def execute(self, task):
        screenshot = self.take_element_screenshot('//img[@class="captcha"]')
        prompt = """分析图片中的4位数字验证码，只需返回纯数字"""
        captcha_text = self.llm_vision_analysis(screenshot, prompt)
        return {'captcha': captcha_text.strip()}

在三次测试中，该方案成功识别率约85%。对于更复杂的验证码，建议接入专业打码平台API。

3.3 动态表单字段处理

订单表单中存在"产品类型→子类目→规格"三级联动下拉框，传统自动化脚本需要硬编码处理这些依赖关系。而使用GLM-4.7-Flash后，智能体会自动分析DOM结构并建立字段关联：

// OpenClaw生成的动态处理逻辑示例
async function handleDependentFields(page) {
  const productType = await page.select('#product-type', '电子产品');
  const subCategories = await page.waitForSelector('#sub-category');
  const specs = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('#spec option'))
      .map(opt => opt.value);
  });
  return { subCategories, specs };
}

通过日志分析发现，模型在首次遇到新表单时需要约3秒分析时间，后续相同表单的操作响应能缩短到800毫秒以内。

4. 性能优化与异常处理

4.1 执行速度提升技巧

经过一周的实操，我总结出三个加速技巧：

1. 元素定位缓存：在~/.openclaw/cache目录下会生成element_selectors.db文件，记录已识别过的页面元素定位策略。定期清理该文件可以避免陈旧的定位策略影响效率。

2. 模型预热：在定时任务开始前5分钟，通过API发送预热指令：

   curl -X POST http://localhost:18789/api/v1/preheat \
        -H "Content-Type: application/json" \
        -d '{"model":"glm-4.7-flash"}'
   

3. 并行控制：修改gateway_config.json增加浏览器实例池：

   {
     "selenium": {
       "max_instances": 3,
       "recycle_after": 5
     }
   }
   

4.2 常见错误排查

在三十余次测试运行中，我遇到了几个典型问题及解决方案：

问题1：页面加载超时导致元素找不到
解决方法：在任务配置中增加wait_conditions：

- action: click
  target: 提交按钮
  wait_conditions:
    - timeout: 10000
    - element_presence: div.loading-mask

问题2：动态生成的iframe无法识别
解决方法：在技能中强制指定iframe上下文：

self.driver.switch_to.frame('dynamic-iframe')
element = self.find_element('//input[@id="target"]')

问题3：模型误解析表单结构
解决方法：在容易出错的表单区域添加视觉锚点注释：

<!-- OPENCLAW_ANCHOR: 收货地址表单 -->
<div class="address-form">...</div>

5. 实际收益与适用边界

经过两周的持续使用，这个自动化方案每天为我节省约47分钟的手动操作时间。最令人惊喜的是上周五系统升级后，虽然页面DOM结构发生了变化，但得益于模型的视觉理解能力，整个流程无需调整仍能正常运行。

不过这种方案也有明显局限：

1. 对于需要法律效力的电子合同签署等场景，仍需人工复核
2. 处理包含复杂业务逻辑的表单（如保险费率计算）时，需要额外编写验证规则
3. 在低配设备上同时运行大模型和浏览器时，内存占用可能超过8GB

建议在以下场景优先考虑该方案：

• 日常办公中重复性的数据录入工作
• 需要跨多个系统同步数据的场景
• 临时性的数据采集或调研任务

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。