Cypress Testing Framework
Published: 2024-06-09 18:40:35

Cypress is a testing framework for Javascript that allows you to easily create tests for your web application. You're able to test the app directly in the browser, debug issues directly in the browser, and eliminates flaky tests by interacting with your application the same way users do so you can discover bugs before users do.

In this blog, I will discuss how to create tests in your application using Cypress!

**Step 1: Download Cypress and Add npm Script**
You're going to need to download Cypress using _npm install cypress --save-dev_ and then you can add the script to your package.json file by adding _"cy:open": "cypress open"_.

**Step 2: Open Cypress**
Then, you can open Cypress from the project root using _npx cypress open_ or _npm run cy:open_ and this will open the cypress launchpad. If its your first time using Cypress, you will see a page like so
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtjrah9ysp7g1by1neec.png)
**Step 3: Decide between E2E testing or Component testing**
This is where you will decide on whether to use End to End testing or Component testing.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z26cms9n0g7cx47zz6rx.png)
_E2E Testing_
- Great at verifying your app runs as intended from the front end to the back end
- Good for making sure your entire app is functioning as a cohesive whole
- Testing this way helps ensure your tests and the user's experience are the same

_Component Testing_
- Tests individual components, not the app as a whole
- Focus on testing only the component's functionality and not worry about testing the component as part of the larger app
- Just because all component tests pass, it does not mean the app is functioning as a whole

The documentation recommends using E2E if you are unsure of which type you want and you can always choose a different type later.

**Step 4: Quick Configuration**
This will show all of the configuration files being added to your project.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6lfqvt1ri66c5zx20ru.png)

**Step 5: Choosing a Browser**
You will be presented with a list of compatible browsers Cypress found on your system and you can choose what works best for you. I will be using Chrome.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06wutth1a9kvvop49w1k.png)

**Step 6: Add a Test File**
You are going to click Create new spec
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf74gckwihkjih07kp5n.png)
and this will prompt you with choosing the path for your new spec. You can just accept the default path name. Then, you will see that the spec was successfully added and you can just exit out from that. Now that spec will be displayed in your E2E specs and you can click on it to see Cypress launch it.

**Step 7: Write a test**
Depending on if your test passes or fails, Cypress will update like so
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vne5kwd8aybfo9nyo5n6.png)
or like so
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyanqidfwce2g84i3t89.png)
The tests reload in real time so once you create a test, you should see it pass or fail in real time. Tests in Cypress use describe and it from Mocha and expect from Chai which are popular frameworks that many people have used before, making it very accessible and easy to use. They also have an ESLint plugin for projects that use Cypress https://github.com/cypress-io/eslint-plugin-cypress

**Step 8: How to Write a Good Test**
To write a good test, you should cover 3 things: set up the application state, take an action, and make an assertion about the resulting application state. First put the app into a specific state, then take some action in the app that causes it to change, and finally check the resulting app state. A rule of thumb with writing tests is to write clear test descriptions, avoid unnecessary repetition in tests, and to structure tests in a readable and maintainable way.

**Step 9: Debugging**
With Cypress, the test code runs in the same loop as your app so you have access to the code running on the page, as well as the things the browser makes available to you. Cypress makes debugging easy by using the .debug() method like so
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4isx3jiiqarabnbmau1s.png)
Then, you're able to use the Developer Tools to get a view of what is going on
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6k9dhkj5t31caiwsma8.png)
You can also use .pause() to run the test command by command.

And that's it! The best way to learn is by doing and the Cypress documentation is a really good and easy tool to use to put testing into action! Happy testing!

**Sources**
https://www.cypress.io/
https://docs.cypress.io/guides/overview/why-cypress
https://docs.cypress.io/guides/getting-started/opening-the-app
https://docs.cypress.io/guides/core-concepts/testing-types#What-is-E2E-Testing
https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test
https://docs.cypress.io/guides/guides/debugging