[Cypress] Test XHR Failure Conditions with Cypress

测试XHR错误响应

最新推荐文章于 2025-05-28 01:02:06 发布

转载最新推荐文章于 2025-05-28 01:02:06 发布 · 124 阅读

本文介绍了一种使用测试工具模拟XHR调用失败的方法，通过设置500状态码来验证前端应用是否能正确处理错误，并展示了一个具体的测试案例。

Testing your application’s behavior when an XHR call results in an error can be difficult. The use of stubs for XHR calls makes it easy for us to setup failure scenarios and ensure that our front-end responds the way we expect. In this lesson, we’ll stub a 500 response for a form submission and verify that our application responds appropriately.

    it('should show an error message for a failed from subission', function () {
        const newTodo = "Test";
        cy.server();
        cy.route({
            method: 'POST',
            url: '/api/todos',
            status: 500,
            response: {}
        }).as('save');

        cy.seedAndVisit();

        cy.get('.new-todo')
            .type(newTodo)
            .type('{enter}');

        cy.wait('@save');

        cy.get('.todo-list li').should('have.length', 4);
        cy.get('.error').should('be.visible');
    });