使用 Cypress.io 在 shadow DOM 中找不到按钮

【问题标题】：Cannot find a button inside the shadow DOM using Cypress.io使用 Cypress.io 在 shadow DOM 中找不到按钮
【发布时间】：2021-09-10 13:41:20
【问题描述】：

我正在尝试使用 Cypress.io 在 shadow DOM 中查找并单击一个按钮。

我尝试了各种类名，结合使用 get/find 和 .shadow() 命令。

我在 Cypress 中遇到了这个错误：

"4000 毫秒后重试超时：预期主题为影子根，但从未找到它。”

这是我正在测试的 react 应用的一些代码（按钮 id 突出显示）

以下是我尝试过的最新 Cy 代码。

    cy.get('*[class^="MuiInputBase-input"]').shadow()
    cy.find('div[id="search-clear"]')
      .invoke('show')
      .click()

我试图找到并点击的按钮（鼠标悬停时可见）。

关于如何定位这个元素有什么想法吗？

【问题讨论】：

【解决方案1】：

你必须在.shadow()之后链接.find(selector)

喜欢：

cy.get('.MuiInputBase-input').shadow()
    .find('#search-clear')
    .invoke('show')
    .click()

旁注：
你为什么使用*[class^="MuiInputBase-input"]和div[id="search-clear"]
而不是.MuiInputBase-input 和#search-clear?

【讨论】：

嘿，谢谢您的提示，我在您回答时将其编辑为“查找” XD。使用 .find() 我仍然遇到同样的错误
但是你有没有把它锁在影子后面？
请注意，我没有使用另一个cy.find('#search-clear')，但我使用的东西在一行中看起来像这样cy.get('.MuiInputBase-input').shadow().find('#search-clear')
@chad_jw 当您使用 cy.find('#search-clear') 时，您不是在搜索影子 DOM
我在 .find() 之后和 .find() 之前链接了 .shadow() - 任何一个组合都找不到阴影。