如何在Cypress中调用iframe的postMessage方法测试Vimeo视频逻辑？

Cypress本身完全支持在测试中调用postMessage，你遇到的问题是触发时机不满足Vimeo API要求、请求格式缺失必填字段导致的。

具体问题原因 #

• 你发送postMessage时Vimeo iframe还未完成初始化，内部还未绑定消息监听逻辑，请求直接被忽略。你手动调试时因为页面已经完成加载，所以请求能被正常接收。
• 标准Vimeo postMessage API要求所有请求必须携带唯一id字段用于匹配响应，缺失该字段时Vimeo不会返回响应。

修正方案 #

首先补充cypress.json配置：

{
  "chromeWebSecurity": false,
  "includeShadowDom": true
}

然后使用修正后的测试代码：

cy.window().then(
  (window) =>
    new Cypress.Promise((resolve) => {
      const iframe = window.document
        .querySelector('[data-block="@appsemble/video"] > div')
        .shadowRoot
        .querySelector('iframe');
      
      // 等待iframe加载完成后再操作
      iframe.addEventListener('load', () => {
        const vimeo = iframe.contentWindow;
        // 生成唯一请求ID用于匹配响应
        const requestId = Math.random().toString(36).slice(2);
        const handler = ({ data }) => {
          if (data.id === requestId && data.method === 'getDuration') {
            window.removeEventListener('message', handler);
            vimeo.postMessage(
              { 
                method: 'setCurrentTime', 
                value: Math.floor(data.value) - 1, 
                id: `${requestId}_set` 
              },
              'https://player.vimeo.com'
            );
            resolve();
          }
        };
        window.addEventListener('message', handler);
        // 请求携带必填的id字段
        vimeo.postMessage(
          { method: 'getDuration', id: requestId }, 
          'https://player.vimeo.com'
        );
      });
    }),
);

如果仍偶现超时，可以先监听Vimeo播放器的ready事件，确认播放器完全就绪后再发送业务请求即可。

内容的提问来源于stack exchange，提问作者Remco Haszing