检查 cypress 测试中的 mat-checkbox

Question

我正在尝试mat-checkbox使用 cypresscheck()方法检查元素，即使添加force参数。例子：

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

我收到以下错误

cy.check() 只能在 :checkbox 和 :radio 上调用。您的主题是：<mat-checkbox

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

Answer 1

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

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

<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();

Answer 2

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

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});    
  });
});