检查图像是否有效并使用量角器加载答案

【问题标题】：Check if image is valid and loaded with Protractor检查图像是否有效并使用量角器加载
【发布时间】：2015-02-05 10:15:19
【问题描述】：

我正在使用 Protractor 编写测试（使用 Cucumber.js、Chai 和 Chai As Promised，尽管我认为这些细节并不重要）。我想编写一个测试来检查图像元素是否有效并已加载 - 即它具有src 属性并且在加载时没有出错。

在其他地方有一些nice-looking answers 是关于如何通过 DOM API 检查图像是否从浏览器中加载的问题。但是如何使用 Protractor 的 API 干净地执行此检查？

我希望我的测试看起来像：

this.Then(/^I should see the "([^"]*)" image$/, function (imageId, callback) {
    expect(
        element(by.id(imageId))
    ).to.eventually.satisfy(isImageOk).notify(callback);
});

但我不知道如何通过 Protractor API 实现isImageOk 函数。

【问题讨论】：

标签： selenium protractor

【解决方案1】：

您需要使用 Protractor 的 executeAsyncScript 函数在浏览器上下文中计算 JavaScript 表达式。

这是来自my answer to a similar question的代码：

it('should find all images', function () {
    browser.executeAsyncScript(function (callback) {
        var imgs = document.getElementsByTagName('img'),
            loaded = 0;
        for (var i = 0; i < imgs.length; i++) {
            if (imgs[i].naturalWidth > 0) {
                loaded = loaded + 1;
            };
        };
        callback(imgs.length - loaded);
     }).then(function (brokenImagesCount) {
        expect(brokenImagesCount).toBe(0);
    });
});

在浏览器中执行的函数返回未加载图像的数量。

【讨论】：

【解决方案2】：

只是上一个答案的更新版本 - 如果有损坏的图像，测试会失败，因为我们期望 0

it('should check if there are broken images', function () {
    browser.executeAsyncScript(function (callback: (arg0: number) => void) {
        const imgs = document.getElementsByTagName("img");
        let loaded = 0;
        for (let i = 0; i < imgs.length; i++) {
          if (imgs[i].naturalWidth > 0) {
            loaded = loaded + 1;
          }
        }
        callback(imgs.length - loaded);
      })
      .then(function (brokenImagesCount) {
        expect(brokenImagesCount).toBe(0);
      });
});

【讨论】：