Cypress: How to Get the Href Attribute

Cypress: How to Get the Href Attribute

21 May 2024 Stephan Petzl Leave a comment Tech-Help

When working with Cypress, you might encounter a scenario where you need to handle links that open in a new tab. Since Cypress does not support multiple tabs, you can work around this limitation by extracting the href attribute of the link and then opening it in the same tab. This article will guide you through the process.

Problem Statement

You have a link within your application that opens in a new tab. To test this link using Cypress, you need to capture the href attribute and navigate to it within the same tab.


The following code snippet demonstrates how to achieve this:

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) => {

This code does the following:

  • Uses cy.get() to select the link element.
  • Asserts that the link has an href attribute and that it includes the string ‘contact’.
  • Extracts the href attribute and navigates to it within the same tab.

Alternative Methods

Using invoke to Get the Href Attribute

If you prefer, you can use the invoke method to achieve the same result:

cy.get('div.footer-nav > ul > li:nth-child(2) > a')
    .invoke('attr', 'href')
    .then(href => {

Preventing the New Tab

Another approach is to remove the target attribute from the link, preventing it from opening in a new tab:

cy.get('div.footer-nav > ul > li:nth-child(2) > a').invoke('removeAttr', 'target').click();

Best Practices

For more information on handling variables and aliases in Cypress, you can refer to the Cypress documentation on variables and aliases.

Enhancing Your Testing Workflow

For those looking to streamline their testing processes further, consider using Repeato, a no-code test automation tool for iOS and Android. Repeato allows you to create, run, and maintain automated tests for your apps quickly and efficiently. With its intuitive test recorder and scripting interface, Repeato can handle complex use cases and offers a seamless experience for both novice and advanced testers.

Additionally, Repeato already supports testing websites inside an Android emulator or device, with explicit web testing support coming soon.

For more detailed guides and documentation, please visit our documentation page.

Like this article? there’s more where that came from!