如何在 Cypress 测试中切换 Angular 选项卡

Question

我有一个Signup/SigninAngular 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>

我想像

一样构建一个赛普拉斯测试

将选项卡切换到登录。
填写表格。
点击登录。

二和三没问题，但我很难解决 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

您使用的是哪个版本的赛普拉斯？

假设它是最新版本，有两种方法可以通过共同的第一步来解决这个问题。

共同第一步：

更改您的 HTML 代码以包含 data-cy 属性，如下所示：

<mat-tab data-cy="id-tab-sign-in" id="idTabSignIn" label="Signin">
      <app-signin></app-signin>
</mat-tab>

然后接近第一个：

开始你的 cypress 运行ner with watcher。通常是 ng e2e --watch
单击 + New Spec File 按钮。
命名您的规范文件。
指向并单击您的测试，完成后单击“保存”。

您现在可以在 IDE 中打开此 auto-generated 测试并根据需要进行编辑。

方法二：

将代码更改为 cy.get('[data-cy="id-tab-sign-in"]').click();

使用 data-cy 属性是赛普拉斯文档中建议的“最佳实践”之一。我个人发现 name 属性在尝试生成必须运行不同线束（Cypress、Selenium、Appium 等）的 e2e 测试时也很有用。

Answer 2

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

这就是您在 dev-tools

中看到的内容

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

如何在 Cypress 测试中切换 Angular 选项卡

How to switch Angular Tab in a Cypress Test

angular

angular-material

cypress