如何在同一选项卡中继续？

Question

我正在处理一个非常棘手的按钮，它应该打开一个新文档。 默认情况下，它会在新选项卡中打开文档，但我需要使用它，因此它会在同一页面中打开 URL。 不幸的是，这不是在 Cypress 中有多种处理方法的href元素。 相反，按钮看起来像这样：

<button class="header-add-button k-button">
    <svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
        <g class="fa-group">
            <path class="fa-secondary" fill="currentColor" d="M176 448a32 32 0 0 0 32 32h32a32 32 0 0 0 32-32V304h-96zm64-416h-32a32 32 0 0 0-32 32v144h96V64a32 32 0 0 0-32-32z"></path>
            <path class="fa-primary" fill="currentColor" d="M448 240v32a32 32 0 0 1-32 32H32a32 32 0 0 1-32-32v-32a32 32 0 0 1 32-32h384a32 32 0 0 1 32 32z"></path>
        </g>
    </svg>
    <!-- <i class="fad fa-plus"></i> -->
    <span class="span_hover_effect" style="top: 8.9375px; left: 8.28125px;"></span>
</button>

我可以在 Cypress 中单击此按钮，但使用在同一选项卡中打开href链接的方法不适用于此处。

这是我尝试应用在同一选项卡中继续搜索时发现的一种方法的代码。

cy.get('.header-add-button').invoke('removeAttr', 'target', '_blank').click()

它单击按钮，但页面仍然在新选项卡中打开。

{edit} 根据开发人员的说法，按钮通过 AJAX 调用重定向您。 不知道该怎么做，但这就是我得到的全部答案。

Answer 1

当您单击该按钮时，您可以检查您的 function 是否被调用。 您必须查看 javascript 才能看到您的应用程序的名称。 如果您需要在新选项卡上进行更多测试，我不确定如何获得 url，但基本上它看起来像这样：

cy.visit('./index.html') 
cy.window().then((win) => {
  // spy on 'open' function, yours might be called differently
  cy.spy(win, 'open').as('redirect');
  // or stub on 'open' function so no actually redirect occurs
  // cy.stub(win, 'open').as('redirect');
})



// click on button with ajax call

cy.get('@redirect')
  .should('be.calledWith', '_blank', '/about');

参考：

菲利普·赫里克博客

柏树配方示例

Answer 2

将 jjhelguero 的答案与此链接相结合，我找到了解决方案！

    it('add contract ', function () {
      cy.window().then(win => {
         cy.stub(win, 'open').as('open')
      })
      cy.get('.header-add-button').click()
      cy.get('@open').should('be.calledWith', Cypress.sinon.match.string).then(stub => {
         cy.visit(Cypress.env('url') + stub.args[0][0]);
         stub.restore;
      })
   })

这将在同一选项卡中打开所需的链接，以便我可以继续测试:)