How to switch Angular Tab in a Cypress Test

Issue

I have a Signup/Signin Angular Material Form

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

I want to build a cypress test like

1. Switch Tab to Signin.
2. Fill Form.
3. Click Sign in.

two and three is no Problem, but I struggle with 1. How I can switch the tab with Cypress?

My code so far

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

Update: Finally i solved it with

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

Solution

The Angular Material library does not propagate attributes like id or data-cy through to the running page, so Cypress is unable to use them.

This is what you see in dev-tools

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

IMO the best approach is based on the label text which is moved from the attribute in source to element content on the page.

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

There can be multiple versions of the tab if you have responsive variations (desktop, mobile), so you may need strengthen the selector context, for example

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

Answered By - Fody