Question 37271 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Clicking on Links that doesn't contains href in cypress – Jquery

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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 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.

    Login or Signup to reply.
  3. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search