Cypress/Next.js 使用 --watch 选项进行 E2E 测试效果很好，但使用 --headless 失败答案

【问题标题】：Cypress/Next.js E2E test with --watch option works well, but failed with --headlessCypress/Next.js 使用 --watch 选项进行 E2E 测试效果很好，但使用 --headless 失败
【发布时间】：2021-05-17 16:33:00
【问题描述】：

感谢赛普拉斯团队。我对命令进行 e2e 无头测试有一个问题。

当我使用 --watch 选项运行测试时，它通过了。但是 --headless 选项失败了。我需要在 CI 上运行它，所以它必须尽快解决这个问题。

这是我运行的命令。

yarn nx run checkout-e2e:e2e --watch

yarn nx run checkout-e2e:e2e --headless

我总共有3个测试文件，具体是第一个测试在长时间延迟（大约60秒）后没有通过，但其余的都通过了。

这是一个要运行的代码文件。其他文件几乎相同。

const classname = 'buybox--buy-box-example-one-size'
const url = `?path=/story/${classname}`

describe('BuyBox Example visual regression', () => {
  it('Matches the snapshot', () => {
    cy.visit(url)
    cy.viewport(1000, 1500)
    cy.get(`#${classname}`)
    cy.get('body').type('S')
    cy.get('body').type('A')
    cy.wait(3000)
    cy.get('body').matchImageSnapshot('buyboxOneSizeDesktopExample')
    cy.viewport(375, 667)
    cy.get(`#${classname}`)
    cy.get('body').type('S')
    cy.get('body').type('A')
    cy.wait(5000)
    cy.get('body').matchImageSnapshot('buyboxOneSizeExample')
  })
})

我的开发环境：

Windows 10
VS 代码
赛普拉斯 6.0.1
节点 14.16.1
故事书 6.2.8

这是无头模式下的错误截图。 https://prnt.sc/131k32j

如果有人知道它的原因和解决方法，请回复。谢谢。

【问题讨论】：

标签： next.js cypress e2e-testing headless

【解决方案1】：

我试过解决这个问题，终于找到了。

转到 plugin/index.js 并注释此行...

 // on('file:preprocessor', preprocessTypescript(config))

Fixing e2e test failed on headless mode

我不确定为什么这对我有用，但我希望这对遇到相同问题的每个人都有帮助。如果有人知道此解决方案的原因，请在此处发表评论。谢谢。

【讨论】：