End-to-end testing workflow with Cypress

Key takeaways:

  • Cypress uses the cy.visit() command to easily navigate to specific urls, simplifying the testing process.

  • With commands like should, expect, and and, Cypress allows for essential verification that applications behave as expected.

  • Automating form interaction and validation with Cypress makes it straightforward and efficient to ensure web forms function correctly.

Cypress is a modern testing framework designed to make end-to-end testing fast, easy, and enjoyable. In this mini-topic, we’ll explore how to automate form interaction and validation with Cypress. We’ll cover navigating to a web page and interacting with elements.

Navigating to a web page

To begin, we use Cypress to navigate to a specific URL using the cy.visit() command. This command instructs Cypress to open the specified URL in the browser.

cy.visit('/')

Interacting with elements

Next, we interact with elements on the web page. For example, we locate an anchor element (<a>) with an href attribute set to "/about" and simulate a click action on it using the .click() command.

cy.get('a[href="/about"]').click();

Assertions

Assertions are essential for verifying that your application behaves as expected. Cypress allows us to make various assertions using commands like should, expect, and and. For example, we can check whether a list item (represented by <li>) on the webpage has the correct text color or not.

  cy.get('li')
       .should('have.css', 'color')
       .and('eq', 'rgb(255, 0, 0)')
  });

Testing with cypress

In the code below, we want to test the Angular application running on the backend. Cypress first accesses the application at / and checks that the homepage displays the title "Welcome" and ensures that the list items have the correct red text color.

describe('My App', () => {
  before(() => {
    cy.visit('/');
  });
  
  it('it has a title', () => {
    cy.get('h1').contains('Welcome');
  });
  
  it('it has a red color element', () => {
    cy.get('li')
       .should('have.css', 'color')
       .and('eq', 'rgb(255, 0, 0)')
  });

});
Cypress testing

  • Line 2: Specified a setup routine using the before hook to prepare the test environment before executing any tests.

  • Lines 6–8: We create our first test where we check whether the Angular application has a title defined in the h1 tag and contains the Welcome keyword.

  • Lines 10–14: We create another test where we check whether the li element has the color red.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

Is Cypress an npm package?

Yes, Cypress is available as an npm package and can be installed using npm.

Is Cypress for API testing?

Yes, it supports API testing alongside end-to-end tests.

Does Cypress need coding?

Yes, some coding in JavaScript is required to write tests in Cypress.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
YouTubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved