如何将 onBeforeLoad 创建为命令？

Question

我创建了一个脚本，该脚本使用 Cypress 导航到 URL 和 onBeforeLoad：

const bomMessage = cy.stub().as('bom');
cy.visit('https://helloworld.com', {
  onBeforeLoad(win) {
    win.addEventListener('message', (event) => {
      if (event.data.event === 'ReadyToGo') {
        bomMessage(event.data);
      }
    });
  },
});

但这是我的问题，我有一个场景，我输入 url 例如helloworld.com 和 link 内有一个名为“带我到下一页”的按钮 - 当我单击该按钮时，我希望触发 onBeforeLoad。我的想法是也许能够制作

onBeforeLoad(win) {
    win.addEventListener('message', (event) => {
      if (event.data.event === 'ReadyToGo') {
        bomMessage(event.data);
      }
    });
  },

作为一个命令，我可以在我的脚本中随时调用，等待它发生，否则失败。

是否可以在我的测试中随时调用 addEventListener 而不是在 cy.visit 调用中调用它？

回答后编辑：

Given('works', () => {
  const bomMessage = cy.stub().as('bom');

  cy.visit('https://helloworld.com')

  cy.window().then((win) => {
    win.addEventListener('message', (event) => {
      if (event.data.event === 'ReadyToGo') {
        bomMessage(event.data);
      }
    });
  });

  cy.get('@bom').should('be.calledOnce');
});

Answer 1

onBeforeLoad 挂钩已准备好处理初始页面访问期间发生的 message 事件。

但是你可以在测试中的任何地方设置它在触发器之前（在你的例子中是按钮点击）。

您只需要 win 对象。

cy.visit(...)                  // no listener here

cy.window().then(win => {
  win.addEventListener('message', (event) => {
    // set up the listener
  });
}

cy.get('my-button').click()  // triggers message event

如何将 onBeforeLoad 创建为命令？

How to create onBeforeLoad as a command?

selenium

typescript

cypress