angular - 如何在 Cypress 测试中切换 Angular Tab

Question

我有一个注册/登录 Angular Material 表格

  <mat-tab-group class="signupDiv">
    <mat-tab label="Sign Up">
      <app-signup></app-signup>
    </mat-tab>
    <mat-tab id="idTabSignIn" label="Signin">
      <app-signin></app-signin>
    </mat-tab>
  </mat-tab-group>

我想构建一个类似 cypress 的测试

1. 将标签切换到登录。
2. 填写表格。
3. 点击登录。

二和三没问题，但我很难解决 1。如何使用 Cypress 切换选项卡？

到目前为止我的代码

describe('Signin', () => {
  it('Sign with existing account', function () {
    cy.visit('/')
    cy.get('#idTabSignIn').click()   <---ERROR: idTabSignIn not found
  })
})

更新: 最后我用

解决了它

  it('Sign with existing account', function () {
    cy.visit('/')
    cy.get('.mat-tab-label').contains("Signin").click()
    cy.get('#idEmailSignIn').type(this.testUserData.email)
    cy.get('#idPasswordSignIn').type(this.testUserData.password)
    cy.get('#idSignInButton').click()
  })

Answer 1

Angular Material 库不会将 id 或 data-cy 等属性传播到正在运行的页面，因此 Cypress 无法使用它们。

这是你在开发工具中看到的

<div class="mat-tab-label-content">Signin</div>

IMO 最好的方法是基于标签文本，该文本从源中的属性移动到页面上的元素内容。

cy.contains('div.mat-tab-label-content', 'Signin').click()

如果您有响应式变体(桌面、移动)，则选项卡可以有多个版本，因此您可能需要加强选择器上下文，例如

cy.contains('mat-tab-group.signupDiv div.mat-tab-label-content', 'Signin').click()