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 anything that helps me achieve it.

I've tried using the code below but still can't figure how to loop through each image and check to see if it has loaded

browser.elements('css selector', 'img', function (result) {}

if anyone could point me in the right direction that would be amazing. I need to write a test to check all links as well but this one is more important

回答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();
  });
  return this;
};

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

来源：https://stackoverflow.com/questions/58490607/how-to-check-full-page-for-broken-images-using-nightwatch-js

标签

javascript

node.js

testing

automation

nightwatch.js