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

Question

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

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

我似乎找不到实现这一目标的方法。我没有看到任何公共(public)(或私有(private)，就此而言)的方式来触发 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

较旧的 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 重新加载行为 Hook )

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

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