跳到主要内容

等待元素

等待元素节点用于暂停流程执行，直到指定元素出现或消失后再继续。解决动态页面中"元素还没渲染、流程就跑过去了"的问题。

等待元素节点参数配置面板

使用示例​

场景：打开一个商品列表页，列表数据是异步加载的，直接采集会抓空。在「打开网页」和「数据采集」之间插入等待元素节点。

打开网页 → 等待元素 → 数据采集
              ↑
         等商品列表出现再继续

配置：目标元素填 .product-item（列表项的选择器），监控类型选「元素出现」。流程跑到这里会暂停，商品卡片渲染出来后立即继续采集。

另一个场景：提交表单后页面上出现一个 loading 遮罩，需要等遮罩消失才能继续操作。

点击提交按钮 → 等待元素(等.loading-spinner消失) → 点击下一页

配置：目标元素填 .loading-spinner，监控类型选「元素消失」。

参数说明​

目标元素​

CSS 选择器，指定要监控的元素。支持 {{变量名}} 引用动态选择器。

监控类型​

  • 元素出现：匹配到目标元素时继续。最常用——等按钮渲染、等列表加载、等弹窗弹出
  • 元素消失：不再匹配到目标元素时继续。等加载动画消失、等遮罩层关闭

超时时间​

最大等待秒数，不填默认 30 秒。超时后节点报错、流程中断。网络慢或页面复杂时适当调大。

多元素匹配行为​

当选择器匹配到多个元素时，「元素出现」和「元素消失」的处理逻辑存在关键差异。

元素出现：任意一个即通过​

选择器 .product-item 匹配到页面上 5 个商品卡片，流程会等到任意一个可见元素出现后就立即继续，不会等全部 5 个都渲染完。

如果选择器分批异步渲染（例如先渲染 3 个、再渲染 2 个），节点会在第一批 3 个出现时就触发通过。

元素消失：全部消失才通过​

选择器 .loading-spinner 匹配到页面上 3 个加载遮罩，流程会等到 3 个全部从页面消失后才继续。只要还剩任意一个可见，节点就会一直等待，直到超时。

这意味着：

  • 如果元素始终残留（即使不可见但没有从 DOM 中移除），会导致超时
  • 如果只需要等其中一个消失，应让选择器尽量精确到具体那一个元素（例如通过 :nth-child() 或更具体的 class）

可见性判定​

等待元素节点不只是检查 DOM 节点是否存在，而是检查视觉可见性。元素必须同时满足以下条件才算"可见"：

  • 节点处于 DOM 树中（未被移除）
  • 元素有实际占位尺寸（offsetWidth > 0 或 offsetHeight > 0）
  • 通过 getClientRects() 能获取到渲染矩形

display: none 或 visibility: hidden 的隐藏元素不会触发「元素出现」，也不会阻止「元素消失」通过。

常见问题​

等待超时但元素明明在页面上​

现象：元素已在页面显示，节点仍然超时。

原因：选择器写错，或元素在 iframe 中未切换上下文。

解决：在开发者工具 Console 执行 document.querySelector('你的选择器') 验证；如果元素在 iframe 中，先用「切换 iframe」进入。

多元素场景超时​

现象：「元素消失」一直等到超时，但肉眼看到目标已经没了。

原因：选择器匹配到了意料之外的元素，或者页面上有不可见的残留节点仍然匹配了该选择器。

解决：把选择器写得更精确，缩小匹配范围；或在开发者工具中检查是否还有隐藏的元素残留。