如何模拟 Cypress.io 中丢失的窗口焦点

Question

我正在使用 Cypress.io 为网站编写 E2E 测试。我想测试的功能之一是该站点正确检测焦点丢失并显示（角度材料）对话框。我遇到的问题是我找不到可靠的方法来触发测试环境中发生窗口焦点丢失。我查看了 Cypress.io 中各种焦点和模糊事件的文档，但一无所获。有谁知道是否可以通过 Cypress.io 以编程方式触发窗口焦点丢失（模糊），如果可以，是否有我可以遵循的文档或示例？

Answer 1

这取决于您的页面如何侦听此事件，因此有一些潜在的解决方案：

尝试：

cy.window().trigger('blur')

如果这不起作用，请尝试：

cy.document().then((doc) => {
  cy.stub(doc, "hidden").value(true)
})
cy.document().trigger('visibilitychange')

在某些情况下

Answer 2

我有同样的问题，但批准的答案对我不起作用。但下面的代码没问题

cy.document().then((doc) => {
  cy.stub(doc, "visibilityState").value("hidden") //or "visible" if you want focus
})
cy.document().trigger('visibilitychange')

Answer 3

根据您的功能的实现方式，您还可以像这样触发模糊/聚焦：

// trigger blur
cy.document().then(doc => {
  cy.stub(doc, 'visibilityState').value('hidden')
})
cy.document().trigger('visibilitychange')

// trigger focus
cy.document().then(doc => {
  cy.stub(doc, 'visibilityState').value('visible')
})
cy.document().trigger('visibilitychange')

这对我来说是有效的。