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

Question

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

现在发生的情况是，我看到 WDS 导致页面重新加载，但赛普拉斯会话只是停留在停止的位置。

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

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

旧的hacky解决方案：

您可以将以下内容添加到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