Protractor: Detect Image Load through Visual Regression or Response Code

Question

I can't get Protractor to check if a image link is broken or not.

I made a local html site and didn't put the right path.

I am trying to use status code and I've hard-coded the xpath to the broken image.

browser.waitForAngularEnabled(false);

it('should find all images', function () {
  browser.get('file:///C:/Users/sdasgupta/Documents/PROTRACTOR_E2E_TESTING/TestSite.html');
  var request = require('request');
  var assert = require('assert');
  element.all(by.tagName('a')).then(function(link) {
     var url = element(by.xpath('/html/body/h1/p/img'));
     if(url) {
         request(url, function (error, response, body) {
             assert.equal(response.statusCode, 200, 'Status code is not OK');
         });
      }
  });
});

Is there a faster way to do this? My command line gives me this error:

Specifically these lines:

 Message:
    Failed: Cannot read property 'statusCode' of undefined
  Stack:
    TypeError: Cannot read property 'statusCode' of undefined
        at Request._callback (C:\Users\sdasgupta\protractor_Image\spec.js:11:36)
        at self.callback (C:\Users\sdasgupta\node_modules\request\request.js:186:22)

Note: I eventually need a test that checks ALL hyperlinks.

Answer 1

To verify that an image is not broken, you can evaluate the naturalHeight property:

var imagesBrokenCount = browser.executeScript(`
  var elms = document.querySelectorAll("img");
  return [].filter.call(elms, e => e.offsetHeight > 1 && e.naturalHeight <= 1).length;
  `);

expect(imagesBrokenCount).toEqual(0);