使用RED编辑器（Robot Framework）遇ElementClickInterceptedException求助

执行Robot Framework脚本点击目标<a>元素时，触发ElementClickInterceptedException，提示点击操作被<div class="navigation-bar">元素拦截，已尝试添加休眠、滚动到视图等方法未解决。

现有代码：

Wait Until Keyword Succeeds 4x 5s Wait Until Element is Enabled ${button_locator}
Click Element ${button_locator}

目标元素HTML结构（修正标签闭合错误）：

<a href="#" role="button" class="rs-nav-item">
    <div class="segment-control-item-cat divider-text active">BUTTON</div>
    <span class="rs-ripple-pond">..</span>
</a>

当前使用的定位XPath：

//*[@id="root"]/section[2]/div/div[1]/div[2]/div[2]/a[1]

解决方案 #

• 方案1：临时隐藏拦截的导航栏元素
  通过JavaScript修改导航栏的显示属性，避免其遮挡目标元素，点击完成后可恢复原状态：

  # 保存导航栏原显示状态
  ${original_style}=    Execute JavaScript    return document.querySelector('.navigation-bar').style.display;
  # 隐藏导航栏
  Execute JavaScript    document.querySelector('.navigation-bar').style.display = 'none';
  # 等待元素可用并点击
  Wait Until Keyword Succeeds 4x 5s Wait Until Element is Enabled ${button_locator}
  Click Element ${button_locator}
  # 恢复导航栏原状态
  Execute JavaScript    document.querySelector('.navigation-bar').style.display = '${original_style}';
  

• 方案2：使用JavaScript直接触发元素点击
  绕过UI层面的点击事件，直接调用元素的click()方法，避免被遮挡元素拦截：

  Wait Until Keyword Succeeds 4x 5s Wait Until Element is Enabled ${button_locator}
  Execute JavaScript    arguments[0].click();    ${button_locator}
  

• 方案3：调整定位器，点击内部可见子元素
  目标<a>标签内部的<div>是可见的文本区域，直接定位该子元素进行点击，可能避开拦截：

  # 定位内部div元素
  ${inner_button_locator}=    Set Variable    //div[text()='BUTTON' and contains(@class, 'segment-control-item-cat')]
  Wait Until Keyword Succeeds 4x 5s Wait Until Element is Enabled ${inner_button_locator}
  Click Element ${inner_button_locator}
  

• 方案4：等待拦截元素不再遮挡目标元素
  通过JavaScript检查目标元素与导航栏是否存在重叠，直到无重叠后再执行点击：

  Wait Until Keyword Succeeds 10x 1s    Execute JavaScript
  ...    const target = arguments[0];
  ...    const navBar = document.querySelector('.navigation-bar');
  ...    const targetRect = target.getBoundingClientRect();
  ...    const navRect = navBar.getBoundingClientRect();
  ...    // 判断两个元素是否不重叠
  ...    return !(targetRect.top < navRect.bottom && targetRect.bottom > navRect.top && targetRect.left < navRect.right && targetRect.right > navRect.left);
  ...    ${button_locator}
  Click Element ${button_locator}
  

内容的提问来源于stack exchange，提问作者Nizar Youssef