在端到端测试中捕获服务器 JSON 响应 [英] Capture server JSON response in end-to-end test

问题描述

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

I'm writing an end-to-end test that simulates user authentication with Protractor. A user feels in her credentials and clicks a Submit button. As a result, the server returns an access token in a JSON response that can be used for other REST API calls. I'd like to save this token to a file.

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

There's a similar question on capturing a response of a GET request here, but I'm not sure it's a good idea to send another request after I click the button.

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

How can I capture the response after a button click?

推荐答案

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

Here is my idea about how to catch HTTP responses. Protractor provides a method browser.addMockModule() (docs) - it is used to add custom Angular modules to a page, which are usually used to mock outcoming requests and provide custom response. But we do not need to mock requests, it would be enough to just listen for whatever comes from a server. It can be achieved with the help of Angular HTTP interceptors. Interceptors are used to catch a request or a response and modify it for whatever needs before in gets to it's endpoint. We can use them to collect information about what is coming from the server, store it, and then let response go forward without changes. Since this custom module and spec tests will run on the same page, information about responses can be stored in some global property. Then, when button is clicked, it would be possible to inject custom script to a page to retrieve required responses via browser.executeScript() (docs). Here is the source:

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');
});

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

You can move setup and injection calls to some utility modules, so test specs would be clean.

这篇关于在端到端测试中捕获服务器 JSON 响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！