当 webpack-dev-server 导致页面重新加载时，在 GUI 中重新运行 Cypress 测试

Question

我正在使用 webpack-dev-server 和 Cypress GUI 进行开发工作流，我希望 Cypress 在 WDS 自动重新加载触发的页面重新加载时自动重新运行/重新启动测试。

现在发生的是我看到 WDS 导致页面重新加载，但 Cypress 会话只是停留在它停止的地方。

我似乎无法找到一种方法来实现这一点。我没有看到任何公共（或私人）方式来触发赛普拉斯重新运行当前选定的测试。

Answer 1

更新：现在有一个 NPM 包可以解决这个问题

cypress-hmr-restarter - 它监听 webpack-dev-server 用于重新加载页面的 websocket

npm install --save-dev cypress-hmr-restarter

在cypress/support/index.js：

// cypress/support/index.js
import 'cypress-hmr-restarter'

请参阅https://github.com/cypress-io/cypress/issues/456#issuecomment-566499738

较旧的黑客解决方案：

您可以将以下内容添加到cypress/support/index.js（或规范文件的顶部）：

Cypress.on('window:before:load', (win)=>{
  const _consoleInfo = win.console.info
  win.console.info = function () {
    if (arguments[0].includes('App updated.')) {
      cy.$$('.restart', top.document).click()
    }
    return _consoleInfo.apply(win.console, arguments)
  }
})

只要您有webpack-dev-server信息打印到控制台，这就会起作用（我找不到其他与 webpack 重新加载行为相关的钩子）

这$('.restart').click()是触发测试重新运行的一种非常简单的方法

或者，您可以尝试这个插件，它在源文件上设置自己的观察程序，并在检测到更改时重新运行测试： https: //github.com/bahmutov/cypress-watch-and-reload