How To Check Full Page For Broken Images Using Nightwatch.js?

Hey I'm trying to write a test to check if all images have loaded on the page using one test. I thought this would be a simple test that loads of people have done but I can't find

Solution 1:

Yes, your thought process was correct. Extract page images > loop through them > extract HREF (or other relevant tags) > check HREF structure > check HREF Status Code. This should keep you covered for more than 95% of the time (considering all the relevant assertions & checks have been made).

You can try something along these lines (comments inline):

// Scrape all the 'img' tags from the current page:
browser.elements('css selector', 'img', (result) => {
    // Loop through the images found:
    result.value.forEach((image, imageIndex) => {
        // Extract & check the link ('href' attribute):
        browser.elementIdAttribute(image.ELEMENT, 'href', function(imgRes) {
            console.info(`\n> Checking link: ${imgRes.value}`);
            href = imgRes.value;
            // Check the HREF returns 200 Status Code:
            browser.assertHttpResponse(href, 'image/png');
            // > do your link asserts/checks here <
        });
    });
});

You will have to create a custom_command to check the HTTP Status Code of the respective image. I can paste the one I use, maybe it will be of aid:

/** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Description: Asserts the response (status code & MIME type) of a HTTP request 
 *              for the resource residing at the given URL.
 * !Note: Accepted status codes: 200, 301, or 302.
 * @param {string} url
 * @param {string} mimeType [optional]
 * @returns {{Nightwatch} this}
 ** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */const assert = require('chai').assert;
const request = require('superagent');

exports.command = function (url, mimeType=undefined) {
  this.perform((done) => {

    let allowedHttpCodes = [200, 301, 302];
    // !Note: HTTP responses may vary based on ENV:
    (url.includes('staging')) ? allowedHttpCodes.push(400, 401, 405) : allowedHttpCodes.push(405);

    // Wait for the page to load:this.waitForReadyState('interactive', 1);

    // Issue a HTTP request for the given URL:console.info(`\n> Launching a HTTP request for: '${url}' (allowed HTTP codes: '${allowedHttpCodes}')\n`);
    request.head(`${url}`)
      .end((err, res) => {
        // Assert the response STATUS CODE (based on env):console.info(`\n> Found MIME type: '${res.type}'\n`);
        assert.include(allowedHttpCodes, res.statusCode, `Asserting StatusCode found: '${res.statusCode}' | Expected: ${allowedHttpCodes}`);
        // If present, assert the response MIME type:if (mimeType & res.type) {
          assert.isOk([mimeType, 'text/html'].includes(res.type), `Asserting MIME type found: '${res.type}' | MIME expected: ${mimeType}`);
        }
    });
    done();
  });
  returnthis;
};

!Note: Some img tags might be hidden, so some Nightwatch API calls might fail.