Question

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

在如何通过DOM API检查是否从浏览器中加载图像的问题的其他地方还有一些nice-looking answers。但是如何使用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功能。

Answer 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);
    });
});

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

Answer 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);
      });
});

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

2 个答案: