我应该如何断言在赛普拉斯中选中了该复选框？

Posted 2023-03-23

【中文标题】我应该如何断言在赛普拉斯中选中了该复选框？

【英文标题】：How should I assert that the checkbox is checked in Cypress?

【发布时间】：2022-01-09 22:31:37

【问题描述】：

我正在尝试对元素进行断言以查看复选框是否被选中。请在下面找到图片：

现在，这是针对此元素的 dom 结构：

<pds-radio class data-v-1234bb3c model="singleSelection" checked>
 #shadow-root (open)
 <div class="wrapper">
  <div class="radio-wrapper">
          <div class="radio-container">
                 <div class="radio active" tabindex="0">
                        ::before

现在当我点击它时，我在 'pds-radio' 中获得了这个 'checked' 属性，并且在阴影中该类变为 class="radio active" 如果未选中，则为 class="radio"

非常感谢您在这方面的帮助。谢谢

【问题讨论】：

在要检查的元素上添加 id 并通过 id 而不是类获取元素

我可以点击元素并且它被选中，但之后我想检查它是否真的被选中（这是我希望执行的断言，我发布了 DOM结构）。

我希望通过使用影子函数来获得解决方案，然后检查它是否具有类活动无线电。

我希望这会有所帮助docs.cypress.io/api/commands/should#Function

【参考方案1】：

You can use .shadow() 访问影子 DOM。

cy.get('pds-radio')
  .shadow()
  .find('.radio')
  .should('have.class', 'active')

或者，您可以在find 命令中包含includeShadowDom 选项。