时间戳

首页 > 解决方案 > 无法使用 cypress 定位元素

mocha.js - 无法使用 cypress 定位元素

问题描述

我正在使用对话流开发聊天机器人。所以为了测试它，我们正在使用 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>

标签： mocha.jscypress

解决方案

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

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

{
  "experimentalShadowDomSupport": true
}

另外，在 Cypress 的 GitHub 上查看这个已关闭的问题。希望能帮助到你！

推荐阅读