How to find Broken Links using Cypress

Any web covering contains HTML Elements, JavaScript, CSS, etc behind the screen. Generally, the website include the field, buttons, carte items, links, etc. The webpage control multiple pages, and these pages are linked using the HTML link or & lt; a & gt; ticket. For illustration, If you navigate to the BrowserStack home page, you will see menu items, such as SignIn, Product, Pricing, etc. These are menus internally linked to their respective pages to make a smooth user experience.

The links are the almost crucial portion as they provide piloting across the website. The broken link determine the user ’ s access to specific web pages. The web coating contains century of tie on each page, and manually testing every link is difficult.

This article will give an overview on how to identify and care broken links expend Cypress.

What are Broken Links?

A humbled connection is a web page that can not be establish or access by the user. The broken links are too ring Dead links. The web servers often return error message or mistake codes for humiliated links.

This normally pass because the website or particular web page is down or does not be. When mortal snap on a broken link, an mistake message is displayed.

Reason for Broken Links

• Incorrect URLs
• Webpage is down
• Links to contented are not available (move or deleted)
• Firewall or Geolocation restrictions
• Broken Elements within the HTML page (Javascript, CSS, or any plugins)

HTTP Error Codes

• Success Error codes: 200-299
• Client error responses& # 8211; 400–499
• Server error answer: 500–599

If the URL is giving any code between 400 to 599 (client or server) can be considered as a humbled link.

How to find the Broken Links using Cypress?

is the most effective test automation tool that can be used for testing broken link scenario. Once you write the Cypress exam, the mechanization tryout can be run on a scheduled foundation to check the low links.

There are two method to regain the broken links in Cypress

• Find all broken links on the webpage
• Find the broken links from the set of URLs

Find Broken Links in the Webpage using Cypress

Let & # 8217; s consider a scenario, you have a web page and you desire to find all the crushed links on that page. This scenario can be automated using Cypress.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Steps to Find all broken links on a Webpage

1. Navigate to webpage
2. Get all the available links (URL) for that webpage
3. Send the HTTP request to the URLs
4. Verify it & # 8217; s throwing any fault

You can compose the Cypress automation script to execute the above steps, and you can find all the broken nexus on the webpage.

Cypress Test to Find the Broken Link

//broken-link.cy.js describe ('Broken Link ', () = & gt; {beforeEach (() = & gt; {cy.viewport (1280, 1000)}) it ('Find all broken links ', () = & gt; {cy.visit ('https: //www.tic.com/ ') cy.get (' a ') .each (relate = & gt; {if (link.prop ('href ')) cy.request ({url: link.prop ('href '), failOnStatusCode: mistaken}) cy.log (link.prop ('href '))})})})

Let & # 8217; s understand the above code,

cy.visit ():Navigating to the webpage

cy.get (& # 8216; a & # 8217;, {failOnStatusCode: false}):Using cy.get (& # 8216; a & # 8217;) we are fascinate an element which is having tag & lt; a & gt;. The & lt; a & gt; tag moderate urls.

The .each()command to used to iterate over the each tie

cy.request ()is used for requesting each URL

The failOnStatusCode: false:option is employ while requesting the URL. Cypress fails the examination by nonremittal if any request revert the 4XX HTTP codes. Since our use-case is to find all the broken links by iterating over them one by one we don & # 8217; t need the test case to fail.

When you fulfill the above trial, you can see the output as shown below.

You can see that in the above effect the URLs regress with status code 4XX are tag with a red band which intend that those URLs are not ground or broken.

Testing Broken Links in Cypress with a List of URLs

Consider another scenario where you get a set of tie-in ready or stored in the file, you need to insure often. This can be done using Cypress.

List of links store in links.json file

[{'' url '': `` https: //gooogle.com ''}, {'' url '': `` https: //gooogle.co.in ''}, {'' url '': `` https: //yahoo.com ''}, {'' url '': `` https: //browserstack.com/notfound ''}]

Cypress code to test the links

//broken-link1.cy.js describe ('Broken link ', () = & gt; {it ('should verify links ', () = & gt; {cy.fixture ('links ') .then ((data) = & gt; {for (var index in data) {cy.log (data [index] .url) cy.request ({url: data [indicator] .url, failOnStatusCode: false})}})})})

Let & # 8217; s understand the above code:

cy.fixture (& # 8216; links & # 8217;):The Cypress fixture provide functionality to read the datum from the .json file.

for (var index in data):Using the for each iteration iterate over all the links in .json file

cy.request:Use the cy.request () bid to request the URL

Execution output of Cypress test

In the above effect, we can see that the URL https: //browserstack.com/notfound has returned the condition codification 400 which is the URL is invalid or broken.

Cypress validates the crushed links faster compared to any other tryout framework. The cy.request () command doesn & # 8217; t perform page loading; rather it merely sends the HTTP request to the specified URL and have the reply. Since there is no motivation to furnish all the Visual elements, the cy.request () is quicker. This method helps to find the thousands of URL act states either working or broken.

Closing Notes

As mentioned before the link may not be reachable due to assorted reasons, such as the page being moved, deleted, or geographic restrictions. One of the near difficult scenarios to chance the low link is testing the low link due to its geographical restrictions.

• Using BrowserStack, makes it leisurely to detect the broken link without any geographic restrictions.
• Teams can still to get faster results without compromising on truth.
• Detect bug before exploiter do by screen software in with BrowserStack.

Related Guides