Тест Cypress не работает для состояния фокусировки для флажка mat в угловой

#angular #checkbox #focus #cypress

Вопрос:

Я пытаюсь проверить непрозрачность и цвет флажка mat, когда он фокусируется, но он не работает.

Мой код выглядит следующим образом:

 it('focused opacity', () =gt; {   cy.get('.mat-checkbox[data-cy=selected] .mat-checkbox-input').first()  .focus()  .find('.mat-checkbox-focus-overlay')  .then((btn) =gt; {  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: lt;input#mat-checkbox-2-input.mat-checkbox-input.cdk-visually-hiddengt;

Html элемента:

 lt;mat-checkbox  class="example-margin cgui-checkbox"  [labelPosition]="labelPosition"  data-cy="unselected"  color="primary" gt;  unselected lt;/mat-checkboxgt;

Внутренний Html:

 lt;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"gt;  lt;label class="mat-checkbox-layout" for="mat-checkbox-1-input"gt;  lt;span class="mat-checkbox-inner-container"gt;  lt;input type="checkbox" class="mat-checkbox-input cdk-visually-hidden" id="mat-checkbox-1-input" tabindex="0" aria-checked="false"gt;lt;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]"gt;lt;span class="mat-ripple-element mat-checkbox-persistent-ripple"gt;lt;/spangt;lt;/spangt;lt;span class="mat-checkbox-frame"gt;lt;/spangt;  lt;span class="mat-checkbox-background"gt;  lt;svg version="1.1" focusable="false" viewBox="0 0 24 24" xml:space="preserve" class="mat-checkbox-checkmark"gt;  lt;path fill="none" stroke="white" d="M4.1,12.7 9,17.6 20.3,6.3" class="mat-checkbox-checkmark-path"gt;lt;/pathgt;  lt;/svggt;  lt;span class="mat-checkbox-mixedmark"gt;lt;/spangt;  lt;/spangt;  lt;/spangt;  lt;span class="mat-checkbox-label"gt;lt;span style="display: none;"gt;amp;nbsp;lt;/spangt; unselected lt;/spangt;  lt;/labelgt; lt;/mat-checkboxgt;

Ответ №1:

Он может работать, выполняя следующие действия:

Добавьте для этого CSS:

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

Тест на непрозрачность:

 it('should have correct focused opacity', () =gt; {   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', () =gt; {  cy.get('.cgui-checkbox[data-cy=selected] .mat-checkbox-background')  .should('have.css', 'background-color')  .and('be.colored', '#00777');  });

Ответ №2:

Мне кажется, что элемент, который вы обертываете,-это наложение фокуса. Чтобы проверить свойство кнопки, вы должны непосредственно обернуть кнопку. Было бы полезно, если бы вы поделились внутренним HTML-кодом флажка. Более того, вы используете и после повторной упаковки элемента. Либо свяжите его цепочкой с «должно», либо разделите утверждения, как указано ниже. Тем не менее попробуйте это,

 it('focused opacity', () =gt; {  cy.get('.mat-checkbox[data-cy=selected] .mat-checkbox-input').first().then(btn =gt;{  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');  });

});