Cypress Chronicles: Unlocking the Power of End-to-End Testing – Part 1: Introduction and Setup

Welcome to the Cypress Chronicles, where we uncover the secrets of end-to-end testing with Cypress! In this first part, we’ll introduce Cypress, set it up in your project, and write a few basic tests to show you just how powerful and intuitive this tool can be. Ready to get started? Let’s go!

In modern web development, ensuring that an application works seamlessly from start to finish is critical. That’s where end-to-end (E2E) testing comes in—it simulates real user interactions to validate that everything functions as expected. But let’s face it: traditional E2E testing tools are often slow, flaky, and a nightmare to debug. This is where Cypress shines. As a next-generation testing framework, Cypress eliminates flakiness, provides instant feedback, and runs directly in the browser, making it faster, more reliable, and a joy to work with compared to conventional tools.

Why Cypress ?

Cypress redefines end-to-end testing by addressing the limitations of traditional tools. Its unique architecture, combined with a rich set of features, enables developers to write faster, more reliable, and easier-to-debug tests. Whether you’re testing simple workflows or complex applications, Cypress provides the tools you need to succeed. Here are the key features that make Cypress a must-have in your testing toolkit.

1. Easy Installation
Install Cypress via npm, yarn, or as a standalone application—no complex setup required.

2. Guided Setup
Cypress guides you through initial configuration, helping you write your first test in minutes.

3. Readable Tests
Write tests that read like plain English, making them easy to understand and maintain.

4. All-in-One Framework
Cypress includes everything you need out-of-the-box, so you can focus on writing tests, not managing dependencies.

5. Time Travel
Debug tests effortlessly by traveling back in time to see how your application behaved at each step.

6. Live Reload
Watch tests execute in real time with automatic reloads on file changes, creating a seamless feedback loop.

7. Automatic Waiting
Cypress automatically waits for elements and assertions, eliminating the need for arbitrary waits or sleeps.

8. Network Traffic Control
Stub and intercept network requests to test edge cases and error scenarios with ease.

9. Cross-Browser Testing
Run tests in Chrome, Firefox, Edge, and more, ensuring your app works across all major browsers.

10. Screenshots & Videos
Automatically capture screenshots and videos of test runs for easier debugging in CI or locally.

11. Component Testing
Test individual UI components in isolation, perfect for modern frontend frameworks like React and Vue.

12. Consistent Results
Built from the ground up, Cypress runs in the same run-loop as your app, ensuring stability and reliability.

Cypress’s modern architecture and robust feature set make it the ideal tool for tackling the complexities of end-to-end testing. Whether you’re testing simple workflows or intricate applications, Cypress delivers the speed, reliability, and flexibility you need. Let’s move on to setting up Cypress and putting its capabilities to work.

Installation and Setup

To demonstrate how Cypress works, we’ll use a Next.js app called Sportify—inspired by the idea of tracking live sports scores and updates, much like Spotify tracks music. This app is a work in progress, and we’ll be adding features as we move further into the series, making it a perfect example for testing real-world scenarios at every stage of development. Don’t worry—you don’t need to build the app from scratch. We’ll focus on setting up Cypress and writing tests for an existing app. If you’d like to follow along, you can clone the app from GitHub or use your own Next.js project.

Before we dive into setting up Cypress, let’s take a quick look at the Sportify app. For now, the app is in its early stages, but it already includes a few key features that we can test. Here’s what the app currently looks like.

As you can see, the app features:

• A navbar with the Sportify logo on the left and a theme switcher on the right. The theme switcher allows users to toggle between dark and light themes.
• A simple homepage with a heading that says Sportify and a paragraph that says Coming Soon.

While the app is minimal right now, it’s a perfect starting point for writing Cypress tests. In this part of the series, we’ll focus on testing the existing functionality, such as:

• Testing the theme switcher to ensure it toggles between dark and light themes.

• Checking that the homepage displays the correct content (e.g., the Sportify heading).

With the Sportify app as our testing ground, let’s move on to setting up Cypress.

The first step to using Cypress is installing it in your project. Cypress is available as an npm package, so you can install it quickly using npm or yarn. Open your terminal, navigate to your project directory (in this case, the Sportify app), and run the following command:

npm install cypress --save-dev

With Cypress installed, it’s time to fire it up and explore its Test Runner. To launch Cypress, run the following command in your terminal:

npx cypress open

This command opens the Cypress Test Runner, a powerful interface that allows you to manage and execute your tests. Once the Test Runner opens, you’ll see the following screen.

Configuring E2E Testing

To configure Cypress for End-to-End (E2E) Testing, click on the E2E Testing option. This will guide you through the setup process which includes configuring the browser and creating the necessary files.

After clicking on E2E Testing, Cypress will:

1. Prompt you to choose a browser (e.g., Chrome, Firefox, Edge) for running your tests.
2. Generate the necessary configuration files (e.g., cypress.config.js) and folder structure for E2E tests.
3. Open the E2E Testing interface in the browser you selected.

Since this is your first time setting up Cypress, there won’t be any spec files yet. Cypress will prompt you to create your first spec file. Click on the Create new spec

---

Creating Your First Spec File

After choosing to create a new spec file, Cypress will guide you through the process:

1. It will suggest a default location for the spec file (e.g., cypress/e2e/spec.cy.js).
2. You can customize the file name and location if needed. I changed the name to home.cy.js.
3. Once the spec file is created, Cypress will provide you with a sample test and automatically run it to verify your setup.

Here’s what the newly created spec file will look like:

describe('template spec', () => {
  it('passes', () => {
    cy.visit('https://example.cypress.io')
  })
})

This is a simple placeholder test that verifies the testing setup is working correctly. It checks that if https://example.cypress.io web site is open which will pass most of the time. While this test doesn’t do much, it’s a great starting point to ensure everything is set up properly.

---

Running the Sample Test

Cypress will automatically run the sample test and show you the results in real time. Since the test is designed to pass, you’ll see a green checkmark indicating success.

Here’s what you’ll see in the Test Runner after running the sample test:

This screen confirms that Cypress is set up correctly and ready to use. Now that you’ve verified your setup, it’s time to replace the sample test with a real test for the Sportify app.

Writing Your First Cypress Test

Now that you’ve verified your Cypress setup with the sample test, it’s time to write your first custom test for the Sportify app. We’ll start by testing the basic functionality of the app, such as the navbar, theme switcher, and homepage content. Let’s dive in!

Replace the sample test case with the following code to check if the Sportify heading is visible on the home screen:

describe('Sportify App', () => {
  it('visit home page and check for sportify heading', () => {
    // Step 1: Visit the homepage
    cy.visit('http://localhost:3000')

    // Step 2: Check that the h1 heading contains "Sportify"
    cy.get('h1').contains('Sportify')
  })
})

This test does the following:

1. Visits the Sportify app’s homepage at http://localhost:3000.
2. Checks that the h1 heading contains the text Sportify.

To run the test, save the file and open the Cypress Test Runner. Click on the test file (e.g., home.cy.js) to execute it. If everything is set up correctly, you’ll see a green checkmark indicating that the test passed. If the test fails, Cypress will provide detailed error messages to help you debug the issue.

Now that you’ve tested the basic elements of the Sportify app, let’s move on to something more dynamic: the theme switcher. This feature allows users to toggle between dark and light themes, and we’ll write a test to ensure it works as expected

Add the following test case to your in you describe block

it('Toggles between dark and light themes', () => {
  // Step 1: Visit the homepage
  cy.visit('http://localhost:3000');

  // Step 2: Check the initial theme (e.g., dark theme)
  cy.get('body').should('have.css', 'background-color', 'rgb(22, 22, 22)');

  // Step 3: Click the theme switcher to toggle the theme
  cy.get('[data-cy="theme-switch"] input').click();

  // Step 4: Check that the theme has changed (e.g., light theme)
  cy.get('body').should('have.css', 'background-color', 'rgb(253, 255, 252)');
});

This test does the following:

1. Visits the Sportify app’s homepage.
2. Checks that the initial theme is dark by verifying the background-color of the body element.
3. Clicks the theme switcher to toggle the theme.
4. Checks that the theme has changed to light by verifying the updated background-color.

Run the test in the Cypress Test Runner to see it in action. If the theme switcher works correctly, you’ll see green checkmarks for each assertion. If not, Cypress will provide detailed error messages to help you debug the issue.

Congratulations! You’ve successfully set up Cypress, written your first custom tests, and validated key features of the Sportify app. From checking static content like the Sportify heading to testing dynamic UI changes like the theme switcher, you’ve taken the first steps toward mastering end-to-end testing with Cypress.

This blog was more about setting the foundation and understanding the basics. In the next part of the Cypress Chronicles, we’ll dive deeper into the practical side of things. We’ll write more tests, explore Cypress commands like visit, get, and others, and learn how to use them effectively to test real-world scenarios.

Stay tuned for more hands-on examples, tips, and best practices to help you unlock the full power of Cypress. Happy testing!"