How To Find Broken Links Using Cypress [With Examples]

How To Find Broken Links Using Cypress

Till now, you would have understood the importance of checking broken links on your website? So, with the platform all set, let’s look at how to find broken links using Cypress. For starters, Cypress is a next-generation front-end testing tool built for the modern web; Cypress testing enables you to write faster, easier, and more reliable tests.

In case you are coming from a Selenium automation background, make sure to check out the differences between Selenium and Cypress from our blog that covers Cypress vs Selenium comparison. Saying that, let’s focus on our problem about broken links and how to build some tests to validate that using Cypress test automation.

Let’s take a sample HTML page that contains four relative hyperlinks:

<a href="/at-home-coronavirus-testing">Testing</a>
    <a href="/paying-for-covid-19-testing/">Paying for covid Testing</a>
    <a href="/covid-19-antibody-testing">Covid19 antibody Testing</a>
    <a href="/covid-19-testing-statistics">Testing Statistics</a>

As you can see, we have four links, and we need to click on each link, check the redirect URL, and then go back to our main page. So, how do you find broken links using Cypress considering the above HTML page.

What if we come up with an implementation that is limited to finding which out of the four are broken in nature. If the implementation is hardcoded for four links, it will lead to scalability issues, especially if the checker is used on a different web page.

Here is the sample code that uses the Cypress framework to find broken links on the website. As mentioned earlier, this is not a scalable approach and should be avoided when finding broken links on large-scale websites.

describe('Test Navigation', () => {
  it('can navigate and test the pages', () => {
    cy.visit('https://www.testing.com/at-home-coronavirus-testing/');
 
    cy.get('main:contains("Testing")');
    cy.go('back');
 
   cy.visit('https://www.testing.com/paying-for-covid-19-testing/');
   cy.get('main:contains("Test")');
   cy.go('back');
 
   cy.visit('https://www.testing.com/covid-19-antibody-testing/');
   cy.get('main:contains("Testing")');
   cy.go('back');
 
 
   cy.visit('https://www.testing.com/covid-19-testing-statistics/');
   cy.get('main:contains("Testing")');
   cy.go('back');
  
  });
});

In our example below, we are clicking on every page and checking the specific assertion, it does not follow the design patterns, and we can improve the way we get the links on our website.

Let’s take a look at the following example.

it('Navigate through the links using loops', () => {
 
  const pages = ['Testing Covid', 'Paying for Covid19 Test', 'Test Antibody Covid19', 'Testing Statistics']
 
  cy.visit('/')
 
  pages.forEach(page => {
 
    cy.contains(page).click()
    cy.location('pathname').should('eq', `/${page}`)
    cy.go('back')
 
  })
 
})

As you can deduce from the code above, we are looping against the specific pages and validating the page information. We created a ‘forEach’ loop that will iterate through the array where the entire procedure is repeated. Particularly useful if, for any reason, our navigation bar changes items. We’ll add an item to the array, and our test works.

Navigating to subdomains works fine, but Cypress will throw an error if you visit two different superdomains. Thus, you can see different superdomains in other tests but not in the same test.

Instead of opening every link on the test website, we can simply check links with the href attribute and check their HTTP status code. If the return code is 404, it means that that particular link is a broken (or dead) link.

Austin Siewert

CEO, Vercel

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

Demonstration: Finding Broken Links With Cypress

In order to demonstrate how to find broken links on your website using Cypress, let’s perform a broken links test on the TestMu AI Blog. There are close to 500+ posts on the TestMu AI blog, and our broken link checker using Cypress will check every link (i.e., under href attribute).

Here is the test scenario used for finding broken links on a website using Cypress:

Test Scenario

• Go to TestMu AI Blog on Chrome.
• Collect all the links present on the page.
• Send HTTP requests for each link.
• Print whether the link is broken or not on the terminal.

Project Structure

It is time to create our test under the integration folder; as you can see below, we have a test called test-example.js. Shown below is the directory structure:

Implementation

For ensuring that the code is extensible and maintainable to check for broken links on the ‘N’ number of websites, we keep the test URL in a separate JSON file (e.g., config.json).

{
    "URL1": "https://www.lambdatest.com/blog",
    "URL2": "https://www.lambdatest-playground.com"
}

As seen above, we have two test URLs (i.e., URL1 and URL2); however, we would run the test only on URL1. Shown below is the implementation (that uses JavaScript).

import config from './config.json'
 
describe('Test Broken Links', () => {
   
    it('verify navigation accross the pages', () =>{
     
        cy.visit(`${config.URL1}`)
        cy.on('window:confirm', cy.stub().as('confirm'))
        Cypress.on('uncaught:exception', (err, runnable) => {
            // returning false here prevents Cypress from
            // failing the test
        return false
        })
 
        cy.wrap('passed').as('ctrl')
        cy.get("a:not([href*='mailto:]']").each($el => {
 
                if ($el.prop('href').length > 0) {
                    const message = $el.text()
                    expect($el, message).to.have.attr("href").not.contain("undefined")
                    cy.log($el.attr('href'))                       
                }
        })
    })
})

Code Walkthrough

Step 1:

We first import config.json since it contains the test links.

import config from './config.json'

Step 2:

We now visit a remote URL. The base URL is stored in Cypress.json to ensure better portability and maintainability.

cy.visit(`${config.URL1}`)

Step 3:

We need to ignore some uncaught exceptions when we are testing some websites. In this case, we can use the following code to turn off uncaught exception handling for specific errors. Cy.on is to catch a single exception or event; in this case, we have used this code to fail a test on purpose, using a small hack.

cy.on('window:confirm', cy.stub().as('confirm'))
        Cypress.on('uncaught:exception', (err, runnable) => {
            // returning false here prevents Cypress from
            // failing the test
        return false
   })

Step 4:

cy.wrap is used for logging purposes in Cypress. In this case, we are using it as a control variable to test or fail the test depending on our parameters.

cy.wrap('passed').as('ctrl')

Step 5:

We use “each” to get the elements, excluding “mailto:” and empty ones. With this, we will get the URLs that we want to monitor for broken links with Cypress.

cy.get("a:not([href*='mailto:]']").each($el => {

Step 6:

We are validating head links, and one of those always presents anchors for the code block shown below. As a part of the process, we validate them all. We combine the selectors wherever possible.

if ($el.prop('href').length > 0) {
      const message = $el.text()
      expect($el, message).to.have.attr("href").not.contain("undefined")
      cy.log($el.attr('href'))                       
}

Execution

Now, let’s add to Cypress and run it from there; if you already have an npm project, please open a terminal using VS Code and run the following command:

npm install cypress

Now that Cypress is installed, let’s run the following command to get the Cypress folder:

npx Cypress open

For configuring Cypress, we open Cypress Test Runner, which creates Cypress.json. This JSON file is used to store any configuration values you supply.

{
    "watchForFilesChanges": false,
    "chromeWebSecurity": false,
    "viewportWidth": 1000,
    "viewportHeight": 600,
    "waitForAnimation": true,
    "defaultCommandTimeout": 6000,
    "execTimeout": 60000,
    "pageLoadTimeout": 60000,
    "requestTimeout": 150000,
    "responseTimeout": 150000,
    "video": true,
    "failOnStatusCode": false
}

Open Cypress test runner and click on the corresponding test to execute the same.

Here is the test execution, which indicates that there are zero broken links on the test website:

Austin Siewert

CEO, Vercel

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

Take this certification to showcase your expertise with end-to-end testing using Cypress automation framework and stay one step ahead.

Here’s a short glimpse of the Cypress 101 certification from TestMu AI:

Perform Cypress Parallel Testing on TestMu AI and speed up the testing and release process. Check out how you can test your Cypress test scripts on TestMu AI’s online cloud.