Blank page after running Cypress tests

Question

Whenever I run a new cypress test, the page that is supposed to show the UI is blank. Even when I click on each part of each test it remains blank. Please see image below.

image

Cypress package version: 10.4.0
Node v16.16.0

Code:

    describe("home page", () => {
      beforeEach(() => {
    cy.visit("http://localhost:3000")
    })

    context("Hero section", () => {
      it("the h1 contains the correct text", () => {
      cy.getByData("hero-heading").contains(
        "Testing Next.js Applications with Cypress"
      )
    })

    it("the features on the homepage are correct", () => {
      cy.get("dt").eq(0).contains("4 Courses")
      cy.get("dt").eq(1).contains("25+ Lessons")
      cy.get("dt").eq(2).contains("Free and Open Source")
    })
  })

  context("Courses section", () => {
    it("CourseL Testing Your First Next.js Application", () => {
      cy.getByData('course-0')
        .find('a')
        .eq(3)
        .contains('Get started')
    })
  })
})

    /// <reference types="cypress" />

    Cypress.Commands.add('getByData', (selector) => {
  return cy.get(`[data-test=${selector}]`);
});

Answer 1

I faced the same issue in Cypress version 12.0.0 and I solved it by adding this configuration to cypress.config.js

testIsolation: false,