如何单击阴影 Cypress.io 内的按钮答案

【问题标题】：How to click in button inside shadow Cypress.io如何单击阴影 Cypress.io 内的按钮
【发布时间】：2021-04-16 18:56:56
【问题描述】：

我正在使用 cypress.io，我需要单击 shadow-root 内的按钮。

我需要点击是按钮。

我该怎么做？

【问题讨论】：

您能否添加到目前为止您尝试过的内容以及您遇到的错误或尝试点击时发生的情况？

标签： html cypress shadow-dom

【解决方案1】：

您可以简单地将 { "includeShadowDom" : true } 与其他属性一起添加到您的 cypress.json 文件中，然后像单击常规元素一样单击元素

cy.get('base-confirmation')
  .contains('button', 'Yes')
  .click();

【讨论】：

【解决方案2】：

您可能希望使用按钮文本而不是类来选择您想要的按钮。

相同的类.buttons-confirmation 出现在两个按钮上，因此当您选择它时，您将获得两个按钮。

cy.get('base-confirmation')
  .shadow()
  .contains('button', 'Yes')
  .click();

【讨论】：

【解决方案3】：

您可以使用.shadow() 遍历shadow dom 并对所需元素执行操作。

如果你想点击是按钮：

cy.get('base-confirmation')
  .shadow()
  .find('.modal-content')
  .find('.content-confirmation')
  .find('.base-confirmation')
  .find('.buttons-confirmation')
  .click()

如果要点击否按钮：

cy.get('base-confirmation')
  .shadow()
  .find('.modal-content')
  .find('.content-confirmation')
  .find('.base-confirmation')
  .find('.buttons-confirmation.cancelBtn')
  .click()

【讨论】：

很好的答案，但在“是”按钮中，您需要选择“是”按钮。因为你有 2 个按钮。