I am automating my regression checklist and I am stuck in a test case in which I have to test a link that opens in a new tab, as Cypress doesn't support multiple tabs, so I want to open that link in the same tab. The problem is the button doesn't contain any href link in tag. Here is the class.
Note: The code snips shown below are working fine if href exists.
<a rel="noopener noreferrer" target="_blank">
<div class="tooltip" style="width: fit-content;">
<span class="tooltip-trigger">
<button class="button-wrapper default undefined undefined mr-3">Preview</button>
</span>
</div>
</a>
I have tried multiple work around but nothing works for me. Some are as follow.
cy.xpath('/html/body/div[1]/div[1]/header/div[2]/a')
.should('have.attr', 'href').and('include', 'Preview')
.then((href) => {
cy.visit(href)
})
Another workaround.
cy.xpath("/html/body/div[1]/div[1]/header/div[2]/a")
.first()
.should(($a) => {
$a.attr("target", "_self");
}).click();
I tried this one too.
cy.xpath("/html/body/div[1]/div[1]/header/div[2]/a")
.invoke("removeAttr", "target")
.click();
Looking forward to hearing back from Community.
The following solution worked in my case.
cy.window().then((win) => {
cy.stub(win, "open")
.callsFake((url) => {
return win.open.wrappedMethod.call(win, url, "_self");
})
.as("open");
});
cy.get("a").contains("Preview").click();
cy.get("@open").should(
"have.been.calledWithMatch",
"{your url}"
);you can read more about this solution here. https://glebbahmutov.com/blog/cypress-tips-and-tricks/#deal-with-windowopen
When I'm faced with this problem I change the target attr to _self. I'm not sure if my selector will get your a element. I don't know if the span with class tooltip-trigger is unique.
cy.get(`span[class="tooltip-trigger"]`)
.should('be.visible')
.parent()
.parent()
.parent()
.find('a')
.and('have.attr', 'target' , '_blank')
.invoke('attr', , 'target' , '_self')
.click()
//assert location
I'm not sure if this does it, but since there's no href on the <a> element I presume the new tab is opened by onclick handler of the <button>.
I would start by stubbing the onclick and asserting that it was called.
const stub = cy.stub()
cy.get('button')
.then($button => {
$button[0].onclick = stub
})
.click()
cy.wrap(stub).should('be.called')
Then to progress with the test at the new tab URL, open another test and directly cy.visit() that URL.