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

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.

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.

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.

Step 6: Add a Test File
You are going to click Create new spec

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

or like so

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

Then, you're able to use the Developer Tools to get a view of what is going on

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