使用cy.intercept拦截图片请求超时，求解决方法

你遇到的cy.wait('@image')超时问题，通常由URL匹配不精确、浏览器缓存、图片懒加载这几个原因导致，以下是针对性的解决方案：

1. 改用正则匹配URL（最常见原因） #

页面实际加载的图片URL可能带有额外参数（如版本号、尺寸参数），或者路径有细微调整，精确匹配完整URL会导致拦截失败。改用正则匹配URL的核心部分即可：

it('matches the base image', () => {
  // 匹配包含目标图片文件名的所有BBC图片请求
  cy.intercept(
    'GET',
    /ichef\.bbci\.co.uk.*_129792834_gettyimages-1256077146\.jpg/
  ).as('image');

  cy.visit('https://www.bbc.co.uk/news/election/2023/england/results');
  cy.wait('@image');
});

2. 清除浏览器缓存 #

如果浏览器已缓存该图片，页面加载时不会发起新的GET请求，导致intercept无法捕获。添加缓存清除操作：

it('matches the base image', () => {
  cy.intercept(
    'GET',
    /ichef\.bbci\.co.uk.*_129792834_gettyimages-1256077146\.jpg/
  ).as('image');

  // 清除Cookie和本地存储，强制浏览器重新请求资源
  cy.clearCookies();
  cy.clearLocalStorage();

  cy.visit('https://www.bbc.co.uk/news/election/2023/england/results');
  cy.wait('@image');
});

如果页面使用Service Worker缓存，还需要额外注销Service Worker：

cy.visit('https://www.bbc.co.uk/news/election/2023/england/results', {
  onBeforeLoad(win) {
    if (win.navigator?.serviceWorker) {
      win.navigator.serviceWorker.getRegistrations().then(regs => {
        regs.forEach(reg => reg.unregister());
      });
    }
  }
});

3. 处理图片懒加载 #

如果图片是懒加载模式（仅当进入视口时才发起请求），cy.visit后直接cy.wait会超时，需要先滚动到图片位置触发加载：

it('matches the base image', () => {
  cy.intercept(
    'GET',
    /ichef\.bbci\.co.uk.*_129792834_gettyimages-1256077146\.jpg/
  ).as('image');

  cy.visit('https://www.bbc.co.uk/news/election/2023/england/results');
  
  // 滚动到目标图片所在位置，触发懒加载请求
  cy.get('img[src*="_129792834_gettyimages-1256077146.jpg"]').scrollIntoView();

  cy.wait('@image', { timeout: 10000 }); // 可选延长超时时间应对慢加载
});

排查步骤 #

如果以上方案仍未解决，打开Cypress的Network面板，查看页面加载时的图片请求：

• 确认实际请求的URL是否和你预期的一致
• 检查请求的方法是否为GET
• 查看请求是否被缓存（Status显示304或from disk cache）

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