How to call iframe postMessage using Cypress?

Viewed 255

I have an app which uses Vimeo. When the video is finishes, the app responds to this. Everything works as expected, but to make sure it keeps working, I would like to test this behaviour using Cypress. Because I don’t want to make the test wait for the video, I want to skip the video using the Vimeo postMessage API. I have the following test:

cy.window().then(
  (window) =>
    new Cypress.Promise((resolve) => {
      const vimeo = window.document
        .querySelector('[data-block="@appsemble/video"] > div')
        .shadowRoot
        .querySelector('iframe')
        .contentWindow;
      const handler = ({ data }) => {
        console.log(data);
        if (data.method === 'getDuration') {
          window.removeEventListener('message', handler);
          vimeo.postMessage(
            { method: 'setCurrentTime', value: Math.floor(data.value) - 1 },
            '*',
          );
          resolve();
        }
      };
      window.addEventListener('message', handler);
      vimeo.postMessage({ method: 'getDuration' }, 'https://player.vimeo.com');
    }),
);

This doesn’t work. The message handler is never called, meaning the promise is never resolved and Cypress times out.

However, if I debug the Cypress tests and call postMessage on the iframe, then Vimeo responds and the Cypress promise is resolved.

In my cypress.json I already have the following:

{
  "chromeWebSecurity": false
}

Am I missing something or is it simply not possible to call postMessage from in a Cypress test?

0 Answers
Related