Clicking on Links that doesn't contains href in cypress

Question

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.

So you are trying to click the `Preview ` button if I understood correctly? After click what happens? — Alapan Das, Aug 05 '22 at 06:52
after clicking, the link opens in a new tab. I want to open that link in same tab. — Moueen Akhtar, Aug 05 '22 at 07:11
Have you tried all three scenarios detailed here? https://glebbahmutov.com/blog/cypress-second-tab/ — jjhelguero, Aug 05 '22 at 16:49
Sadly there's not really enough info to solve this, can only take a guess. You need to find out how the the tab is opened from the source code. — Fody, Aug 05 '22 at 20:39

score 3 · Accepted Answer · edited Aug 09 '22 at 08:40

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

score 0 · Answer 2 · answered Aug 05 '22 at 07:32

0

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.

answered Aug 05 '22 at 07:32

Fody

23,754
3
20
37

thanks for sharing this. I have tried stub as well and my link still opens in new tab. – Moueen Akhtar Aug 05 '22 at 08:34
furthermore, the URL is not static, it dynamic and changes the id but the base URL will remain the same so I can't hard code the URL. – Moueen Akhtar Aug 05 '22 at 08:37

score 0 · Answer 3 · answered Aug 05 '22 at 22:20

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

Clicking on Links that doesn't contains href in cypress

3 Answers3