JavaScript End to End Testing for Web Apps - Cypress
Software testing plays a crucial role in the software development process. I like this quote below by the great Aristotle, which is applicable to us in the modern world as software developers.
“Quality is not an act, it is a habit” – Aristotle
Overlooking testing is a common problem that we need to overcome intentionally as developers. In this article I am going to give you a brief overview about Cypress, a super fast and intuitive way to end to end test your web applications. But before we learn about Cypress, we need to understand what end to end tests really are.
What are End to End Tests?
End to end testing is used to test the full flow of an application. The goal of an end to end test, is to interact with the application like an end user does. Manual end to end tests are still practiced in several development teams. This means, QAs and developers have to manually click through an application and test its flow. This as you can predict takes plenty of hours, and is error prone. We could easily miss testing certain workflows and have uncaught bugs.
Automated end to end tests, test an application from start to finish, by simulating a real user scenario.
Benefits of good automated end to end tests are plenty. Some of them are listed below:
- Catches bug early on
- Saves hours spent on manual testing
- High quality software
What is Cypress?
Cypress is a fast, easy, and reliable end-to-end testing framework for anything that runs on your browser. Cypress is open-sourced and written in JavaScript. Traditionally, end to end tests are usually slower and more expensive. With Cypress, there is a significant improvement to the end to end testing experience.
Cypress provides a complete end-to-end testing experience that can test anything that runs on the browser
Benefits of Cypress:
- Faster
- Easy setup
- Easy to write and run tests
- Overall less expensive for development teams to write end to end tests.
Cypress offer some awesome features like time travel debugging, automatic waiting, along with screenshot and videos as well.
Install and Run Cypress Tests
Getting setup and going with Cypress is quite simple. To get Cypress integrated within your project you can install it using the command below. You can use Cypress with any of your frontend projects, it can be in React, Angular, Vue or just plain JavaScript. Depending on whether you use npm or _yarn _ you can use either commands to install.
npm install cypress --save-dev
or
yarn add cypress --dev
On VS Code, there is an awesome plugin for Cypress, named Cypress Snippets. Make sure to install it, and that can provide code snippets for your Cypress code within VS Code.
By default, if you integrate Cypress within an existing project, it generates sub-folders within the main cypressfolder. The folder structure is as shown in the picture below with folders for fixtures, integration, plugins and support.
The integration folder is where you will add your Cypress test files.
Writing Your First Test
Within the integration folder, create a new test file with the extension .js. Let’s call it _first_spec.js. _I am going to write a simple test to validate that the client is running at a certain url. Let’s say your web app is running at http:_localhost:4100. _We are going to write a quick test to ensure that the app indeed loads at that url.
/// <reference types="Cypress"/>
describe ('My First Test Suite', () => {
it('test url works', () => {
cy.visit('http://localhost:4100')
});
})
We can enable IntelliSense on VS Code, using the first line on the code snippet above. This makes our IDE provide intelligent code suggestions. Notice, that the test uses keywords like _describe _and _it. _These maybe familiar to you from other testing frameworks as well. They come from Mocha, another popular testing framework.
We are using a Cypress command visit to that visits a given URL. Cypress comes with many commands that facilitate you to test your application. All Cypress commands begin with cy. followed by the name of the command. The _visit _command takes a url as an argument.
Our test file is complete, and it is time to run it.
Running Your Test
You can run your Cypress tests either from command line or from the Cypress test runner. I like the visual features of the Cypress test runner. To open the Cypress test runner, run the following command.
npm run cypress:open
This command, open the test runner as shown below:
Within the Cypress test runner, you can select the test you want to run, and also pick a browser to rub the tests against. Since we have only one test written so far, we see that on the test runner. Clicking on this test will run it on a new browser.
You will notice how fast the Cypress test runs and you can also see how Cypress interacts with the application just like a real user does. On the left side you can see the tests executing and each command and assertion is displayed, and on the right you can see the browser opens up and runs the application. Cypress visits the url localhost:4100 and the web app is running locally. This means our initial end-to-end test passed! Yay!
You can try this out with your web app as well, and this will get you all ready to start writing Cypress tests.
Next Steps
We just scratched the surface here with Cypress. I gave you a quick overview on Cypress, and getting setup and started with it. We will cover more on Cypress tests in the upcoming articles.
You can also checkout my course linked below on Cypress, where I teach Cypress from scratch, and write Cypress tests for a real world application.
Cypress End-to-end JavaScript Testing by Adhithi Ravichandran
Other Resources:
I hope you enjoyed this article. If you liked this post, don’t forget to share it with your network. You can follow me on twitter @AdhithiRavi for more updates or if you have any questions.
The Original Article can be found on programmingwithmosh.com
#javascript #testing #developer
