Verify the image is correct and upload it using Protractor

Question

I write tests using Protractor (with Cucumber.js, Chai and Chai As Promised, although I think these details are irrelevant). I would like to write a test that checks if an image element is valid and loaded, i.e. It has the src attribute and has no loading errors.

There are some nice answers elsewhere to the question of how to check if an image is loaded from a browser through the DOM API. But how can I do this check using the Protractor API?

I expect my test to look something like this:

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

but I do not know how to implement the isImageOk function through the Protractor API.

Answer 1

You need to evaluate the JavaScript expression in the browser context using the Protractor 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 in the browser returns the number of unloaded images.