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

Question

假设我的一页有 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);

});

Answer 1

我会在这里切换到 Protractor 特定的功能 - 使用 filter() to filter out the broken images, then, using 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(","));              
        })
        }
    });
});

Answer 2

您可以简单地 return 来自损坏图像的来源，然后断言 returned 数组为空：

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();

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

Protractor: More specific feedback to User?

end-to-end

jasmine

angularjs

selenium-webdriver

protractor