如何在Cypress中验证背景图片可用且预览时正常加载？

一、测试背景图片是否可用 #

要验证页面元素的背景图片能否正常访问，可通过提取图片URL并发起请求的方式实现：

cy.get('.target-element') // 替换为你的目标元素选择器
  .invoke('css', 'background-image')
  .then(backgroundImage => {
    // 从background-image属性中提取真实图片URL，去除url()包裹和引号
    const imgUrl = backgroundImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
    // 请求图片资源，断言状态码为200表示可用
    cy.request(imgUrl).its('status').should('eq', 200);
  });

注意：如果背景图是相对路径，Cypress会自动基于当前测试域名拼接成完整URL；若涉及跨域图片，需在cypress.config.js中配置跨域相关权限（如experimentalSessionAndOrigin: true）。

二、测试预览界面图片正常加载 #

针对预览界面中的图片，可通过以下两种方式验证是否加载完成：

方法1：利用图片的naturalWidth属性 #

图片加载成功后，naturalWidth属性会返回实际宽度（大于0），以此作为判断依据：

cy.get('.preview-image') // 替换为预览图的元素选择器
  .should(($img) => {
    expect($img[0].naturalWidth).to.be.greaterThan(0);
  });

方法2：监听图片的load事件 #

直接监听图片的加载事件，确保图片完全加载完成：

cy.get('.preview-image')
  .then(($img) => {
    return new Cypress.Promise((resolve) => {
      $img.on('load', resolve);
      // 若图片已提前加载完成，直接触发resolve
      if ($img[0].complete) resolve();
    });
  });

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