Test meta tags with Cypress

By Sergio Xalambrí · September 6, 2023

If you want to ensure your webs have the correct meta tags like the title, description, Open Graph or Twitter Cards.

We can test the title using a built-in Cypress command.

cy.title().should("eq", "Test meta tags with Cypress");

For meta tags, we will need to first find them on the document, but we can use custom commands to help us avoid repetitive code.

// cypress/support/commands.ts
Cypress.Commands.add("metatag", (name: string) => {
  return cy.get(`head > meta[name="${name}"]`);
});

// types.d.ts
declare namespace Cypress {
  interface Chainable<Subject> {
    metatag(name: string): Chainable<JQuery<HTMLMetaElement>>;
    metatag(name: string): Chainable<Subject>;
  }
}

This command let use find a metatag using its name, so now we could do:

cy.metatag("description").should(
  "have.attr",
  "content",
  "An article about testing meta tags with Cypress",
);

For the Open Graph and Twitter Card tags, we can do something similar but using the property attribute of the meta tag, we could also prefix the name with og: or twitter:.

// cypress/support/commands.ts
Cypress.Commands.add("og", (name: string) => {
  return cy.get(`head > meta[property="og:${name}"]`);
});

Cypress.Commands.add("twitter", (name: string) => {
  return cy.get(`head > meta[name="twitter:${name}"]`);
});

// types.d.ts
declare namespace Cypress {
  interface Chainable<Subject> {
    og(name: string): Chainable<JQuery<HTMLMetaElement>>;
    og(name: string): Chainable<Subject>;

    twitter(name: string): Chainable<JQuery<HTMLMetaElement>>;
    twitter(name: string): Chainable<Subject>;
  }
}

And use it in our tests.

cy.og("title").should("have.attr", "content", "OG Title");
cy.twitter("title").should(
  "have.attr",
  "content",
  "Twitter Card Title"
);

With a combination of cy.metatag, cy.og and cy.twitter we can now test any meta tag our HTML may include and ensure we don't break them in a future change.