量角器：通过视觉回归或响应代码检测图像负载答案

【问题标题】：Protractor: Detect Image Load through Visual Regression or Response Code量角器：通过视觉回归或响应代码检测图像负载
【发布时间】：2017-12-01 18:51:10
【问题描述】：

我无法让 Protractor 检查图片链接是否损坏。

我做了一个本地html站点，没有放正确的路径。

我正在尝试使用状态码，并且已将 xpath 硬编码为损坏的图像。

browser.waitForAngularEnabled(false);

it('should find all images', function () {
  browser.get('file:///C:/Users/sdasgupta/Documents/PROTRACTOR_E2E_TESTING/TestSite.html');
  var request = require('request');
  var assert = require('assert');
  element.all(by.tagName('a')).then(function(link) {
     var url = element(by.xpath('/html/body/h1/p/img'));
     if(url) {
         request(url, function (error, response, body) {
             assert.equal(response.statusCode, 200, 'Status code is not OK');
         });
      }
  });
});

有没有更快的方法来做到这一点？我的命令行给了我这个错误：

特别是这些行：

 Message:
    Failed: Cannot read property 'statusCode' of undefined
  Stack:
    TypeError: Cannot read property 'statusCode' of undefined
        at Request._callback (C:\Users\sdasgupta\protractor_Image\spec.js:11:36)
        at self.callback (C:\Users\sdasgupta\node_modules\request\request.js:186:22)

注意：我最终需要一个检查所有超链接的测试。

【问题讨论】：

标签： angularjs selenium-webdriver protractor end-to-end

【解决方案1】：

要验证图像没有损坏，您可以评估naturalHeight 属性：

var imagesBrokenCount = browser.executeScript(`
  var elms = document.querySelectorAll("img");
  return [].filter.call(elms, e => e.offsetHeight > 1 && e.naturalHeight <= 1).length;
  `);

expect(imagesBrokenCount).toEqual(0);

【讨论】：

我一般会测试元素的.naturalWidth，并确保它不为零。我假设宽度和高度是等价的，但是.offsetHeight 让你知道.naturalHeight 本身不是什么？（我是出于无知而问）。
@JeffC, e => e.offsetHeight > 1 过滤显示的图像并排除隐藏的图像。具有display:none 样式的图像将具有正值naturalWidth，但offsetHeight 等于0。
非常感谢@FlorentB。！很棒的工作！我将打开有关如何检测所有 URL 的票，但非常感谢。