Taking A Glance At Software Testing, In Particular E2E Web Apps Testing

In this blog post, we will try to explain software testing from a very simple perspective and look in particular into end to end testing of web applications. We will also explore cypress which is a very popular tool used in end to end testing of web applications.

First, what is the problem ?

According to Dan Galorath, a recognized expert in project management of software projects, “A US government report has showed that 81% of the budget spent on IT projects is in danger of failing”.

So why, despite all the engineering effort in the software engineering processes, the final objective of an IT project, which is to deliver on time a software product that answers all the client requirements, is often missed?

What is Software testing ?

Software testing is, simply, the act of verifying that some software does confirm to the expected outcomes.

The academic definition of software testing, is according to the IEEE Standard Glossary of Software Engineering IEEE 610.12-1990 “Testing is the process of exercising a system by manual or automatic means to verify that it satisfies specified requirements or to identify differences between actual and expected results”

What is testing made of ?

The testing activity is basically only about executing the software and verifying that it confirms to the original requirements with the intent of identifying some potential bugs or to measure some aspects of its quality. Practically, testing is done by executing a set of test cases on the software under test. A test case is defined, according to the IEEE 610-1990 as follows: "A set of test inputs, execution conditions, and expected results developed for a particular objective, such as to exercise a particular program path or to verify compliance with a specific requirement".

If, for some particular feature, the output of the software equals the expected outcome, the test case made for that purpose passes. Otherwise, the test case fails. As an example, if we want to test that some button effectively redirect to some other website, if the redirection is effectively done, the test case testing this flow should pass.

How testing is done ?

Testing can be done either manually or by the use of some tool that helps in automating some phases of the testing process

What is end to end testing ?

Depending on the use case, different levels of testing can be performed on the software under test. Testing can be performed on the smallest code unit to verify that some function behaves as expected as well as on the complete software to test its behavior from the client perspective. One form of testing performed to ensure that the complete behavioral flow of the software is respected is called end to end testing. In the case of web applications, end to end testing is usually performed to simulate some real world scenario of some random user using the different parts of the application

Cypress

Cypress is a testing framework for testing web applications. Cypress is usually used for end to end testing of web applications but can also be used for unit testing and integration testing. With Cypress, you just have to write the test cases and the tool will make sure to execute those tests against your web application

Installing Cypress

You can refer to Cypress official documentation to see specific details on how to install Cypress in your specific environment. If you are using npm, you can install cypress only by :

npm i cypress --save-dev

Getting started with cypress for a React app

For the steps described below, you'll need node and npm installed on your machine. Start by creating a react app in your local folder

npx create-react-app app-name

Move to the created folder and start the react app by

cd app-name && npm start

Your created app should be available on localhost:3000.

Install cypress in your project by

npm i cypress --save-dev

You can start using cypress by

node_modules/.bin/cypress open

Move to the package.json file and add the following line

  "scripts": {
    ...
    "cypress":"cypress open"
  },

By this, you can now start cypress by

npm run cypress

When you installed cypress, a folder named cypress was created in your local directory. The test files in cypress do usually have the extension .spec.js

Move to the integration folder inside the created cypress folder and create your first test file

cd cypress/integration
touch first-cypress-test.spec.js

Paste the following code into your test file

describe("First test", () => {
  it("Test that the page can be visited", () => {
    cy.visit("http://localhost:3000");
  });
});

This code just checks that your React app can be visited. Start then cypress inside your project folder by

npm run cypress

Your react app should also be started. When you run cypress, a window containing all your test files should open

Click on your created test file "first-cypress-test.spec.js" to execute it. It will run that test file in a new window in your browser

Add more tests

You can, as an example, test the redirection to the react website by adding the following code in your test file

  it("Test the redirection", () => {
    cy.visit("http://localhost:3000");

    cy.contains("a", "Learn React")
      .should("have.attr", "href", "https://reactjs.org")
      .click()
      .then((link) => {
        cy.request(link.prop("href")).its("status").should("eq", 200);
      });
  });

when you execute that test file, it will give the following output

Usual flow when testing a web application

The usual flow of testing web applications is the following :

• Visit a web page
• Query an element
• Interact with that element
• Assert that the response got from the element is what was expected

Most used functions when writing test cases with cypress

You can refer to this great cheat sheet to see the most used functions when you'll be writing test cases with cypress

Real test cases of a production app

You can refer to this real world payment app made by cypress to demonstrate the usage of cypress methods. You can, as an example, look at this location in their github repo to see examples of test cases

Final words

The testing activity is simply the activity done to prevent problems or bugs to happen in the software at some later point in time. It is a crucial activity to the long term success of an application. When tests are written for some software, the chances of some side effects happening when some change is introduced decreases which helps maintaining the software in the long run. If some piece of code is not tested, then there are chances that it may break for some particular input.

End to end testing is the testing activity done to test the complete behavioral flow of an application from start to finish. For testing some feature in a web application, cypress is a great tool that any junior web developer can quickly grasp. However, in this blog post, we only made a quick introduction into this tool. If you want to dive deep into it, their official documentation is the biggest asset.

If this post was helpful to you in any way, please don't hesitate to share it. You can also follow my Twitter account if you would like to see more content related to web programming.