Ionic 5 testing automation with Cypress [Beginner]

We are going to learn ionic 5 testing automation with cypress. We assume that you are totally a beginner with ionic testing or with cypress.

Cypress is a front-end testing automation tool. It helps us to test our application in the same way as the user will manually do.

In simple words you can click on the button, open different pages, perform lots of front-end actions and even can test API’s working with Cypress.

Although cypress can test everything which we can run in the browser. So, it might be difficult to test the native device features like camera, fingerprint sensor etc.

So, let’s dive into it.

Setup ionic 5 testing project with cypress

We are going to use the ionic 5 shopping cart application for this testing purpose.

We have already written about this article and you will get all the source code and live demo there.

Initial setup for the ionic 5 testing process

git clone https://github.com/SATPAL-BHARDWAJ/ionic-5-shopping-app

cd ionic-5-shopping-app

npm install

It will install the required node modules to our project mentioned in the package.json file.

Install the cypress to our ionic 5 project

We are using an ionic-angular combination, so we can use @cypress/schematic because it provides us with some predefined cypress configuration.

ng add @cypress/schematic

Then we just need to serve our application.

ionic serve

Now, you will find the cypress.json file in the project root directory. We need to change the localhost port in the cypress.json from 4200 to 8100 or whatever your served application port is.

Then run the following command to open the cypress panel.

npx cypress open

Write some test cases

Go to cypress/support/index.ts and uncomment the below line (avoid it, if already uncommented).

import './commands';

Then open the cypress/support/commands.ts and add the below commands.

Cypress.Commands.add('SearchInput', (searchTerm) => {
    cy.get('.searchbar-input').type(`${searchTerm}{enter}`);
    cy.wait(2000);
    cy.get('.searchbar-clear-button').click();
})

Cypress.Commands.add('ApplyFilter', (config) => {
    cy.get('[data-cy="filter-btn"]').click();
    if ( config.menu ) {
        cy.wait(1000);
        cy.get(`${config.menu}`).click();
    }
    cy.wait(1000);

    if ( false === config.inputField ) {
        cy.get(`${config.item}`).click();
    } else {
        cy.get(`${config.item}`).type(`${config.input}{enter}`);
    }

    cy.wait(1000);
    cy.get('[data-cy="apply-filter"]').click(); 
})

Cypress.Commands.add('ClearAllFilters', () => {
    cy.get('[data-cy="filter-btn"]').click();
    cy.wait(1000);
    cy.get('[data-cy="clear-filter"]').click(); 
})

We have another main file is cypress/integration/spec.ts and we need to add below test cases there.

describe('Ionic 5 Shopping cart app', () => {
  beforeEach(() => {
    cy.viewport('iphone-6+');
  })

  it("should fit to iphone viewport", () => {
      cy.visit('/');
      cy.contains('Flash Sale');
  })

  it("should search something", () => {
      cy.wait(1000);
      cy.SearchInput('folk');
  })

  it("should apply category filter", () => {
      cy.wait(1000);
      cy.ApplyFilter({ 
          item: '[data-cy="categories-filter"] > :nth-child(3)' 
      });
      cy.wait(1000);
      cy.ClearAllFilters();
  })

  it("should apply price filter", () => {
      cy.wait(1000);
      cy.ApplyFilter({ 
          menu: '[data-cy="price-filter"]', 
          item: '[data-cy="price-box"] > :nth-child(2)', 
          inputField: true, 
          input: 66
      });

      cy.wait(2000);
      cy.ClearAllFilters();
  })

  it("should search nothing", () => {
      cy.wait(1000);
      cy.SearchInput('nothing');
  })

  it("should add item to cart", () => {
      cy.wait(1000);
      cy.get('[data-cy="products-list"] > :nth-child(2) [data-cy="cart-btn"]').click();
      cy.wait(1000);
      cy.get('[data-cy="update-cart"]').click();
  })

  it("should open cart page", () => {
      cy.wait(2000);
      cy.get('#tab-button-tab2').click();
  })

  it("should increase cart quantity", () => {
      cy.wait(2000);
      cy.get('[data-cy="cart-list"] > :nth-child(1) [data-cy="inc-qty"]').click();
      cy.wait(1000);
      cy.get('[data-cy="cart-list"] > :nth-child(1) [data-cy="inc-qty"]').click();
      cy.wait(1000);
      cy.get('[data-cy="cart-list"] > :nth-child(1) [data-cy="inc-qty"]').click();
  })

  it("should decrease cart quantity", () => {
      cy.wait(2000);
      cy.get('[data-cy="cart-list"] > :nth-child(1) [data-cy="dec-qty"]').click();
  })

  it("should remove cart item", () => {
      cy.wait(2000);
      cy.get('[data-cy="cart-list"] > :nth-child(1) [data-cy="rm-item"').click();
  })

  it("should back to home page", () => {
      cy.wait(2000);
      cy.get('#tab-button-tab1').click();
  })
})

If you have noticed that we have used [data-cy=”something”] to use our cypress tests because it is recommended by cypress itself.

And it makes sense, let’s suppose we have one button in the card element and we have used button tag or CSS selector directly for our test cases.

Now after some time we have added another button to this card and now our test case will create the error or either we have to update our old test cases again.

That’s why specific HTML attributes can help us to keep separate our test cases.

Run the cypress tests

As we have already opened the cypress panel with npx cypress open command. 

We can select different web browsers here for testing but these browsers should be installed on our machine.

But, yes cypress also comes with its default browser that is Electron which doesn’t need to be installed on our machine.

After selecting the browser, we need to select the test file which is shown in the integration tests section (in our case it is spec.ts).

Once we click on the test file it will open the tests in the selected browser.

That’s it, ionic 5 e2e testing with cypress. This tutorial is for beginners, if you already know about cypress and it’s usage. We will create some intermediate and advanced level tutorials too. 

If you like this tutorial please comment below your suggestions or topic on which you want the next tutorial.