Angular 7 测试：更改 material 单选按钮选项 Cypress.io

Question

我正在为具有 Angular material 个单选按钮的页面编写 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');
})

Answer 1

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

但是，我找不到 ng-reflect-checked 属性，所以使用 class mat-radio-checked 代替。如果您在单击选项时看到 DOM，此 class 会发生变化 - 至少在此示例页面上是这样。

这是我的测试运行

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')

  })

})

Angular 7 测试：更改 material 单选按钮选项 Cypress.io

Angular 7 test: changing material radio buttons options in Cypress.io

angular

cypress

angular7