Search⌘ K
Home
Courses
Testing Next.js Applications with Cypress

Best Practices of End-To-End Testing

Explore best practices for end-to-end testing with Cypress in Next.js applications. Understand how to write maintainable tests by breaking them into logical steps, using fixtures and custom tasks for setup, isolating tests, and employing reliable selectors. Learn to combine assertions for efficiency and properly reset application state before each test to ensure consistent results.

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.

Don't
Do
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).

Don't
Do
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 ensure consistent and ...