How to find broken links in a website using Cypress?

Question

How can I find all broken links in a website using Cypress if there are any? Are there any plugins to use?

If not, how should I write my code that I can see whether the link returns a 200 status (or a successful link)?

Thank you!

score 1 · Answer 1 · answered Mar 04 '21 at 22:38

1

Maybe this?

cy.request('yourlink')
  .should((response) => {
    expect(response.status).to.eq(200)
  })

answered Mar 04 '21 at 22:38

Tom1425

119
7

Thank you! I tried this but it's giving me an error! – user15332324 Mar 04 '21 at 22:51
Get or Post and show me your code with cy.request, Which problem do you have, show logs. – Tom1425 Mar 04 '21 at 22:55
If by link the OP means an `` element, then perhaps you need to get the element, get its `href` attribute, and then call `cy.request` on the `href` element's value? – natn2323 Mar 05 '21 at 06:32
This is my code: cy.get("a").each($a => { const message = $a.text() expect($a, message).to.have.attr("href").not.contain("undefined") }) cy.request("a[href]").should(response => { expect(response.status).to.eq(200) }). – user15332324 Mar 05 '21 at 14:07
1

It looks like it shows me the undefined links, but we can have broken links for so many reasons so I need to get the links and make sure they each work and return a successful message (200). This test is for all the inks available on the website and not just one and I am just showing the last part of my code. I need the test to crawl on the website and find the broken links. Thanks – user15332324 Mar 05 '21 at 14:09

score 0 · Answer 2 · answered Sep 09 '21 at 03:00

Try this...

for the first a selection a[href*="yourdomain.com"] the reason I didn't include "www" is because for my project we link to subdomains as well so I needed to include these.

for the second half, :not([href=""], again for my project we had links like this for some reason so I had to make sure to NOT include it.

$el.prop("href") fetches the href value from the DOM element.

I'm using cy.request() to send a HTTP request to the URL and make sure that it returns 200 thus proving that the page exists.

Here's the code:

cy.get('a[href*="yourdomain.com"]:not([href=""])').each(($el) => {
  cy.request($el.prop("href")).as("link");
});

cy.get("@link").should((response) => {
  expect(response.status).to.eq(200);
});

You can use this for any page. You can have your pages listed out in your cypress.json file or you can do it programatically as a regression test.

score 0 · Answer 3 · answered Oct 01 '21 at 09:33

Here's the simplest way to do it:

 cy.request("yourLink")

Yes, no need to add any assertions. because by default there's an assertion that the response is not 404. so this line is more than enough.

If you want to go the extra mile and test all the links in the page, here's what to do:

 cy.get('a').each(link => {
    cy.request(link.prop('href'))
  })

score 0 · Answer 4 · answered Jul 06 '22 at 12:59

0

This should make a request to all the available links with a tag in the page.

  cy.visit(link)
   cy.get('a').each(page => {
   cy.request(page.prop('href'))
})

answered Jul 06 '22 at 12:59

Mohamed Sajjadh

139
2
11

How to find broken links in a website using Cypress?

4 Answers4