Testing Next.js Applications with Cypress/

...

/

Interacting with Form Elements

Interacting with Form Elements

Learn to interact with form elements using Cypress.

We'll cover the following...

In this lesson, we will learn how to interact with form elements using Cypress. With Cypress, we can easily simulate user actions on input fields, checkboxes, and buttons using functions like .type() and .click(). Using these powerful functions, we can confidently interact with the various form elements we encounter during testing, ensuring that our end-to-end tests are comprehensive and reliable. Here is an example of this.

Testing form inputs

Let’s navigate to the cypress/e2e/create-page.cy.ts file.

describe("Meetup create page", () => {
  beforeEach(() => {
    cy.task("reset");
  });

  it("Create page is rendered correctly", () => {
    cy.visit("/create");

    cy.contains("Add a new meetup");
  });

  it("Meetup title and datetime input work", () => {
    cy.visit("/create");

    cy.get("input#name").should("have.value", "").type("test");
    cy.get("input#name").should("have.value", "test");

    cy.get("input#datetime").should("have.value", "").type("2030-10-10T10:10");
    cy.get("input#datetime").should("have.value", "2030-10-10T10:10");
  });

  it("Submitting empty form gives error on required fields title, location and date", () => {
    cy.visit("/create");

    cy.get("button:submit").click();

    cy.get("[data-cy='name-error']").contains(
      "Please enter a name for the meetup."
    );
    cy.get("[data-cy='location-error']").contains(
      "Please enter a location for the meetup."
    );
    cy.get("[data-cy='date-error']").contains(
      "Please enter a date that is in the future."
    );
  });
});

export {};

In these tests, we perform end-to-end testing on the form elements in our Next.js application using Cypress. We validate input fields, such as the ...