无法使用 cypress 定位元素答案

【问题标题】：Unable to locate element using cypress无法使用 cypress 定位元素
【发布时间】：2020-07-09 09:06:05
【问题描述】：

我正在使用对话流开发聊天机器人。所以为了测试它，我们使用的是 cypress。

我有聊天机器人信使，我想点击这个按钮来展开我的信使。

下面是我的测试用例：

    it('TC_01_Campaigns', () => {
        cy.visit('https://<some-random-address>.com/');
        cy.wait(4000);
        //cy.contains('widgetIcon')
        // cy.get('[id="widgetIcon"]')
        // cy.get('button[id="widgetIcon"]').click();
        cy.xpath('//*[@id="widgetIcon"]')
    })

我已经尝试了注释掉的代码行。它似乎不起作用。

下面是DOM的html代码：

<html><head><script src="https://static.dialogflow.com/common/messenger/webcomponentsjs/2.1.3/custom-elements-es5-adapter.js"></script><script src="https://static.dialogflow.com/common/messenger/webcomponentsjs/2.1.3/webcomponents-loader.js"></script><style type="text/css">:root{--df-messenger-bot-message:#fff;--df-messenger-button-titlebar-color:#42a5f5;--df-messenger-button-titlebar-font-color:#fff;--df-messenger-chat-background-color:#fafafa;--df-messenger-font-color:rgba(0,0,0,.87);--df-messenger-input-box-color:#fff;--df-messenger-input-font-color:rgba(0,0,0,.87);--df-messenger-input-placeholder-font-color:#757575;--df-messenger-minimized-chat-close-icon-color:rgba(0,0,0,.87);--df-messenger-send-icon:#42a5f5;--df-messenger-user-message:#ddd;--df-messenger-chip-color:#fff;--df-messenger-chip-border-color:#e0e0e0}</style><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"></head><body>
    <h1>Chatbot</h1>

    
    <div style="position: absolute; bottom: 0px; right: 5px;">
      <script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
      <df-messenger chat-title="BR" agent-id="xxxx-xxx-xxxx-xxxx-xxxxx" language-code="en" session-id="dfMessenger-43967287" api-uri="https://dialogflow.cloud.google.com/v1/integrations/messenger/webhook"></df-messenger>
    </div>
  
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/messenger-internal.min.js?v=4"></script></body></html>

【问题讨论】：

在DOM的HTML代码中，你已经提供了。按钮不可见，不是吗？您可以在控制台中运行它 $x("//button") 并检查它是否给出任何值

标签： mocha.js cypress

【解决方案1】：

您能否发布在尝试您的代码时收到的错误消息？这可能会有所帮助。

如果没有错误消息，我只能猜测 - 可能是因为 #shadow-root。在Cypress 4.8.0 中添加了对测试影子根的支持。看看documentation and description of .shadow()。更新到 Cypress 4.8.0 或更高版本，尝试将其添加到您的配置中，然后尝试获取该元素：

{
  "experimentalShadowDomSupport": true
}

另外，请查看赛普拉斯 GitHub 上的 this 已关闭问题。希望对您有所帮助！

【讨论】：

@PD 感谢您的参考。这工作cy.get('df-messenger').shadow().find('#widgetIcon').click();，当然在设置experimentalShadowDomSupport: true 之后。