Question

我正在为具有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');
})

Answer 1

它似乎可以与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')

  })

})

Angular 7测试：在Cypress.io中更改材质单选按钮选项

1 个答案: