cypress XHR API call validation in test cases

Question

I am exploring if I can use cypress for end-to-end testing or not in angular? I am super beginner in it.

Cypress has some server() instance for XHR.

Question: Suppose I am testing the login page so I can write test cases for querying elements and do the validation. In this process the browser will be making some API call, will it possible to write test cases for validating what was the statusCode the API had retured? What was XHR API response etc?

Josef Biehler Josef Biehler · Accepted Answer · 2019-12-18T21:59:42

of course. With cypress you can spy the requests or mock them. I have written a quick example to show you both methods:

describe("test", () => {
    it("spy", () => {
        cy.server();
        cy.route("POST", /.*queries.*/).as("request")

        cy.visit("https://docs.cypress.io/")
            .get("#search-input").type("1234567890")
            .wait("@request").then(xhr => {
                expect(xhr.status).to.eq(200)
            })
    })

    it("mock", () => {
        cy.server();

        const obj = JSON.parse(`
        {
            "results": [{
                    "hits": [{
                            "hierarchy": {
                                "lvl2": null,
                                "lvl3": null,
                                "lvl0": "Podcasts",
                                "lvl1": null,
                                "lvl6": null,
                                "lvl4": null,
                                "lvl5": null
                            },
                            "url": "https://stackoverflow.com",
                            "content": "mocked",
                            "anchor": "sidebar",
                            "objectID": "238538711",
                            "_snippetResult": {
                                "content": {
                                    "value": "mocked",
                                    "matchLevel": "full"
                                }
                            },
                            "_highlightResult": {
                                "hierarchy": {
                                    "lvl0": {
                                        "value": "Podcasts",
                                        "matchLevel": "none",
                                        "matchedWords": []
                                    }
                                },
                                "content": {
                                    "value": "mocked",
                                    "matchLevel": "full",
                                    "fullyHighlighted": false,
                                    "matchedWords": ["testt"]
                                }
                            }
                        }
                    ]
                }
            ]
        }

        `);

        cy.route("POST", /.*queries.*/, obj)

        cy.visit("https://docs.cypress.io/")
            .get("#search-input").type("1234567890")
            .get("#algolia-autocomplete-listbox-0").should("contain", "mocked")
    })
})

The spy example receives the raw XHR object and thus you are able to check the status code and so on. The mock example shows you how you can mock any ajax request.

Please note: Currently you can not spy & mock fetch requests. But as far as I know they are rewriting the network layer in order to make this possible. Let me know if you need further assistance

cypress XHR API call validation in test cases

1 Answers