29

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

1

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}]`);
});

5 Answers 5

48

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,
7
  • 2
    Thank you Ahmed. This issue was driving crazy!
    – Larry King
    Commented Jan 1, 2023 at 0:47
  • I'm Glad it helped. I hope they make it more obvious in the docs Commented Jan 2, 2023 at 18:24
  • 2
    Documentation: docs.cypress.io/guides/core-concepts/test-isolation Commented Jan 23, 2023 at 3:58
  • 2
    As per the docs, is it not a bad practice to turn off the testIsolation flag? It says that it can make the test flaky. Commented Feb 11, 2023 at 7:07
  • But doesn't "make test flaky" is a bad practice :D IMHO it's nice that test isolation is the default so that you program your mind to do it. Commented Feb 12, 2023 at 1:59
7

In your cypress.config.js page, make the below changes to include testIsolation :

module.exports = defineConfig({
  e2e: {
   setupNodeEvents(on, config) {
    // implement node event listeners here
    },
    testIsolation: false,
  },
});
0

You might have put the it() describe() statements in the wrong place. Try creating the most simple test file possible or better still use an example test that cypress provides strip it down and continue to test it until it is barebones.

-1

Try adding 's' to http; this might solve that else here is similar issue reported which might give you clue to your problem https://github.com/cypress-io/cypress/issues/4235

-4

I have a "solution" in my tests - it seems that the it steps lose the URL.

Remove all the it steps:

describe('Register Native', () => {
  // it("Verify1", () => {
   : a
  // })
  // it("Verify2", () => {
   : b
  // })
})

Now I have a structure like this (only one it step):

describe('Registrer Native', () => {
  it('Whole test- Without IT parts', () => {
: a
: b
: c
  })
})

It is not an optimal solution as I now have a long test without intermediary it sections.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.