Nightwatch.js图片加载验证问题：无法获取图片宽高与加载日志

看起来你在Nightwatch里验证图片加载时遇到了回调不触发的情况——能拿到图片URL，但加载逻辑没跑起来，连"loaded..."都打不出来，这大概率是因为浏览器上下文和Node.js上下文混淆，或者图片加载的异步逻辑没处理好导致的。下面给你几个针对性的解决思路：

1. 确保在浏览器上下文中执行图片加载逻辑 #

Nightwatch的execute方法才是在浏览器环境里运行代码，如果你直接在Node端创建new Image()，那是在Node环境里跑，根本不会触发浏览器的图片加载事件，自然没输出。你得把图片加载的逻辑放到browser.execute()里面：

browser.url('你的目标页面URL')
  .execute(function() {
    // 这里是浏览器端的代码，所有操作都在浏览器里执行
    const images = document.querySelectorAll('img');
    images.forEach(img => {
      const imgUrl = img.src;
      const testImg = new Image();
      testImg.onload = function() {
        console.log(`loaded... 宽度: ${this.width}, 高度: ${this.height}`);
        if (this.width > 0) {
          console.log('!!!! 图片加载正常');
        }
      };
      testImg.onerror = function() {
        console.log(`图片加载失败: ${imgUrl}`);
      };
      testImg.src = imgUrl;
    });
  }, [], function(result) {
    console.log('done');
  });

注意：浏览器端的console.log不会直接显示在你的Node终端里，你需要打开Nightwatch的浏览器调试模式（启动时加--devtools参数），在浏览器自带的控制台里查看这些输出。

2. 处理懒加载图片的等待问题 #

如果页面图片是懒加载的，你遍历DOM的时候可能还没拿到真实的图片URL，或者图片还没开始加载。这时候得先等待图片元素完全加载完成，再去获取URL：

browser.url('你的目标页面URL')
  .waitForElementVisible('img', 10000) // 等待所有图片元素可见，超时10秒
  .execute(function() {
    const images = Array.from(document.querySelectorAll('img'));
    return images.map(img => img.src);
  }, [], function(result) {
    const imgUrls = result.value;
    // 再把拿到的URL传到浏览器端逐个验证加载
    browser.execute(function(urls) {
      urls.forEach(url => {
        const testImg = new Image();
        testImg.onload = () => {
          console.log(`loaded... 宽度: ${testImg.width}, 高度: ${testImg.height}`);
          if (testImg.width > 0) console.log('!!!!');
        };
        testImg.onerror = () => console.log(`加载失败: ${url}`);
        testImg.src = url;
      });
    }, [imgUrls], function() {
      console.log('done');
    });
  });

3. 改用Nightwatch自带的元素属性验证（更简单） #

其实你不需要额外创建图片对象，直接检查页面上已加载图片的naturalWidth或naturalHeight属性就行——浏览器加载成功的图片，这两个属性会大于0：

browser.url('你的目标页面URL')
  .waitForElementVisible('img', 10000)
  .elements('css selector', 'img', function(result) {
    result.value.forEach((imgElement, index) => {
      browser.elementIdProperty(imgElement.ELEMENT, 'naturalWidth', function(widthResult) {
        const width = parseInt(widthResult.value, 10);
        console.log(`第${index+1}张图片宽度: ${width}`);
        if (width > 0) {
          console.log('!!!! 图片加载正常');
        } else {
          console.log('图片加载失败');
        }
      });
    });
    console.log('done');
  });

这种方法更贴合Nightwatch的自动化逻辑，不需要处理跨上下文的异步问题，而且终端里就能直接看到输出。

为什么你的脚本没输出？ #

大概率是这两个原因：

• 你把图片加载逻辑写在了Node.js上下文（不是execute方法内部），Node环境里的Image对象没有浏览器的加载事件，所以onload永远不会触发。
• 浏览器端的console.log没被你注意到，你以为代码没执行，其实输出在浏览器控制台里了。

试试上面的方法，应该就能看到你想要的输出了！

内容的提问来源于stack exchange，提问作者Ian Klinck