Skip to main content

网页元素数据

许多 RPA 组件需要您从网页上选取一个特定的元素来执行操作（如点击、输入、提取数据）。“元素数据来源”就是指明这个目标元素及其内容的获取方式。

目标元素定位​

您可以指定一个或多个网页元素作为数据来源。插件主要通过CSS 选择器来定位这些元素。

手动输入 CSS 选择器： 在“目标元素”输入框中，您可以直接输入您知道的 CSS 选择器（例如：#product-title 或 .item-price）。

使用 CSS 选择器工具选取： 点击输入框右侧的定位图标（通常是魔法棒的图标）。此时，您的浏览器页面将进入选择模式，您可以将鼠标移动到需要操作或提取数据的网页元素上，高亮显示后点击鼠标左键确认。插件会自动捕获该元素的 CSS 选择器，并填充到输入框中。

目标元素

建议

选择器的准确性直接影响操作的成功率。尽量选择具有唯一性、且网页结构变化时不容易失效的元素。

高级用法：目标元素支持变量和模板语法​

“目标元素”输入框不仅支持直接的 CSS 选择器，还具备强大的变量解析能力，可以动态地构建和定位元素。

  • 直接使用字符串变量： 您可以直接在输入框中使用字符串 (String) 类型的变量作为完整的 CSS 选择器。
    • 示例： 如果您有一个名为 mySelector 的字符串变量，其值为 #item-{{@var.itemID}} .price，您可以直接在“目标元素”输入框中输入 {{@var.mySelector}}。

  • 使用 HTMLElement 变量作为基准进行相对定位： 这是最强大的用法之一。您可以使用一个 HTMLElement (网页元素) 类型的变量，并将其与后续的 CSS 选择器字符串智能组合，实现相对定位。

    • 语法： {{@您的HTMLElement变量}} .子元素选择器 .子元素选择器
    • 工作原理: 插件会首先找到 {{@您的HTMLElement变量}} 所代表的那个特定网页元素,然后，它会以这个元素为基准,进一步查找 .子元素选择器 所匹配的元素
    • 示例： 如果您有一个名为 商品卡片元素 的 HTMLElement 变量（通过之前的某个操作获取到的，例如 @var.商品卡片元素），您想获取该卡片内部的商品名称（其 CSS 选择器为 .product-name），则可以在“目标元素”输入框中填写：{{@var.商品卡片元素}} .product-name。

  • 混合使用字符串和非 HTMLElement 变量： 对于非 HTMLElement 类型的变量（如字符串、数值），插件会将它们解析为字符串，并与输入的其他字符串拼接成一个完整的 CSS 选择器。

获取数据内容​

从目标元素中，您可以提取不同类型的数据。在“目标元素”输入框的右侧，您会看到几个图标，点击小眼睛图标来选择您希望从元素中提取的数据类型

  • 文本内容 ： 提取元素内部的所有可见文本内容。
  • 图片地址 ： 如果目标元素是图片（<img> 标签），则提取其 src (源地址) 属性值。
  • 网址 (链接图标)： 如果目标元素是链接（<a> 标签），则提取其 href (超链接地址) 属性值。

预览

获取数据内容