Quick Snippets - Validate all page links

Broken links can lead to an extremely frustrating user experience and are one of the harder things to check. Third parties may change their URL structure and clicking on every link manually is a time consuming process. Heres how I decided to tackle this problem using Cypress.

• GitHub Link

  cy.get("a").each((link) => {
    cy.wrap(link)
      .invoke("attr", "href")
      .then((href) => {
        cy.request(href).then((resp) => {
          expect(resp.status).to.eq(200);
        });
      });
  });

Walkthrough

Lets walk through the code above, line by line.

• First step is to gather all of the a tags on the page. We do that with the cy.get('a') selector.
• Now that we have all of the a tags we need to loop over each one of them. Cypress provides a really nice each method just for this case.
• In the next line, we use cy.wrap. We do this because the link that is yielded from the .each command is a DOM node so we need to turn it back into a Cypress object in order to use Cypress methods.
• Now that we have a cypress object that we know is an a tag, lets get the HREF from it using the invoke command.
• We have the HREF! Great! Our next goal is to make a request to this HREF. To do that, I use the then method. This allows us to work with the subject yielded from the previous method which is the HREF string.
• We are now ready to use the request method to make sure our HREF is working as expected.
• We need to assert upon the result of our request so we use the then method again to pass the result of the request into another function where we can write our assertion to make sure our response status has a 200 response code. We have access to the entire response object here so if we wanted to perform additional assertions upon the response body, that is also accomplishable.
• Were done! In less than 10 lines of code, you learned about 6 cypress commands and a pattern to validate every HREF on a page!