Writing E2E Tests Using Cypress in Minutes

Why Tests Matter (But Often Get Ignored)

In the fast-paced world of software development, time is a precious commodity. Developers are often juggling multiple tasks, from fixing bugs to implementing new features. Writing tests, while crucial for a stable product, often falls by the wayside. Many developers simply pass the responsibility of testing to QA teams or, worse, push directly to production without comprehensive testing.

However, writing end-to-end (E2E) tests doesn’t have to be time-consuming or painful. With the right tools, you can ensure your app’s stability without compromising on development speed. Enter Cypress — a powerful, developer-friendly E2E testing framework that can help you write and run tests in minutes.

What Makes Cypress Special?

Cypress is a modern E2E testing tool designed with developers in mind. It provides:

• An intuitive interface for writing and running tests.
• Fast feedback loops with real-time reloads.
• A built-in browser to watch your tests in action.
• Tools like the Cypress Chrome Extension to record user steps and generate tests automatically.

If you’re developing a React app with Vite, let’s set up Cypress and write our first test in just a few minutes.

Setting Up Cypress in a React App Bootstrapped with Vite

Here’s how to get started:

Step 1: Install Cypress

Run the following command to install Cypress in your project:

npm install cypress --save-dev

Step 2: Add a Cypress Script to package.json

Update your package.json to include a script for running Cypress:

"scripts": {
  "cypress:open": "cypress open"
}

Step 3: Open Cypress

Run Cypress using the following command:

npm run cypress:open

This will launch the Cypress Test Runner, wher you can choose where you want to open the testing environment. Select chrome or any other option and click on Start E2E Testing in Chrome.

cypress window

This will open a chrome window where you will be able to see the followind tab opened.

Step 4: Write a Sample Test

Here’s an example of a basic test:

describe('My First Test', () => {
  it('Visits the app and checks the title', () => {
    cy.visit('http://localhost:3000'); // Replace with your app URL
    cy.contains('Welcome'); // Replace with the expected text in your app
  });
});

Save this file in your Cypress integration folder (e.g., cypress/e2e/my-test.cy.js).

Step 5: Run Your Test

Use the Cypress Test Runner to execute your test. Watch the magic as Cypress runs it step-by-step in the browser!

Click on the test file you created, and it will start testing.

Simplify Test Creation with Cypress Chrome Extension

Writing tests manually is straightforward, but Cypress offers an even faster way to create tests: the Cypress Chrome Extension. Here’s how it works:

1. Install the extension from the Chrome Web Store.
2. Open your application in the browser.
3. Start the Cypress recorder and perform the actions you want to test (e.g., filling a form, clicking a button).
4. Stop the recording, and the extension will generate a Cypress test script for you.
5. Copy the generated script and save it in your Cypress integration folder.

This extension is a game-changer for developers who dread writing tests from scratch. It simplifies the process by recording user actions and generating ready-to-use Cypress test scripts, saving time and ensuring accuracy.

One important thing wile using chrome extension is that you need to pass test ids or just ids or unique classes to the buttons or elements that you are clicking, or else it will just pick up elements class names and that may cause issues while running the tests. So review the code that extension has generated for you first.

Final Thoughts

Incorporating Cypress into your workflow ensures that your app is tested thoroughly before reaching production. With its intuitive setup, robust features, and tools like the Chrome Extension, you can start writing and running E2E tests in minutes.

So, no more excuses! Make testing an integral part of your development process and deliver high-quality apps with confidence.

Writing tests will save a lot of your time down the road. it will help you test the features with in a few seconds.

There are some complexities in writing tests for actions that should be performed after specific api is resolved, but cypress provides a great control over that too. Learn more on this URL about wait function in cypress: https://docs.cypress.io/api/commands/wait

Find me on your favorite platform

• Github — Follow me on GitHub for further useful code snippets and open source repos.
• My Portfolio — Connect with me through my portfolio
• LinkedIn Profile — Connect with me on LinkedIn for further discussions and updates.
• Twitter (X) — Connect with me on Twitter (X) for useless tech tweets.

Other Links

• https://chromewebstore.google.com/detail/cypress-chrome-recorder/fellcphjglholofndfmmjmheedhomgin