如何在Shadow DOM中等待元素可见？Robot Framework解决方案

Robot Framework原生库没有提供等待Shadow DOM内元素可见的现成方案，我整理了一套实现方法，分享给有需要的开发者。

自定义关键字实现 #

我编写了如下自定义关键字：

Verify ShadowDom Element Visible
    [Arguments]    ${Element}
    Register Keyword To Run On Failure    Capture Page Screenshot
    ${previous_kw}=    Register Keyword To Run On Failure    Nothing
    FOR    ${index}    IN RANGE    1    30
        Sleep    1s
        ${status2}=    Run Keyword And Return Status    Execute Javascript    return ${Element}.checkVisibility();
        IF    '${status2}'=='False'    CONTINUE
        ...    ELSE    BREAK
    END
    Register Keyword To Run On Failure    ${previous_kw}
    IF    '${status2}'=='False'    Capture Page Screenshot
    IF    '${status2}'=='False'    Fail    Element not visible after 30 sec.

使用示例 #

调用该关键字时，传入定位Shadow DOM元素的JS表达式即可：

Verify ShadowDom Element Visible    document.querySelector("xxxx-block-wizard-footer").shadowRoot.querySelector(".xxxx-block-wizard-footer__cta-primary").shadowRoot.querySelector("button")

功能说明 #

• 该关键字会最多等待30秒，每秒检查一次目标Shadow DOM元素的可见性
• 如果元素最终未在30秒内可见，会自动截取页面截图并抛出失败日志
• 若元素最终成功可见，检查过程中的所有失败尝试不会触发截图操作

内容的提问来源于stack exchange，提问作者Igor Bosyi