时间戳

首页 > 解决方案 > Angular 7 测试：更改 Cypress.io 中的材料单选按钮选项

angular - Angular 7 测试：更改 Cypress.io 中的材料单选按钮选项

问题描述

我正在为具有 Angular 材料单选按钮的页面编写 Cypress.io 测试。我可以阅读选定的选项，并且似乎更改了选定的单选按钮，但我的应用程序无法识别它已被更改。

我已经检查了文档，但我没有看到任何有助于处理这种特殊情况的东西。我试过使用 .check() 和 .click() ，它们都会导致同样的问题。

我写道，它似乎有效，因为在测试运行器 UI 中选择了正确的单选按钮。但是，我知道它在 Angular 中没有触发任何东西，因为数据库中的选项没有改变。

这是测试。它正确地识别在开始时选择了哪个按钮，但实际上并没有改变选择了哪个按钮。

it('Should change radio button', function() {
    cy.get('#mat-radio-3').should('have.attr', 'ng-reflect-checked', 'true');
    cy.get('[type="radio"]').first().check({force: true});
    cy.get('#mat-radio-2').should('have.attr', 'ng-reflect-checked', 'true');
})

标签： angularangular7cypress

解决方案

它似乎适用于 Angular Material 演示页面https://material.angular.io/components/radio/examples。

但是，我找不到ng-reflect-checked所以使用类的属性mat-radio-checked。如果您在单击选项时查看 DOM，则此类会更改 - 至少在此示例页面上是这样。

这是我跑的测试

describe('clicking angular material radio', () => {

  it('Should change radio button', function() {
    cy.visit('https://material.angular.io/components/radio/examples')

    cy.get('[type="radio"]').first().check({force: true});
    cy.get('#mat-radio-2').should('have.class', 'mat-radio-checked');
    cy.contains('.example-selected-value', 'Your favorite season is: Winter')

    cy.get('[type="radio"]').eq(1).check({force: true});
    cy.get('#mat-radio-3').should('have.class', 'mat-radio-checked');
    cy.contains('.example-selected-value', 'Your favorite season is: Spring')

    cy.get('[type="radio"]').eq(2).check({force: true});
    cy.get('#mat-radio-4').should('have.class', 'mat-radio-checked');
    cy.contains('.example-selected-value', 'Your favorite season is: Summer')

    cy.get('[type="radio"]').eq(3).check({force: true});
    cy.get('#mat-radio-5').should('have.class', 'mat-radio-checked');
    cy.contains('.example-selected-value', 'Your favorite season is: Autumn')

  })

})

推荐阅读