Testing Next.js Applications with Cypress/

...

/

Best Practices of End-To-End Testing

Best Practices of End-To-End Testing

Learn the best practices for end-to-end testing with Cypress.

We'll cover the following...

Not making useless assertions

When we utilize Cypress’s automatic assertions feature, we can avoid redundant assertions and make our tests easier to understand. Cypress takes care of verifying positive responses to requests and the existence of specific text on a page.

cy.request("/").its("status").should("eq", 200);
cy.contains("Add a new meetup").should("exist");

By relying on Cypress’s built-in capabilities for these checks, we eliminate the need for repetitive assertions.

Breaking down the tests into logical steps

Breaking down test cases into logical steps, such as the Arrange-Act-Assert pattern, is considered a best practice in end-to-end testing. By following this approach, we can separate the setup and initialization phase (arrange), the execution or interaction phase (act), and the verification of expected outcomes (assert).

cy.visit("/create");
cy.get("input#name").type("TypeScript Meetup");
cy.task("seed:events", [{
  id: 1,
  name: "Doesn't matter",
  slug: "typescript-meetup",
  description: "",
  location: "Online",
  dateTime: new Date("2030-10-10T10:10"),
}]);
cy.get("input#location").type("Online");
cy.get("input#datetime").type("2030-10-10T10:10");
cy.get("button:submit").click();
cy.get("[data-cy='name-error']").contains(
  "A meetup with this name already exists."
);

This logical structure makes it easier to understand the purpose of each step, identify potential issues, and perform necessary modifications without affecting the entire test case.

Using fixtures

By using fixtures to seed the database instead of creating test data manually through the web application user interface, we can ...