Cypress Aliases Intercepted Routes

So in cypress, there is a method to intercept URL routes.
It is a way to stub and spy on what is happening in that route and gets a custom fake response based on your stub.

A stub is nothing but a fake response we will plant in the place of the event unfolding.

Why use fake responses?

Say we have a website with two buttons and each button goes to different pages.
And there is no API to test which is not been created yet.
So there will be no response as it is not created.
Intercept plays a major role to intercept the URL and get the response of the button based upon the stub we placed.
We can use this fake response and use that particular JSON data to do tests afterward.

Once the actual API is created we can replace this fake stubbed response with the actual one and move on normally.
This is called mocking, stub, and also called spying the request.

So we can also alias the intercept and use the interception stub elsewhere just like any other aliasing.

Syntax for alias:

.as('anyname')
cy.wait('@anyname')

Syntax for intercept:

cy.intercept({
path: 
url: 
})

Example:

describe('Intercepting Gorestapi',()=>{
    it('Visiting Gorestapi',()=>{
        cy.visit('https://gorest.co.in/')
        
    })
    it('Intercepting Route of users',()=>{
        cy.intercept({path : '/public/v1/users' }).as('aPIntercept')
        cy.get("table:nth-of-type(1) a[href = 'https://gorest.co.in/public/v1/users']").click()
        cy.wait('@aPIntercept').then(interception => {
            cy.log(JSON.stringify(interception))
            console.log(JSON.stringify(interception))
        })
    })
})

So in this example, we are using the rest API site called gorest.
Here on the main page, there is a button when clicked we can view the users.
Assume for a moment that there is no API here and we wanna intercept and get the response in another way.
Intercept comes into play here.
First, we will use the cy.intercept to get the path of the button in other words the endpoints here in this case /public/v1/users will take me to the user's page where there will be a list of users.
Now we are aliasing that interception and storing it in aPIntercept.
Now we wanna click that button that will take us to that page so that then it'll start to intercept the route and fetch the response.
So after clicking we are taking the alias and asking it to wait until the page loads and we are using the then command to create an object interception piping the response.
After the response pipes down we are getting it printed in cy.log and the console.

Output:

Here you can see the stubbed response on the cy log as we asked to print.

Here is the console log.

Now there are many ways we can intercept this is one of the ways, a simple way that we can get the response stubbed.