我有一份注册/签到资料表

  <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. 单击登录.

二加三没问题,但我很难对付一.如何使用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()
  })

推荐答案

Angular material 库不会将id或数据cy等属性传播到正在运行的页面,因此Cypress无法使用它们.

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

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

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

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

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

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

Angular相关问答推荐

使用路由进行测试.为每次测试导航堆栈

我使用Ngrx的子集 Select 器不起作用

从Angular 14更新到15个多边形.ts问题

停靠的Angular 应用程序的Nginx反向代理无法加载assets资源

未在ng bootstrap 模式中设置表单输入

Angular 17不接受带点(.)的路径在开发环境中,它直接抛出一个404错误

截获火灾前调用公共接口

天使17中的倒计时器

Angular CLI 与 Angular 版本不兼容

从 Angular 应用程序中删除散列标签后无法从 Apache 访问 API

在父组件的子组件中使用 ng-template

ng14中具有强类型表单的FormBuilder

类继承支持

react形式的formGroup.get与formGroup.controls

如何在 Angular 5 HttpInterceptor 中添加多个标头

为什么Angular 12 'ng serve' 构建应用程序的速度很慢?

Angular 2 中的 $implicit 是什么?

Angular 6在输入键上添加输入

No provider for Router?

Angular 4 material表突出显示一行