测试案例中的赛普拉斯XHR API调用验证

问题描述

我正在探索是否可以使用cypress进行端到端测试？我是它的初学者。

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

赛普拉斯有一些XHR的server（）实例。

Cypress has some server() instance for XHR.

问题：
假设我正在测试登录页面，所以我可以编写用于查询元素的测试用例并进行验证。在此过程中，浏览器将进行一些API调用，是否可以编写测试用例来验证API已撤销的statusCode？什么是XHR API响应等？

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?

推荐答案

。使用赛普拉斯，您可以监视请求或模拟请求。
我写了一个简单的示例向您展示这两种方法：

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")
    })
})

间谍示例接收到原始XHR对象，因此您可以检查状态码等。
mock 示例向您展示如何模拟任何ajax请求。

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

这篇关于测试案例中的赛普拉斯XHR API调用验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！