How do before, beforeEach, afterEach and after work?

Hooks set up and clean up state around tests. beforeEach is the workhorse for visiting a page and seeding data that every test needs. Use before for expensive setup that does not change between tests, and afterEach or after for cleanup that the test isolation model does not already handle.

describe("checkout", () => {
  before(() => {
    cy.task("seedCatalog");
  });

  beforeEach(() => {
    cy.visit("/cart");
    cy.fixture("cart.json").as("cart");
  });

  afterEach(() => {
    cy.clearCookies();
  });

  after(() => {
    cy.task("resetDatabase");
  });

  it("shows the cart total", () => {
    cy.get("[data-cy=total]").should("be.visible");
  });
});

Order and scope

• before and after at the root of a spec run once for the whole file
• before and after inside a describe run once for that block
• beforeEach and afterEach run around every it in their block
• Outer hooks run before inner hooks on setup and after inner hooks on teardown
• A failure in before skips the tests in that block

Hooks should not become a hidden test. If a beforeEach performs three interactions and two assertions, a failure is harder to attribute. Keep setup small and deterministic, and leave the behaviour under test inside the it block.