7

I am writing tests using Protractor (with Cucumber.js, Chai and Chai As Promised, though I think these details don't matter). I would like to write a test that checks whether an image element is valid and loaded - i.e. that it has a src attribute and has not errored out while loading.

There are some nice-looking answers elsewhere to the question of how to check if an image is loaded from within a browser, via the DOM API. But how can I cleanly perform this check using Protractor's API?

I expect my test will look something like:

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

but I don't know how to implement the isImageOk function via the Protractor API.

Community
  • 1
  • 1
Mark Amery
  • 143,130
  • 81
  • 406
  • 459

2 Answers2

9

You need to evaluate a JavaScript expression in the context of the browser, using Protractor's executeAsyncScript function.

Here is the code from 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);
    });
});

The function executed within the browser returns the number of non-loaded images.

Community
  • 1
  • 1
avandeursen
  • 8,458
  • 3
  • 41
  • 51
0

Just an updated version of the previous answer - test is made to fail if there are broken images, because we expect 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);
      });
});
Marshmallo
  • 11
  • 3