Cypress 测试不适用于 Angular 中的 mat-checkbox 的焦点状态

Question

我正在尝试测试 mat-checkbox 获得焦点时的不透明度和颜色，但它不起作用。

我的代码如下：

  it('focused opacity', () => {  
    cy.get('.mat-checkbox[data-cy=selected] .mat-checkbox-input').first()
      .focus()
      .find('.mat-checkbox-focus-overlay')
      .then((btn) => {
        cy.wrap(btn).should('have.css', 'opacity', '0.20');
        cy.wrap(btn).should('have.css', 'background-color')
        cy.wrap(btn).and('be.colored', '#00777');
      });
  });

错误是：

             Timed out retrying after 4000ms: Expected to find element: .mat-checkbox-focus-overlay, but never found it. Queried from element: <input#mat-checkbox-2-input.mat-checkbox-input.cdk-visually-hidden>

Html 元素：

<mat-checkbox
  class="example-margin cgui-checkbox"
  [labelPosition]="labelPosition"
  data-cy="unselected"
  color="primary"
>
  unselected
</mat-checkbox>

内Html:

<mat-checkbox _ngcontent-waw-c239="" data-cy="unselected" color="primary" class="mat-checkbox example-margin cgui-checkbox mat-primary" ng-reflect-color="primary" ng-reflect-label-position="after" id="mat-checkbox-1">
   <label class="mat-checkbox-layout" for="mat-checkbox-1-input">
      <span class="mat-checkbox-inner-container">
         <input type="checkbox" class="mat-checkbox-input cdk-visually-hidden" id="mat-checkbox-1-input" tabindex="0" aria-checked="false"><span matripple="" class="mat-ripple mat-checkbox-ripple mat-focus-indicator" ng-reflect-trigger="[object HTMLLabelElement]" ng-reflect-disabled="false" ng-reflect-radius="20" ng-reflect-centered="true" ng-reflect-animation="[object Object]"><span class="mat-ripple-element mat-checkbox-persistent-ripple"></span></span><span class="mat-checkbox-frame"></span>
         <span class="mat-checkbox-background">
            <svg version="1.1" focusable="false" viewBox="0 0 24 24" xml:space="preserve" class="mat-checkbox-checkmark">
               <path fill="none" stroke="white" d="M4.1,12.7 9,17.6 20.3,6.3" class="mat-checkbox-checkmark-path"></path>
            </svg>
            <span class="mat-checkbox-mixedmark"></span>
         </span>
      </span>
      <span class="mat-checkbox-label"><span style="display: none;">&nbsp;</span> unselected </span>
   </label>
</mat-checkbox>

Answer 1

在我看来，您包装的元素是焦点叠加层。要检查按钮的属性，您应该直接包装按钮。如果您共享复选框的内部 HTML 将会很有帮助。此外，您正在使用 and after 再次包装元素。要么将它与 should 链接起来，要么如下所述拆分断言。不过试试这个，

it('focused opacity', () => {  
cy.get('.mat-checkbox[data-cy=selected] .mat-checkbox-input').first().then(btn =>{
  cy.wrap(btn).focus()
  
    cy.wrap(btn).should('have.css', 'background-color')
    cy.wrap(btn).should('be.colored', '#00777');
    cy.wrap(btn).should('have.css', 'opacity', '0.20');
  });

});

Answer 2

它可以通过执行以下操作来工作：

为其添加CSS：

.mat-checkbox.cdk-focused.cdk-program-focused {
    opacity: 0.2;
}

不透明度测试：

 it('should have correct focused opacity', () => {  
    cy.get('.mat-checkbox[data-cy=selected] .mat-checkbox-input').first()
      .focus()
    cy.get('.mat-checkbox[data-cy=selected]')
      .should('have.css', 'opacity', '0.2')
  })

试色：

 it('should have correct background color when checked', () => {
    cy.get('.cgui-checkbox[data-cy=selected] .mat-checkbox-background')
      .should('have.css', 'background-color')
      .and('be.colored', '#00777');
 });

Cypress 测试不适用于 Angular 中的 mat-checkbox 的焦点状态

Cypress test is not working for focus state for mat-checkbox in Angular

checkbox

focus

angular

cypress