javascript - 如何使用 Cypress 为 Bootstrap4 页面测试以编程方式选择的外部 URL

Question

我开始掌握赛普拉斯。然而，到目前为止，我一直很喜欢它，但我一直坚持以下几点。

我想测试当单击按钮时，用户被定向到正确的外部站点。使用以下代码可以正常工作（目前）：

$("#my-button").click(function() {
  var external_url = 'https://www.somesite.com/';
  if($("#my-checkbox").prop("checked")) {
    external_url += 'foo';
  } else {
    external_url += 'bar';
  }
  window.location.href = external_url;

  return false;
});

在赛普拉斯规范中从小处着手：

it('Should direct to external site depending on checkbox state', () => {
  cy.get('#my-button').click()
})

接收赛普拉斯错误：赛普拉斯检测到页面加载时发生了跨源错误：

阻止来源为“http://localhost:8888”的框架访问跨域框架。

这很公平，我明白为什么会出错。我不想禁用 Chrome 网络安全来绕过它。

有人可以告诉我应该如何测试这个用例吗？

我想我应该用cy.stub()和/或来捕捉位置变化，cy.on()但到目前为止我还没有成功：

it('Should direct to external site depending on checkbox state', () => {
  cy.stub(Cypress.$("#my-button"), "click", () => {
    console.log('stub')
  })

  cy.on("window.location.href", win => {
    console.log('on')
  })

  cy.get('#my-button').click()
})

由于脚本仍尝试将位置设置为外部站点，因此单击按钮仍会导致引发错误。

标签： javascriptjquerybootstrap-4cypress