元素变化

在自动化网页操作时，我们经常会遇到这样的情况：点击一个按钮后，网页上某个区域的内容会发生变化（比如加载出新的商品列表、显示一个提示信息、或者表格数据刷新）。如果您的 RPA 流程在网页内容还没变化完就去操作，就可能出错。

“元素变化”功能就是为了解决这个问题而设计的。它能让您的 RPA 流程智能地“等待”网页上某个区域发生变化，确保在进行下一步操作时，网页内容已经准备就绪。

什么是“元素变化”功能？

简单来说，“元素变化”功能就是让 RPA 插件“盯着”网页上的某个特定区域。当这个区域的内容、结构或属性发生变化时，插件就能察觉到，并认为“变化已经完成”，然后才允许流程继续执行后续的步骤。

它的原理是基于 MutationObserver 的技术，这是一种非常高效和准确的监听网页变化的机制。

常见应用场景：

“元素变化”模块通常会包裹您希望引起网页变化的那个操作模块。比如：点击元素会引起这区域内容、结构或属性发生变化，那么就把这模块包裹进来。

元素变化

在“元素变化”模块的配置面板中，首先要告诉插件您想观察网页上哪个区域的变化。

目标元素：

这个输入框用于指定您希望观察其变化的网页元素。
您可以直接输入 CSS 选择器来精确地定位元素。
或者，点击输入框旁边的元素选择器工具定位（魔法棒图标）。此时浏览器会进入选择模式，您可以在网页上直接点击您想要观察变化的区域，插件会自动获取并填写对应的 CSS 选择器。参考元素选择器工具
此外，您也可以通过变量来动态指定目标元素，例如 {{@var.myElementSelector}}参考动态变量

重要提示

这个“目标元素”是被观察者，也就是我们想知道它什么时候发生变化的区域。

在“观察变动”下拉菜单中，您可以选择插件具体要“盯”着哪种类型的变化。这能让您的等待更精确。

子节点变动：
- 表示目标元素内部的直接子元素发生了增加、删除或顺序变化。
- 最常用的选项。例如，点击“加载更多”后，商品列表区域会增加新的商品（子节点增加）；或者表格数据刷新后，内部的行（子节点）可能被替换。
后代节点：
- 表示目标元素内部的任意后代元素（包括子节点和子节点的子节点等）发生了变化。
- 通常与“子节点变动”配合使用，表示不仅是直接的子元素，更深层次的结构变化也算。
属性变动：
- 表示目标元素的某个 HTML 属性发生了变化（例如 class 属性、style 属性等）。
- 例如，某个提示框的 display 属性从 none 变成了 block（从隐藏变为显示）。
字符数据变动： _ 表示目标元素内部的文本内容发生了变化。 _ 例如，一个显示数字的区域，数字从“100”变成了“200”。

您可以根据实际需求选择一个或多个变动类型。在大部分情况下，“子节点变动”和“后代节点”的组合（如图中所示）就能满足等待内容刷新的需求。

“超时结束”表示插件最长会等待多少秒，如果在这个时间内没有监测到目标元素的变化，流程就会停止等待并报错，或者根据后续的设置继续执行。

默认是 60 秒。您可以根据网页的加载速度和网络情况调整这个值。例如，如果网页内容通常很快刷新，可以设置短一些；如果网络慢或加载内容多，可以设置长一些。

可能原因：
- “目标元素”选择不正确，或者它根本没有发生您期望的变化。
- “观察变动”类型选择不正确，例如，网页只是改变了元素的属性，但您只勾选了“子节点变动”。
- 导致变化的“操作模块”没有被正确地包裹在“元素变化”模块内部。
解决方法：
- 仔细检查“目标元素”是否是真正会发生变化的区域。
- 尝试多勾选几种“观察变动”类型（例如同时勾选“子节点变动”和“后代节点”）。
- 确认引起变化的模块（如“点击元素”）确实被拖入了“元素变化”模块的“拖动放置区域”内。