Automated Testing with Cypress: A Guide for Frontend Developers

When I first encountered Cypress, it wasn't by choice. I had to jump in because of project requirements. As a frontend developer with an AngularJS background, I had little experience with automated testing, especially end-to-end (E2E) testing. Suddenly, I was expected to set it up and write tests using a tool I barely knew. The pressure was real—I had to deliver results while learning on the fly. Setting up Cypress, understanding its syntax, and integrating it into our project felt overwhelming.

But things started to change as I dug deeper. What seemed complicated at first became surprisingly intuitive. Cypress's real-time feedback and easy-to-use interface made a huge difference. I could spot and fix issues faster than ever before.

Once I got the hang of it, I saw how powerful it was for E2E testing. Writing tests that simulated real user actions became smooth. Looking back, the struggle was worth it. Cypress has become one of my favorite tools, and I can't wait to share what I've learned. If you're new to it, I hope my experience helps make your journey a little easier!

1. Install Cypress

To begin, you need to add Cypress to your project. Run the following command in your terminal:

npm install cypress --save-dev

Once installed, open Cypress with:

npx cypress open

This will launch the Cypress Test Runner and create a cypress folder in your project directory.

2. Structure of Cypress Tests

Cypress tests are written in JavaScript or TypeScript and placed in the cypress/integration folder. Each test file usually ends with .spec.js.

Here's a basic structure:

describe('Example Test Suite', () => {
  it('Visits the Home Page', () => {
    cy.visit('http://localhost:4200'); // Replace with your app's URL
    cy.contains('Welcome'); // Check for an element containing specific text
  });
});

3. Key Cypress Commands

Here are some essential commands you'll use frequently:

• cy.visit(url): Opens the specified URL.
• cy.get(selector): Selects an element by CSS selector.
• cy.contains(text): Finds elements containing specific text.
• cy.click(): Simulates a click event.
• cy.type(text): Types text into an input field.

Example:

cy.get('input[name="email"]').type('user@example.com');
cy.get('button').contains('Login').click();
cy.url().should('include', '/dashboard');

4. Assertions

Assertions help verify that your application behaves as expected. Cypress provides built-in assertions:

cy.get('h1').should('be.visible');
cy.url().should('include', '/home');

5. Running Tests

You can run Cypress tests directly from the Test Runner or in headless mode from the terminal:

npx cypress run

6. Best Practices

• Keep Tests Independent: Each test should run on its own without depending on others.
• Use Data Attributes: Target elements with custom data attributes (data-cy) instead of relying on classes or IDs.
• Leverage Cypress Dashboard: For better visibility and parallel test execution in larger projects.

7. Debugging

Cypress offers excellent debugging tools. Use cy.pause() to pause test execution or inspect tests directly in the browser.

cy.pause();

Final Thoughts

Looking back, my journey with Cypress turned a challenging start into a rewarding experience. What felt overwhelming at first became a valuable opportunity to grow. Now, I appreciate the power of E2E testing and the insights from the other end as a software developer. It wasn't always easy, but the skills I gained have made me a more confident and capable engineer.