80

I have a test case in which I have a link which opens in a new tab. Since Cypress doesn't support multiple tabs, I want to get the href attribute of that link and then open it in the same tab. I'm trying to do it this way, but for some reason it doesn't work.

it('Advertise link should refer to Contact page', () => {
    var link = document.querySelector("div.footer-nav > ul > li:nth-child(2) > a").href;
    cy.visit(link);
    cy.title().should('include', 'Text');
});
Max
  • 803
  • 1
  • 6
  • 5
  • 1
    " it doesn't work" can you be more clear? What specific behavior are you seeing, and what do you want to see? – Hamms Jan 19 '18 at 19:40
  • Some other things to consider - 1) does `var link` get the correct path 2) have you tested it in a browser 3) does the `visit()` need a `cy.wait()` for the page to settle? – Richard Matsen Jan 20 '18 at 06:51

4 Answers4

118

The code below should do what you're trying to achieve. There is also an entire recipe with suggestions on how to test links that open in new tabs.

it('Advertise link should refer to Contact page', () => {
   cy.get('div.footer-nav > ul > li:nth-child(2) > a')
     .should('have.attr', 'href').and('include', 'contact')
     .then((href) => {
       cy.visit(href)
     })
})

I would also suggest reading through the Cypress document on the best ways to assign and work with variables: https://on.cypress.io/variables-and-aliases

Don't Panic
  • 41,125
  • 10
  • 61
  • 80
Jennifer Shehane
  • 6,645
  • 1
  • 30
  • 26
  • _href_ is a JQuery so the compiler complains because it is not assignable to a string, but then it works well running the test. How to avoid the warning? I'm using Visual Studio Code and cypress 8.3.1 – Alex 75 Mar 28 '22 at 14:56
  • you can avoid warning by converting JQuery Element to String: cy.visit(String(href)) – user640232 Jul 15 '22 at 16:43
51

Solution 1: invoke("attr", "href")

Navigate to the URL specified in the element's href attribute: 

cy.get(selector)
      .invoke('attr', 'href')
      .then(href => {
        cy.visit(href);
      });

Reference: https://docs.cypress.io/api/commands/invoke.html#Function-with-Arguments

Solution 2: Prevent content from opening in a new tab.

Remove the target attribute from the anchor element, then click on it to navigate to its URL within the same tab:

cy.get(selector).invoke('removeAttr', 'target').click()

Reference: https://docs.cypress.io/examples/examples/recipes.html#Tab-Handling-and-Links

Mobiletainment
  • 22,201
  • 9
  • 82
  • 98
  • This is amazing approach in order to keep testing what happens in the new tab without going to new tab, which is unsupported in cypress. Many thanks! – krankuba Oct 06 '20 at 15:46
0

I resolved this issue:

First - check if href have right value

Second - create another test in which visit that href

Value for href was hard coded in my case.

srgj
  • 421
  • 1
  • 6
  • 11
  • Just some side notes: -Your selector is "div.footer-nav > ul > li:nth-child(2) > a" too complicated, if there is a simple way to select that value ( maybe check attribute or if href start with something specific ) - The idea of Cypress is E2E so 1 test should be bigger and do more assertion than unit/integration tests – Marco Amato Feb 11 '22 at 09:57
0

I used something similar in a test:

cy.get('a').each(($el) => {
    const herf = $el.attr('href');
    cy.log(herf);

    // then I will do your test:
    cy.visit(link);
    cy.title().should('include', 'Text');

});
k.vincent
  • 3,743
  • 8
  • 37
  • 74
Marco Amato
  • 42
  • 2