DEV Community: ashishreddy.K

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

ashishreddy.K — Fri, 14 Feb 2025 02:39:12 +0000

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:

Prompt you to choose a browser (e.g., Chrome, Firefox, Edge) for running your tests.
Generate the necessary configuration files (e.g., cypress.config.js) and folder structure for E2E tests.
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:

It will suggest a default location for the spec file (e.g., cypress/e2e/spec.cy.js).
You can customize the file name and location if needed. I changed the name to home.cy.js.
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:

Visits the Sportify app’s homepage at http://localhost:3000.
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:

Visits the Sportify app’s homepage.
Checks that the initial theme is dark by verifying the background-color of the body element.
Clicks the theme switcher to toggle the theme.
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!"

The Power Pair: ESLint and Prettier—Masters of Quality and Style!✅🎨

ashishreddy.K — Fri, 11 Oct 2024 17:44:35 +0000

Welcome to the exciting world of coding in the AI era! 🚀 In this age of automation, many aspects of software development have become a breeze. But hold on—while we’re riding this wave of ease, it’s super easy to overlook some of the foundational gems like linting and formatting. Enter our heroes: ESLint and Prettier! 🤖💻

Recently, while chatting with some friends, I noticed a common mix-up between these two powerful tools. 🤔 Let’s unravel the mystery together and discover how they complement each other like peanut butter and jelly! 🍇🥜✨

Linting vs. Formatting: The Coding Showdown! 🎉

Let’s dive into the thrilling world of linting and formatting—the unsung heroes of clean code! 🌟

**Linting **is like having a personal coach for your code, checking for mistakes, syntax errors, and patterns that could lead to bugs. It’s all about enforcing rules to keep your code pristine and consistent.

Imagine it as your trusty spell checker, swooping in to catch those sneaky grammar blunders and typos. 🦸‍♂️ Just as you wouldn’t want a paper filled with errors, you definitely don’t want your code looking messy! Linting ensures everything is neat, tidy, and ready for the spotlight! 📝✅

Now, let’s talk about formatting! This is where the magic of style comes in! ✨ Formatting organizes and styles your code for readability and consistency, focusing on indentation, spacing, and line breaks without altering the code's functionality.

Think of formatting as your code’s personal stylist! 💇‍♀️ Imagine an answer sheet in an exam: even if your answers are perfect, messy handwriting or poor spacing can make them hard to read. Proper formatting is like putting on your best outfit—it keeps your code clean and polished, making it easier for others (and future you!) to understand. ✏️📄

So there you have it! Linting catches the bugs, while formatting makes everything shine. Together, they make your code a masterpiece! 🎨💻

Meet ESLint: Your Code’s Super Sidekick! 🦸‍♂️

ESLint is like having a wise mentor for your JavaScript and TypeScript code! 🎓 It helps you:

Detect Potential Bugs: Think of ESLint as your bug-hunting buddy, ready to sniff out pesky bugs before they cause chaos! 🐞
Enforce Consistent Coding Styles: It ensures your code has a polished look by enforcing naming conventions and syntax choices. 🎨✨
Promote Best Practices: Say goodbye to spaghetti code! ESLint encourages best practices in code organization. 📚

Enter Prettier: The Styling Guru! 💁‍♀️

Now, let’s welcome Prettier, the ultimate code formatter! 🌟 This tool takes the hassle out of styling, automatically adjusting your code for a consistent visual appeal:

Indentation, Spacing, and Line Breaks: Prettier ensures your code is perfectly indented and spaced. ✨
Consistent Formatting Rules: Whether you love single or double quotes, Prettier keeps your style sharp and professional! 🗒️🎉

Setting Up ESLint: Let’s Get Linting! 🎉

Configuring ESLint is a piece of cake! 🍰 Just run this command in your terminal to kick things off:

npm init @eslint/config@latest

This magical command will guide you through a series of prompts, helping you tailor ESLint to fit your coding needs like a glove! 🧤 Once you’re done, you’ll have a shiny eslint.config.js file that looks something like this:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";

export default [
  {files: ["**/*.{js,mjs,cjs,ts}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
];

Next up, let’s make linting super easy by adding a script to your package.json! Just hop into the "scripts" section and add this line:

"scripts": {
  "lint": "eslint ."
}

And voila! Now you can lint your code by simply running:

npm run lint

With that, you’re all set to keep your code clean, consistent, and ready to shine! 🌟🙌

Setting Up Prettier: Let’s Get Pretty

Getting started with Prettier is a total breeze! 🌬️ First, let’s add it to your project with a snap of your fingers! Just run this command:

npm install --save-dev prettier

Next up, we need to create a file named .prettierrc in your project. This is where the magic happens, and you can customize it to your heart’s content! 💖 Here’s a quick example to get you started:

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}

Now, let’s make formatting a piece of cake! 🎂 Head over to your package.json and add a formatting script in the "scripts" section:

"scripts": {
  "format": "prettier --write ."
}

And ta-da! Your code is now perfectly polished, beautifully formatted, and ready to dazzle! 🌟🎉

The Epic Showdown: ESLint vs. Prettier! ⚔️✨

Let’s dive into the key differences between our two coding champions, ESLint and Prettier! 🏆

Feature	ESLint	Prettier
Primary Function	🕵️‍♂️ Linting and code quality checks	🎨Code formatting
Focus	🔍 Identifying errors and enforcing best practices	✨ Ensuring consistent style
Configurability	🛠️ Highly customizable with rules	🖌️Less customizable; opinionated
Integration	🤝Can be used standalone or with a formatter	🌈 Often used in conjunction with a linter
Types of Issues	⚠️ Syntax errors, potential bugs, stylistic issues	📏 Formatting inconsistencies

Wrapping It Up! 🎉
So there you have it! With ESLint catching those pesky bugs and enforcing best practices, and Prettier giving your code a sleek, polished look, you’re armed with the dynamic duo of coding excellence! 💪✨

Remember, a clean and consistent codebase not only makes you look like a pro but also makes collaboration a breeze! 🌈 So why not share this knowledge with your fellow coders? Like and share this post to spread the love for clean code! ❤️

Keep coding and keep shining! 🌟🚀