javascript - 如何使用 nightwatch.js 检查整页是否有损坏的图像？

Question

嘿，我正在尝试编写一个测试，使用一个测试来检查是否所有图像都已加载到页面上。

我认为这将是一个简单的测试，很多人都做过，但我找不到任何可以帮助我实现它的东西。

我试过使用下面的代码，但仍然不知道如何遍历每个图像并检查它是否已加载

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

如果有人能为我指出正确的方向，那就太棒了。我还需要编写一个测试来检查所有链接，但这个更重要

Answer 1

是的，您的思考过程是正确的。 提取页面图像> 遍历它们> 提取 HREF(或其他相关标签)> 检查 HREF 结构> 检查 HREF 状态代码 .这应该让您在超过 95% 的时间里保持安全(考虑到所有相关的断言和检查都已经完成)。

您可以按照以下方式尝试一些事情(内嵌评论):

// 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 状态代码。我可以粘贴我使用的那个，也许它会有所帮助:

/** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * 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 调用可能会失败。