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 “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” IEEE 610.12-1990 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 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". IEEE 610-1990 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 to see specific details on how to install Cypress in your specific environment. If you are using npm, you can install cypress only by : official documentation 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 touch first-cypress-test.spec.js cd cypress/integration 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 .click() });
  }); it( "Test the redirection" , () => { cy.visit( "http://localhost:3000" ); cy.contains( "a" , "Learn React" ) .should( "have.attr" , "href" , "https://reactjs.org" ) .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 to see the most used functions when you'll be writing test cases with cypress great cheat sheet Real test cases of  a production app You can refer to this made by cypress to demonstrate the usage of cypress methods. You can, as an example, look at in their github repo to see examples of test cases real world payment app this location 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 is the biggest asset. official documentation If this post was helpful to you in any way, please don't hesitate to share it. You can also follow if you would like to see more content related to web programming. my Twitter account

Flow

Twitter

The Clean Code Book for JavaScript Developers: A Quick Summary

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Clean Code

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Software Engineering

Nominated for 2022 - HackerNoon Contributor of the Year - Django

Portfolio

Too Long; Didn't Read

Make resilience your competitive advantage

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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Best Tools For Building Your First MERN Application

11 Best Automation Testing Tools to Try in 2021

145 Stories To Learn About Test Automation

Python-Powered Performance Testing for QA Testers: A Beginner's Guide to Cloud API Load Testing

57 Stories To Learn About Automated Testing

Best Tools For Building Your First MERN Application

11 Best Automation Testing Tools to Try in 2021

145 Stories To Learn About Test Automation

Python-Powered Performance Testing for QA Testers: A Beginner's Guide to Cloud API Load Testing

57 Stories To Learn About Automated Testing

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps