我怎样才能让剧作家听消息事件

Question

我有一个通过 postMessage 命令进行通信的网站

 window.parent.postMessage(communication, this.origin);

使用剧作家时，我正在尝试执行“消息”处理程序

function eventListener(returnEvent: any): any {
  window.addEventListener('message', function(event: MessageEvent) {
    console.log('Im here');
    if (event.data.messageId === 'payment-method') {
      console.log('setting return event', event);
      returnEvent = event;
      return returnEvent;
    }
  });
}

...

  let returnEvent: any = {};
  await page.evaluate(eventListener, returnEvent);
  await creditCardDetailsPage.fillFormValid();
  await page.waitForTimeout(5000); //give time for message event to fire
  console.log('event was', returnEvent);
  await expect(returnEvent).toEqual(<MY DATA OBJECT HERE>)

控制台输出

Im here
setting return event MessageEvent
event was {}

我无法将我的期望放入代码中page.evaluate()，因为它是在它注入的 javascript 标签的上下文中执行的，而不是在规范的上下文中执行的。

Answer 1

我想最终把它变成 an expect，而不是 anevaluate或 a waitForEvent。

遗憾的是我找不到任何用于收听消息事件的内容。相反，我们只是追求console.info。

该解决方案将其包装page.on('console', ...)到一个异步函数中，我们可以简单地将其用作“如果成功则解决，如果失败则挂起”开关

// Return true if the page emits 'Hello, World!' to the console info level
async function waitForMessageAsync(): Promise<boolean> {
  return new Promise(function (resolve) {
    page.on('console', (msg) => {
      if (msg.type() === 'log' && msg.text() === 'Hello, World!') {
        resolve(true);
      }
    });
  });
}

await expect(await waitForMessageAsync).toBeTruthy();

这样，expect如果等待我们的消息超时，测试就会失败'Hello, World!'！