在 cypress 测试中检查 mat-checkbox答案

【问题标题】：Check mat-checkbox within cypress test在 cypress 测试中检查 mat-checkbox
【发布时间】：2019-12-18 14:23:09
【问题描述】：

我正在尝试使用 cypress check() 方法检查 mat-checkbox 元素，即使添加 force 参数也是如此。示例：

Cypress.Commands.add('changeEmailLayoutCheckbox', () =>
  cy
    .get(EMAIL_LAYOUT_CHECKBOX)
    .check({ force: true })
);

我收到以下错误

cy.check() 只能在 :checkbox 和 :radio 上调用。你的主题是 a:

消息很清楚，但问题是我在mat-checkbox 更改时发出了一些事件，它为我的请求设置了参数。我也尝试过click()，但那些没有触发提到的事件。

【问题讨论】：

在我的脑海中，我认为有一个复选框是 mat-checkbox 的子项，检查你的 html，你会看到它我认为，你需要选中该复选框在其中。我没有把这个作为答案，但我想我以前用 Angular Material 遇到过这个问题。
你说得对，我必须更深入地在 mat-checkbox 中找到该输入。您可以将其作为答案，我将其标记为好答案；）
会的。我很欣赏这些观点
你成功了吗？

标签： angular angular-material cypress

【解决方案1】：

复选框是 mat-checkbox 的子元素。您将需要选择内部孩子并单击它。我不得不强迫它真正起作用。我会看看是否有更好的方法来做到这一点。

describe('how to check mat-checkbox', () => {
  it('check the input', () => {       
    cy.visit('https://material.angular.io/components/checkbox/overview');
      cy.get('#mat-checkbox-1-input').click({force:true});
      //**** OR ***********   
      cy.get('#mat-checkbox-1').find('input').click({force:true});    
  });
});

【讨论】：

是的，它解决了我的问题。我必须深入查看 mat-checkbox 内部才能找到该输入并触发点击事件。

【解决方案2】：

根据我的实验，只要选择了正确的元素，语法就可以保持非常简单，无需强制。

总结例子：

<div id="parent">
  <mat-checkbox ...></mat-checkbox>
  <!-- assuming there is no other input or mat-checkbox here -->
</div>

cy.get('#parent mat-checkbox').click()       # interact
cy.get('#parent input').should('be.checked') # check state

DOM 示例

对于一个应用来说，这是它在 DOM 中的样子：

使用 ng build app --prod 构建 - Angular 11
由 nginx 提供服务（这里可能无关紧要）

【讨论】：

这如何工作？ mat-checkbox 在运行时不存在。
好吧，我无法解释如何或为什么，但我 100% 确定它可以工作，即使在使用生产标志构建时，就像在我们的 CI 管道中一样。我已经用我们测试中涉及的 DOM 快照编辑了我的答案
好吧，我错了。

【解决方案3】：

遵循赛普拉斯最佳实践的简单解决方案

向mat-checkbox 元素添加data-cy（最佳实践：https://docs.cypress.io/guides/references/best-practices#Selecting-Elements）或其他一些独特的选择器，如下所示：

<mat-checkbox data-cy="some-unique-reference">...</mat-checkbox>

由于实际的 input 元素（复选框本身）是 mat-checkbox 的子元素 - 在您的规范文件中：

cy.get('[data-cy="some-unique-reference"] input').should('be.checked');
cy.get('[data-cy="some-unique-reference"] input').click();

【讨论】：