API mocking in cypress intercept - api

Question

I am new to cypress.
Problem: I am not able to intercept url for API mocking, when there are multiple APIs are appearing in console-> network tab
Description: My requirement is as follows:
login a website, after getting the landing page,go to a particular webpage, select multiple test cases check boxes
open console-> network tab , and click run
watch multiple APIs are coming
I selected one API url among them. I want to mock this particular one.
'GET'method , url (say: https://externalAPIurl) are copied in the following code
//verify landing page is reached
cy.contains("this is landing page").should("exist");
//after login open testcase page
cy.visit(
"https://example.com/testcases"
);
//go to test suite tab test suite
cy.get("#testsuiteid")
.click();
//click test suite name
cy.contains("testsuitename").click();
// select all test cases
cy.get(".testcasecheckbox")
.click();
cy.intercept(
{
method: "GET",
url: "https://externalAPIurl",
},
{
headers: {
authorization:
"AABBXXYY",
},
},
{
statusCode: 200,
body: [
{
status: 200,
result: true,
combination: [
//same data...
],
},
],
}
);
cy.get("#run_button").click();
});
Where am I wrong?
I checked in postman, the URL, with Get method and Header-> Authorization key with proper Authorization key value (as collected from network console Headers) giving correct response, but the cy.intercept is throwing error
How to solve this?
Whenever in a website we click a button, multiple external API s are visible in console-> network. If I take any one of them -> check the URL, method, header and getting the same response in postman as in the network console, I should be able to mock the same request URL.
I tried the same when one single API is appearing in network console. It was fine. But when I select one among multiple the result is an error.
Please note: I have included the header authorization, may be the format is wrong. But if I give or do not give the authorization, the result is the same error.

Answer 1

If you want to intercept a 'GET' and stub the response with predefined data. I would first use dev tools network tab to capture the api response you want. Copy the response and save as a json file in your fixture folder (you can edit this file as you see fit to fake the data how you wish). From there you can do the following:
cy.fixture('apiResponse.json').as('fixture data')
.then( (data) =>{
const raw = JSON.stringify(data)
cy.request( {
method : 'GET',
url : 'api url here',
headers : {
authorization : 'AABBXXYY',
},
body : raw
})
.then( (response) => {
cy.log(response.body)
expect(`Response.status = ${response.status}`).to.eq('Response.status = 200')
})
})