量角器：给用户更具体的反馈？答案

【问题标题】：Protractor: More specific feedback to User?量角器：给用户更具体的反馈？
【发布时间】：2017-12-04 21:56:10
【问题描述】：

假设我有一页有 10 张图片，而第 3 和第 5 张没有加载。我该怎么说：

2/5 图片未加载。

或者"image2.jpeg"和image5.jpeg"没有加载。

browser.waitForAngularEnabled(false);

it('should find all images', function () {
  browser.get('https://popeyes.com/');
  var imagesBrokenCount = browser.executeScript(`
  var elms = document.querySelectorAll("img");
  return [].filter.call(elms, e => e.offsetHeight > 1 && e.naturalHeight <= 1).length;
  `);
browser.sleep(1000);
expect(imagesBrokenCount).toEqual(0);

});

【问题讨论】：

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

【解决方案1】：

我会在这里切换到 Protractor 特定的功能 - 使用 filter() 过滤掉损坏的图像，然后使用 map() 获取 src 值的数组，然后使用 Jasmine 的 fail() 以失败所需的错误信息：

it('should find all images', function () {
  browser.get('https://www.popeyes.com');
  var brokenImages = $$("img").filter(function (img) {
    return img.getAttribute("offsetHeight").then(function (offsetHeight) {
        return img.getAttribute("naturalHeight").then(function (naturalHeight) {
            return offsetHeight > 1 && naturalHeight <= 1;
        });
    });
});
brokenImages.count().then(function (countBrokenImages) {
    if (countBrokenImages > 0) {
      console.log(countBrokenImages + " images loaded successfully");              
        brokenImages.map(function (img) {
            return img.getAttribute("src");
        }).then(function (sources) {
          fail("Failed to load the following images: " + sources.join(","));              
        })
        }
    });
});

【讨论】：

感谢亚历克西！最好在量角器功能中运行。我还在熟悉语法。

【解决方案2】：

您可以简单地从损坏的图像中返回源，然后断言返回的数组为空：

browser.get('https://popeyes.com/');
var brokenImages = browser.executeScript(`
  return [].slice.call(document.querySelectorAll("img"))
    .filter(e => e.offsetHeight > 1 && e.naturalHeight < 1)
    .map(e => e.src);
`);
browser.sleep(1000);
expect(brokenImages).toBeEmptyArray();

【讨论】：