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

Question

I'm creating Cypress e2e tests, however our app is opened as a modal (iframe) on top of a parent page. As Cypress does not support iframes I decided to try and run app "standalone". However on start app is getting data from parent page via window.postMessage (info about flow and session). Is it possible to pass this data to app via Cypress?

I have tried to get data that we receive from backend via cy.request and it solves problem with session data, however I still can't figure out how to pass information about flow.

user_3474615 · Answer

You can send a window.postMessage() in Cypress. Because Cypress runs in the browser next to your application, it has access to all web APIs.

In order to get a reference to the window object of your application, you can use cy.window()

Putting it all together, this is how you send a postMessage to your application under test:

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

user_3474615 · Answer

Sending POST forms when visiting a page is indeed possible. As of Cypress 3.2.0, you can send POST requests using cy.visit.

You can check the cy.visit() docs for more details, but here is a quick code example of what you're trying to do:

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

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

2 Answers