Cypress dynamically check deadlinks

Question

I wanted to check my navigations if it is dead / goes to the expected page, i have a menu array, now i want to check if the link is not "#" then visit the url and should contain the those links,

so far i am stuck in this stage:

const menus = Menu;

context("Nav items test", () => {
  beforeEach(() => {
    cy.visit("/");
  });

  it("should redirect to the expected pages", () => {
    cy.get(".navbar-nav>li>a[href!='/#']").each((links, index) => {
      cy.wrap(links).click();
      cy.url().should("contain", links[0].href);
    });
});

export const Menu = [
    {
      id: 1,
      title: "Home",
      link: "/",
      children: [],
    },
    {
      id: 2,
      title: "Consultants",
      link: "#",
      children: [
        { childTitle: "Find a Doctor", childTo: "/consultant/doctors" },
      ],
    },
    {
      id: 3,
      title: "Services",
      link: "/services",
      children: [
        {
          childTitle: "Clinical Laboratory",
          childTo: "/services/laboratoryservices",
        },
      ],
    },
    {
      id: 4,
      title: "Packages",
      link: "/packages",
      children: [],
    },
  ];

score 1 · Answer 1 · answered Sep 14 '22 at 14:06

cy.each() can pass three arguments into the callback - value (the currently yielded value), index (the position of the current value in the overall array), and collection (the entire array of yielded variables).

That being said, your current implementation wouldn't work either, as the DOM where you are getting your initial collection will become unattached when navigating to a new page. I would instead recommend doing two separate tests - one that validates that the href values are what you expect, and another that using cy.visit() to go to those href values does not redirect you.

it('validates the menu item href values are correct', () => {
  cy.get(".navbar-nav>li>a[href!='/#']").each(($link, index) => {
      cy.wrap($link).should('have.attr', 'href', menus[index].link);
    });
});

it('validates navigating to each menu item does not redirect', () => {
  menus.forEach((item) => {
    cy.visit(item.link)
    cy.url().should('eq', `${Cypress.config('baseUrl')}${item.link}`);
  });
});

You may have to do some re-working, in case your app adds/removes trailing slashes, or other URL modifications.

score 1 · Answer 2 · answered Sep 14 '22 at 22:28

Use cy.request() to test links with .each()

const results = []

cy.get(".navbar-nav>li>a[href!='/#']").each($a => {
  const link = $a.prop('href')
  cy.request({
    url: link,
    failOnStatusCode: false  // allow good and bad responses
  })
  .then(response => {
    results.push({link, ok: response.isOkStatusCode})
  })
})

cy.then(() => {
  console.log(results)
})

For example,

const results = []

cy.wrap(['http://example.com', 'http://not-valid.com']).each(link => {
  cy.request({url: link, failOnStatusCode: false})
    .then(result => {
      results.push({link, ok: result.isOkStatusCode})
    })
})

cy.then(() => {
  console.log(results)
})

gives these results:

[
  {link: 'http://example.com', ok: true}
  {link: 'http://not-valid.com', ok: false}
]

Cypress dynamically check deadlinks

2 Answers2