How to write an Integration Test with Cypress?

In the Quality Engineering process of a software application, four main testing methods are being used hierarchically to acquire the quality expected from it. Unit Testing, Integration testing, System testing, and Acceptance testing are used for this process. Among these 4 main testing methods, Integration testing gets a special specification as it is used as the middle layer of the testing methodologies. 

Once the Unit testing is done, the application then undergoes Integration testing. 

What is an Integration Test?

In integration testing, the individual parts tested in the unit testing phase are combined in a sophisticated way to form a single module of an interconnected and integrated part of the application. This module is then tested for the interconnectivity of the separated components. Integration testing tests the functionality of the small systems made up of the application’s unit-tested components and their interconnectivity. 

What is Cypress?

Cypress framework is a testing tool that facilitates JS and browser-based testing. With Cypress, the testers can directly manipulate the DOM, as the Cypress test can access the browser directly.

How is Cypress used in Integration Testing?

When using Cypress to do the integration testing, there are two main keywords to be considered. ‘describe’ and ‘ít’ keywords will be the main structure for the test flow of the integration test. 

• The ‘describe’ keyword usually defines a test suite, while ‘it’ defines a single test case.
• So the testing module for the integration test can be considered a testing suite and mentioned under describe keyword. 
• In contrast, all the testing scenarios under that module can be mentioned and written under it keywords under the describe blocks so that the describes can be run to execute the integration tests. 

With Cypress’s powerful and convenient structure, we can always boost up the process of integration testing while following a few basic norms: 

• The first one will be writing short and simple test scenarios. 
• Even though the test is moduled, it is better to use simpler scenarios rather than complex and long scenarios as they can be hard to execute, and bug localization will also be hard, sometimes impossible. 
• Another uses descriptive test names, as it helps greatly in bug localization and in threat assessment in various degrees. 
• So by adhering to these basic norms, the Cypress integration tests can be easily and conveniently executed with the optimum results output.

Planning your Integration Test

As part of the integration testing, a test scenario needs to be planned. As an example, the login module of the demo site is to be tested. 

So for this scenario, 3 main test cases will be used.

1. The tester is directed to the site, and the home page is loaded. 
2. When clicked in the login button tester is redirected to the login page. 
3. The user is redirected to the home page with the logged-in status when the correct credentials are entered. 

Example Codebase

/// <reference types="cypress" />

//The login module is tested under the "check login process" test suite

describe('check login process', () => {

  //First test case - direct to the site under test

  before('Visit the demo site',() => {

    cy.visit('https://bstackdemo.com/');

  })

  //Second test case - click on the login

  it('Click and redirect to login page', () => {

    cy.get('#signin').click();

  //Third test case - user is logged on and redirected to home page

  cy.get("#username").click();

  cy.xpath("//div[text()='demouser']").click();

  cy.get("#password").click();

  cy.xpath("//div[text()='testingisfun99']").click();

  cy.get("#login-btn").click();

  })

})

Code Base for the Test

Output of the executed code

The codebase for the above example can be found here

Do note that to get the most out of integration testing, teams must always perform tests on multiple real devices, platforms, and OS combinations. 

Accuracy and comprehensive identification of all possible bugs are possible only in real user conditions, and that is where you can opt for BrowserStack for Cypress testing.

Start Cypress Testing