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

Question

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

我需要点击是按钮。

我该怎么做？

Answer 1

您可以使用 .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()

Answer 2

您可能想使用 按钮文本 而不是 class 来 select 您想要的按钮。

相同的 class .buttons-confirmation 出现在两个按钮上，所以当您 select 它时，您将获得两个按钮。

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

Answer 3

您只需将 { "includeShadowDom" : true } 连同其他属性添加到您的 cypress.json 文件，然后像单击常规元素一样单击该元素

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

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

How to click in button inside shadow Cypress.io

html

shadow-dom

cypress