在端到端测试中捕获服务器 JSON 响应

Question

我正在编写一个端到端测试，它使用Protractor 模拟用户身份验证。用户感觉到她的凭据并单击提交按钮。因此，服务器会在 JSON 响应中返回一个访问令牌，该响应可用于其他 REST API 调用。我想将此令牌保存到文件中。

关于捕获 GET 请求的响应 here 有一个类似的问题，但我不确定在单击按钮后发送另一个请求是否是个好主意。

如何捕获按钮单击后的响应？

Answer 1

这是我关于如何捕获 HTTP 响应的想法。 Protractor 提供了一个方法 browser.addMockModule() (docs) - 用于向页面添加自定义 Angular 模块，这些模块通常用于模拟输出请求并提供自定义回复。但是我们不需要模拟请求，只需监听来自服务器的任何内容就足够了。它可以在 Angular HTTP interceptors 的帮助下实现。 拦截器用于捕获请求或响应，并在到达其端点之前根据需要对其进行修改。我们可以使用它们来收集来自服务器的信息，存储它，然后让响应继续进行而不做任何更改。由于此自定义模块和规范测试将在同一页面上运行，因此有关响应的信息可以存储在一些全局属性中。然后，当单击按钮时，可以将自定义脚本注入页面以通过browser.executeScript() (docs) 检索所需的响应。以下是出处：

it('should intercept requests', function () {

    // Inject custom Angular module on a page
    // Script should be injected before you "browser.get()" the page
    browser.addMockModule('e2eHttp', function () {
        // Note: This function scope is not a Protractor environment

        angular
        .module('e2eHttp', [])
        .config(function ($httpProvider) {
            // add custom interceptor to all requests
            $httpProvider.interceptors.push('e2eHttpInterceptor');
        })
        .factory('e2eHttpInterceptor', function () {
            return {
                response: function (response) {
                    // name of the global property to store responses
                    var global = 'e2eHttpResponses';
                    // responses will be grouped by url
                    // but you can use data from "response.config" to adapt it
                    // it has a lot of info about response headers, method, etc
                    var url = response.config.url;

                    window[global] = window[global] || {};
                    window[global][url] = window[global][url] || [];
                    window[global][url].push(response); // store response

                    // proceed without changing response
                    return response;
                }
            };
        });
    });

    // Load the page
    browser.get('#/auth/login');

    $('#submit').click();

    // If we are sure that response has come, then extract it

    browser.executeScript(function () {
        // Note: This function scope is not a Protractor environment

        var global = 'e2eHttpResponses';
        var uri = 'api/auth/login.json';

        // extract array of stored responses for required uri
        var responses = (window[global] && window[global][uri]) || [];

        // return responses to spec
        return responses;

    }).then(function (responses) {
        // and finally, we are now able to get all information we need
        // about response, and in your case, save it to a file

        console.log(responses);

        var data = responses[0].data; // first response body as a string
    });


    // remove injected module not to break another specs
    browser.removeMockModule('e2eHttp');
});

您可以将设置和注入调用移至某些实用程序模块，因此测试规范将是干净的。