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:

Copy to Clipboard

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:

Copy to Clipboard

Syntax Highlighterdescribe('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
});
});</code>

`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:

Copy to Clipboard

Syntax Highlightercy.get(‘input[name=”email”]’).type(‘user@example.com’);</p>
<p>cy.get(‘button’).contains(‘Login’).click();</p>
<p>cy.url().should(‘include’, ‘/dashboard’);


4. Assertions
Assertions help verify that your application behaves as expected. Cypress provides built-in assertions:
Copy to Clipboard
Syntax Highlightercy.get(‘h1’).should(‘be.visible’);</p>
<p>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:
Copy to Clipboard
Syntax Highlighternpx 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
Copy to Clipboard
Syntax Highlightercy.pause();
 to pause test execution or inspect tests directly in the browser.
 
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.