Changing tabs in Angular Material using Cypress

Question

I have an Angular Material tab group on my page. I have to test changing of tabs using Cypress. When the page loads the user is on the Basic Information tab, I want to switch to the Relationships tab. I am not able to change the tabs

Here's the code:

<mat-tab-group animationDuration="0ms">

  <mat-tab label="Basic Information">
  </mat-tab>

  <mat-tab data-cy="relationship-tab" label="Relationship" *ngIf="leiType.value===leiTypes.CORPORATION">
  </mat-tab>

  <mat-tab label="Address">
  </mat-tab>
</mat-tab-group>

I am using the click event on the label to change the tab, but to no avail.

cy.get(`[data-cy='relationship-tab']`).click();
// cy.get(`[data-cy='relationship-tab']`).trigger('click');

I get the following error:

Timed out retrying: Expected to find element: [data-cy='relationship-tab'], but never found it.

score 3 · Answer 1 · answered Jun 03 '21 at 11:37

Hence the mat-tab is not rendered to the DOM one-in-one, you should consider other options. As of now, the mat-tab is included in the DOM like this:

<div role="tab" ... >

So if you are on a page where you do not have any other div's with role tab, you can select this based on cypress css selector, with the following set-up.

// Select second tab
cy.get('div[role=tab]').eq(1).click();

By the way, relying only this css selector is not in the best practices, but I hope I was able to help you.

score 2 · Answer 2 · answered May 02 '22 at 20:45

2

I accomplished that by

cy.get('.mat-tab-label').contains('Relationship').click()

answered May 02 '22 at 20:45

Ernesto Luis

21
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 03 '22 at 06:08

Sanja Paskova · Answer 3 · 2020-07-07T15:05:16.183

0

How about waiting the tag to be visible and then clicking on it, this works for me always:

cy.get('[data-cy="relationship-tab"]').should('be.visible');    
cy.get('[data-cy="relationship-tab"]').click();

edited Jul 07 '20 at 15:05

answered Jul 07 '20 at 14:33

Sanja Paskova

1,110
8
15

what is the error you see, if is timeout how about to change in cypress.json file: "defaultCommandTimeout" : 7000 – Sanja Paskova Jul 07 '20 at 14:59
Timed out retrying: Expected to find element: [data-cy='relationship-tab'], but never found it. – Pritam Bohra Jul 07 '20 at 15:01
put the data-cy attribute into double quotes, like in my answer, it might interpret the single quotes wrong – Sanja Paskova Jul 07 '20 at 15:06
Tried, didn't work :( I failed to mention that the angular-material tabs are in angular material dialog when opens when user clicks a button. Could this be the issue? – Pritam Bohra Jul 07 '20 at 15:11
1

went through the rendered HTML code in the dev tools and noticed that Angular Material changed the code. There wasn't any . Achieved the required functionality using .mat-tab-label-content – Pritam Bohra Jul 07 '20 at 15:34
@SanjaPaskova I generelly do `cy.get("[data-cy=exportUserData]").should("be.visible");` and that works fine so I think you won't need additional single or double quotes. – DarkMikey Jul 08 '20 at 10:56

Changing tabs in Angular Material using Cypress

3 Answers3