是否可以使用 Cypress 将 postMessage 发送到应用程序？如何传递将通过 postMessage 接收的数据？

Question

我正在创建 Cypress e2e 测试，但是我们的应用程序作为父页面顶部的模态 (iframe) 打开。由于 Cypress 不支持 iframe，我决定尝试运行 app "standalone"。但是，在启动应用程序时，它会通过 window.postMessage 从父页面获取数据（有关流和会话的信息）。是否可以通过 Cypress 将此数据传递给应用程序？

我试图通过 cy.request 获取我们从后端接收的数据，它解决了会话数据的问题，但是我仍然无法弄清楚如何传递有关流的信息。

Answer 1

访问页面时发送POST表单确实是可能的。 As of Cypress 3.2.0, you can send POST requests using cy.visit.

您可以查看 cy.visit() docs for more details，但这里是您尝试执行的操作的快速代码示例：

cy.visit({
  url: 'http://my-app.com/standalone-iframe-modal.html',
  method: 'POST',
  body: {
    formKey: 'some-value',
    anotherKey: 'some-other-value'
  }
})

Answer 2

您可以在 Cypress 中发送 window.postMessage()。因为 Cypress 在您的应用程序旁边的浏览器中运行，所以它可以访问所有 Web API。

为了获得对应用程序 window 对象的引用，您可以使用 cy.window()

总而言之，这就是您向被测应用程序发送 postMessage 的方式：

cy.window() // get a reference to application's `window`
.then($window => {
  const message = 'some data here'
  $window.postMessage(message, '*')
})

是否可以使用 Cypress 将 postMessage 发送到应用程序？如何传递将通过 postMessage 接收的数据？

Is it possible to send `postMessage` to an app with Cypress? How to pass data that would be received via `postMessage`?

browser

automated-tests

e2e-testing

cypress