How to Test a Sitemap with Cypress

Testing a sitemap needs 2 simple steps: reading the XML and checking the links!

Why making an E2E test for a Sitemap?

Building E2E can work wonderfully for user actions but sometimes building a quick test can also help you save a ton of time by basically building a “virtual version” of yourself.

Testing a sitemap will let you check if all the pages on each build or change to your website have correctly generated or compiled the different pages.

For this tutorial, we choose to use Cypress.io cause it’s one of the most used E2E tools on the web.

1. Reading the sitemap.xml

Getting the array of all the URLs from the sitemap.xml file and parsing it to get all the complete links!

We need to make a “cy.request”, basically a simple HTTP request to the sitemap XML file to get it. We then take the response and parse it with cypress getting all the different “loc” items, each one will be a single page.

let urls = [];
  before(() => {
    cy.request({
      url: "https://www.vercel.com/sitemap.xml",
      headers: {
        "Content-Type": "text/xml; charset=utf-8",
        "user-agent":
          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36",
      },
    })
      .as("sitemap")
      .then((response) => {
        urls = Cypress.$(response.body)
          .find("loc")
          .toArray()
          .map((el) => el.innerText);
      });
  });

2. Check the URLs

Now you will need to scan the entire list of links and check if they are valid! We prepared two possibilities to do it:

• Fast Check: check the sitemap fast, checks only 200 response to page URLs from the server. ✨
• Slow Check: check the complete page fully loaded waiting for JavaScript to load. ✨

Slow Check

For a complete check, we need to check if the URLs are valid.

We will use “cy.visit”, this command will load the page and wait for the page JavaScript to have fully loaded. This will lead to a much slower test because each page will need to be fully loaded!

it("should succesfully load each url in the sitemap", () => {
    urls.forEach((url) => {
      cy.visit(url);
    });
  });

Fast Check

Checking a sitemap for missing pages can take a long time with Cypress using cy.visit! If we want to check the rendered pages faster we just check for the response from the server when we ask for the page. If the server sends us back a 200 response, we continue to the next page!

it("should succesfully load each url in the sitemap", () => {
    urls.forEach((url) => {
      cy.request({
        url: url,
        headers: {
          "Content-Type": "text/html",
          accept: "*/*",
          "user-agent":
            "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36",
        },
      }).then((resp) => {
        expect(resp.status).to.eq(200);
      });
    });
  });

Conclusion

There is no right or wrong way to build an E2E test. The only thing you should care about is building a proper test that will automate your manual actions.

With this tutorial, we won’t ever need to check again for the sitemap because we will have a test that will automatically check for all the pages on each Cypress run!

Less time to do a manual test and more time to have fun building other things! Let us know in the comments which kind of test you would like to see next!

Resources

• Sitemap Slow Check code: sitemap-slow.ts
• Sitemap Fast Check code: sitemap-fast.ts
• cypress example directory: cypress-for-everything#examples
• sitemap examples: cypress-for-everything/tree/main/examples/sitemap

More content at plainenglish.io