Cypress End to End Testing: Tutorial

With the rising users of web application globally, customer satisfaction and retention has become pivotal while building web applications. Having a seamless user experience, plays a significant role to delight customers, which is why testing has to be performed diligently to avoid any hiccups.

End to end testing, more specifically deals with testing the user flows, that are based on how the users interact with the application, and hence is crucial in the testing process. This article covers, how to perform Cypress End to End Testing.

What is End to End testing?

End to End testing (commonly known as E2E) is a type of testing method in which an application is tested from the beginning to the end of a testing flow. These flows are predefined as per the functionalities/conditions to be checked for a successful run of that application. Usually end to end flows are based on the user interactions and how they perform various actions on the application.

E2E test flow runs through every operation inside the specified applications scope and tests for the correct functionality of the all connected peripherals inside the application. To execute E2E tests, a well documented and organized test flow must be prepared. This test flow must contain the specific requirements for the testing scope, the clearly explained functionality for the given application and the testing method to test the specified requirements and the acceptance criteria for those as well. So with the end to end testing we can verify all the necessary elements and connected peripherals are working together to achieve the purpose of the application that is being tested. 

What is Cypress?

Cypress is a Java-Script based end to end testing framework which is built basically on top of Mocha JS. It conveniently facilitates the process of end to end testing by giving the testers the chance to run their testing flows using TDD or BDD assertion library along with the real time browser interaction. 

The end to end automation testing with Cypress simulates the real world human interactions in the UI part inside the browser. Once the test executions are finished, the tester can go through the test steps and revisit the step as a real time intervention, which gives the convenience of debugging as well as documentation or analysis of the test results for the tester. 

So along with the other features such as automatic waiting, real time reloading, Cypress saves a lot of effort that goes in using the legacy testing methods for testers for End to End testing. 

What is Cypress End to End Testing?

End to End testing with Cypress has evolved the methods of E2E testing to a whole new level. Let’s see what made Cypress one of the best tools for end to end testing. 

• All in one architecture for the automation testing with Cypress 
  • Before the Cypress era we had to choose the components separately for the automation process. First we need a framework with an assertion library and after that we have to install Selenium with a wrapper for that. And if needed, we also have to add/install additional libraries/tools that would be vitally needed to carry out the testing flow. 
  • But with the Cypress framework we only need to write a test flow basically in Javascript and the test can be executed without adding any hassles along the way to achieve the test results. This is because Cypress offers all in one architecture with testing framework, assertion library, with mocking and stubbing for the testing and all of it without Selenium and its supporting library integration. 

• Cypress is specialized in End to End Tests 
  • Unlike the other automation frameworks, Cypress is not a general automation framework. It is specifically operating for the purpose of the End to End testing. 

• It compatibles with almost every front-end framework
  • Cypress can basically test anything that runs in a browser, The Cypress architecture supports almost every Javascript front end framework.As the tests are also written in JS the Quality Assurance as well Software Development sides can explore through the test flows easily and analyze/debug the code base/test flow.  

Run Cypress Tests on Real Devices

Cypress End to End Testing Tutorial

For demonstrating Cypress End to End Testing, using https://www.bstackdemo.com/ and performing the below steps:

Step 1 Determine the test flow that is being tested. This gives a comprehensive idea about the scope of the test to be executed. For this example the test flow is:

• Visit the BStackDemo home page
• Go into the login page and login 
• Verify the home page is loaded correctly
• Logging out

Step 2 Once the test flow is identified, the next step is to write the test scripts for the test case with Cypress as seen in the image and code below

Test Script with the Folder Structure

it('BstackDemo', () =>{
    cy.visit('https://bstackdemo.com/')

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

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

    cy.get("#logout").should('have.text','Logout')

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

    cy.get("#signin").should('have.text','Sign In')

})

Step 3: After that, execute the automated cypress end to end test, record and analyze the test results get. You can run Cypress tests using Cypress CLI or Cypress Runner. 

However, if you want to run your Cypress Tests on real devices and browsers, then you can use BrowserStack Automate. It allows you access to 3000+ real devices and browser combinations to test under real user conditions and get more accurate test results.

Conclusion 

By using the Cypress framework, testers can easily achieve the e2e coverage for a given web application by using the TDD method. Unlike Selenium, as Cypress is not dependent on browser drivers, since it directly interacts with the Browsers. As all the tools are inside Cypress, QAs get the easy access to the test by only writing the test flow as a JS script. Another advantage is the different approaches offered by Cypress debugging. 

Since debugging is a crucial part in an E2E test, so a faster debugging and get the real time run for the updated workflow will be game changer for the QAs. Cypress has facilitated this with their auto reloading feature, which leveled up the debugging, making E2E testing much more easy. Cypress, thus offers a breakthrough in E2E testing, by just writing a JS script.

However, to leverage the maximum benefit of the Cypress end to end testing, it is recommended to test on real device cloud like that of BrowserStack, so as to take real user conditions into account while testing. This makes identifying bottlenecks in the user flow easy, helping deliver a seamless experience.

Run Cypress E2E tests on Real Devices