I am dealing with a pretty tricky button that is supposed to open a new document. Per default it opens the document in a new tab, but I need to use it so it opens the URL in the same page. Unfortunately this is no href element for which there are several ways to deal with in Cypress. Instead the button looks like this:
<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>
I can click this button in Cypress, but using the methods for dealing with opening href links in the same tab do not apply here.
This is the code I tried applying one of the methods I found when searching for continuing in the same tab.
cy.get('.header-add-button').invoke('removeAttr', 'target', '_blank').click()
It clicks the button, but the page still opens in a new tab.
{edit} According to the dev the button redirects you via AJAX call. Not sure what to make of it, but that's all the answer I got.
You can check your the function is called when you click on that button. You'll have to look into the javascript to see the name for your app. I'm not sure how you could get the url if you need to do more testing on the new tab, but basically it will look like this:
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');
References:
Combining jjhelguero's answer with this link I found the solution!
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;
})
})
This opens the desired link in the same tab so I can continue testing :)