Cypress get href attribute

47
votes

I have a test case in which i have a link which opens in a new tab, and since cypress doesn't support multi tab, i wanna get 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');
});
3
javascriptcypress
" it doesn't work" can you be more clear? What specific behavior are you seeing, and what do you want to see? - Hamms
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

3 Answers

76
votes

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

29
votes

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

0
votes

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.