运行赛普拉斯测试后出现空白页

Question

每当我运行新的 cypress 测试时，应该显示 UI 的页面都是空白的。即使我单击每个测试的每个部分，它仍然是空白的。请参见下图。

图像

Cypress 软件包版本：10.4.0
Node v16.16.0

代码：

    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

我在 Cypress 版本 12.0.0 中遇到了同样的问题，我通过将此配置添加到 cypress.config.js 解决了它

testIsolation: false,

Answer 2

在 cypress.config.js 页面中，进行以下更改以包含 testIsolation ：

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

Answer 3

尝试在 http 中添加 's'；这可能会解决其他问题，这里报告了类似的问题，这可能会给您提供问题的线索https://github.com/cypress-io/cypress/issues/4235