邮递员 - 如何检查图片大小

Question

我正在尝试在 Postman 中编写一些测试（我正在运行 Postman Jetpacks 打包应用程序，如果它确实重要的话）并且我正面临一些不一致。

我的测试范围是根据一些预定义的值来验证一组图像的大小（宽度和高度）。

场景是这样的：我调用一个返回一些 url 的方法，然后将这些 URL 设置为环境变量，然后验证每张图片的大小。下面是我在 Postman 的“测试”选项卡中使用的代码。

tests["Status code is 200"] = responseCode.code === 200;

var data = JSON.parse(responseBody);

//test that response contains the expected attributes
tests["splash_image_url present"] = data.hasOwnProperty("splash_image_url");
tests["home_image_url present"] = data.hasOwnProperty("home_image_url");
tests["login_image_url present"] = data.hasOwnProperty("login_image_url");
tests["register_image_url present"] = data.hasOwnProperty("register_image_url");
tests["splash_logo_url present"] = data.hasOwnProperty("splash_logo_url");
tests["bar_logo_url present"] = data.hasOwnProperty("bar_logo_url");

//set each image URL as environment variable
postman.setEnvironmentVariable("splash_image_url", data.splash_image_url);
postman.setEnvironmentVariable("home_image_url", data.home_image_url);
postman.setEnvironmentVariable("login_image_url", data.login_image_url);
postman.setEnvironmentVariable("register_image_url", data.register_image_url);
postman.setEnvironmentVariable("splash_logo_url", data.splash_logo_url);
postman.setEnvironmentVariable("bar_logo_url", data.bar_logo_url);


//extract images from each URL
var splash_image_url = document.createElement("img");
splash_image_url.src = environment.splash_image_url;
var home_image_url = document.createElement("img");
home_image_url.src = environment.home_image_url;
var login_image_url = document.createElement("img");
login_image_url.src = environment.login_image_url;
var register_image_url = document.createElement("img");
register_image_url.src = environment.register_image_url;
var splash_logo_url = document.createElement("img");
splash_logo_url.src = environment.splash_logo_url;
var bar_logo_url = document.createElement("img");
bar_logo_url.src = environment.bar_logo_url;

//test the size for each picture 
tests["splash_image_url width"] = splash_image_url.width === 640;
tests["splash_image_url height"] = splash_image_url.height === 960;

tests["home_image_url width"] = home_image_url.width === 640;
tests["home_image_url height"] = home_image_url.height === 960;

tests["login_image_url width"] = login_image_url.width === 640;
tests["login_image_url height"] = login_image_url.height === 960;

tests["register_image_url width"] = register_image_url.width === 640;
tests["register_image_url height"] = register_image_url.height === 960;

tests["splash_logo_url width"] = splash_logo_url.width === 310;
tests["splash_logo_url height"] = splash_logo_url.height === 80;

tests["bar_logo_url width"] = bar_logo_url.width === 155;
tests["bar_logo_url height"] = bar_logo_url.height === 40;

问题是有时在运行请求时所有或部分图片大小验证失败。如果我继续一次又一次地手动运行相同的请求，它最终会显示所有通过的测试。这种不一致使测试不可靠。

我错过了什么或做错了什么？有没有办法验证图片大小？

谢谢

Answer 1

非常好的问题，是一个有趣的挑战。谢谢！

1。你的问题

这些测试在您手动运行几次后才真正起作用，因为图像此时已缓存。

这里的主要问题是，您没有等待图像实际加载，然后检查与它们关联的属性。

2。邮递员测试结果

我通过等待图像实际加载并发现...我的测试实际上并没有显示为通过或失败。

这主要是由于测试运行的方式。 Postman 在请求的上下文中使用eval（或多或少）。

在 Evaluator.js @ 111

if (command === "runcode") {
    try {
        var result = eval(code);
        event.source.postMessage({'type': 'test_result', 'result': result, 'scriptType': scriptType}, event.origin);
    }
    catch(e) {
        console.log(e);
        event.source.postMessage({'type': 'test_error', 'errorMessage': e.message, 'scriptType': scriptType}, event.origin);
    }

}

不幸的是，任何类型的回调逻辑都不会被追溯推回到结果链中。

2.1 Postman 二次测试结果

似乎将一组新结果发布到event.source 不会触发一组新结果，而是会被完全丢弃。

我已经设法找到解决方法。只需以以下方式结束脚本：

function postmanJetpacksSupportsOnlyOneResultPerTest()
{
    event.source.postMessage({'type': 'test_result', 'result': tests, 'scriptType': 'test'}, event.origin);
}

throw 'ignore this. Enforcing failure on this test case, real values will come  by manually calling *postmanJetpacksSupportsOnlyOneResultPerTest* when you are done with the test case.';

然后，当您的所有回调完成后，只需调用 postmanJetpacksSupportsOnlyOneResultPerTest。

3。邮递员开发人员

我真的希望你能以某种方式包含承诺的概念。示例：

在测试运行器中：

var defered = new jQuery.Deferred();
tests['before timeout'] = true;
setTimeout(function() {
    tests['on timeout'] = true;
    defered.resolve(tests);
}, 500);
tests['after timeout'] = true;
return defered.promise();

在 Evaluator.js @ 113：

var result = eval(code);
if (result.promise instanceof Function) {
    result.then(function(result) {
       event.source.postMessage({'type': 'test_result', 'result': result, 'scriptType': scriptType}, event.origin);
    });
} else {
    event.source.postMessage({'type': 'test_result', 'result': result, 'scriptType': scriptType}, event.origin);
}

4。一个例子

// handlers
var waiting = 0;
function errorHandler() {
    waiting--;
    tests[this.image.name + ' load'] = false;

}
function successHandler() {
    waiting--;
    tests[this.image.name + ' load'] = true;
    tests[this.image.name + ' width'] = this.image.width == this.width;
    tests[this.image.name + ' height'] = this.image.height == this.height;
}

// test case kind of
function createImageTest(name, url, width, height)
{
    // create image tag
    var image = document.createElement('img');
    // set the name
    image.name = name;
    // set error handlers
    image.onerror = errorHandler.bind({
        image: image
    });
    image.onload = successHandler.bind({
        image: image,
        width: width,
        height: height
    });
    // finally attach the src
    image.src = url;
    // waiting on either a fail or a load
    waiting++;
}

// the actual test cases
createImageTest('stackexchange logo', 'http://cdn.sstatic.net/stackexchange/img/se-logo.png', 223, 52);
createImageTest('stackoverflow logo', 'http://cdn.sstatic.net/stackoverflow/img/sprites.png', 240, 500);

// wait for all callbacks finished
(function checkFinished(){
    // still images to process
    if (waiting) {
        // check back in another 0.1 seconds
        return setTimeout(checkFinished, 100);
    }

    // ready to send result
    postmanJetpacksSupportsOnlyOneResultPerTest();
})();

// the hack from #2.1
function postmanJetpacksSupportsOnlyOneResultPerTest()
{
    event.source.postMessage({'type': 'test_result', 'result': tests, 'scriptType': 'test'}, event.origin);
}

throw 'ignore this. Enforcing failure on this test case, real values will come from init...';