【Chrome插件】页面自动化助手使用介绍

本文主要演示如何在顾得助手插件中使用页面自动化功能，该功能不依赖LLM。

安装教程：'顾得助手' 扩展程序使用介绍

如何开启？

打开顾得助手侧边栏 --》对话页面 --》双击输入框或输入框键入/ --》页面自动化(Beta)。

第一个自动化配置

自动化控制台主页，点击'添加配置'，进入配置页面。配置页面分为上下两个部分，上部为配置拓扑（使用mermaid语法），下部分为步骤编排，目前支持'录屏编排'和'手动添加'两种方式。

录屏编排

配置页面点击'开始录制'按钮，开启录屏编排。用户在页面上操作要自动执行的流程，助手会自动捕获点击、右键、鼠标悬浮、输入框输入事件，并记录到编排步骤中。

示例：批量新增用户

PS：本文以我开发的一个后台管理界面操作为例。

添加配置

首先进入到'用户管理'界面。点击助手中'开始录制'按钮，然后宿主页面依次选择'系统管理'，'用户管理'，助手会自动添加根步骤到编排列表，同时更新编排拓扑。

此次我们是批量新增用户，所以我们继续在助手中点击'添加循环流程'按钮，然后点击'开始录制'按钮，进入循环配置，助手会将你在页面上的操作自动记录到'循环配置流程'中。

此时流程如下：

配置数据

流程添加完成之后，开始配置数据，配置数据只针对输入框输入数据，输入框默认别名依次为 alias1、alias2...，用户可以自定义别名，我这里为了方便演示将'input-登录用户名'别名设置为 userName，然后点击'配置数据'按钮，系统会自动带入配置的别名数据。

配置数据支持，手动编辑，也支持 AI生成 。

手动编辑：

AI生成：

点击'AI生成'，可以让AI模拟生成数据，我这里在输入框输入'生成3组测试数据'，点击'开始生成'按钮，AI会自动生成三组测试数据。

拓展：

同组数据中，支持通过 {{item.别名}} 引入同组其它属性的值，示例：

json 复制代码

[
  {
    "userName": "user001",
    "alias2": "{{item.userName}}_A1b2C3D4E5F6",
    "alias3": "JohnDoe",
    "alias4": "john.doe@example.com",
    "alias5": "13812345678"
  }
]

执行自动化配置

配置页面，点击右上方的'开始执行'按钮，执行自动化配置。

配置持久化

自动化配置数据存储在 LocalStorage 中，并且所有会话共享，默认的配置名以'页面url+配置'命名，你可以自定义命名以方便区分。

执行日志

自动化配置页面，点击'执行日志'tab，查看执行记录。

存在的问题及解决方案

问题1：

部分页面的元素ID是动态变化的（重启浏览器后元素ID变了），此时你需要重新采集步骤的元素。比如我想重新采集 用户名输入框 元素：