如何使用nightwatch.js检查整页是否有损坏的图像? [英] 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

推荐答案

是的，您的思考过程是正确的. 提取页面图像 > 循环浏览 > 提取HREF (或其他相关标签)> 检查HREF结构 > 检查HREF状态代码 .这应该使您的覆盖时间超过95％(考虑了所有相关断言并进行了检查).

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 <
        });
    });
});

您将必须创建一个custom_command来检查相应图像的HTTP状态代码.我可以粘贴一个，可能会有帮助:

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;
};

！注意::某些img标签可能被隐藏，因此某些Nightwatch API调用可能会失败.

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

这篇关于如何使用nightwatch.js检查整页是否有损坏的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！