如何在Cypress中使用已声明变量生成含图片名称的HTML文件

一、变量嵌入HTML的方法 #

在cy.writeFile中使用模板字符串（用反引号`包裹代码），就能直接将变量插入HTML结构里。比如你获取到单张图片名称后，可以这样写：

cy.writeFile('cypress/report/test.html', `<div>${assetName}</div>`);

如果是存储多个名称的数组，先把数组转成对应的HTML片段，再写入文件：

// 假设assetNames是存所有图片名称的数组
const htmlContent = `
  <html>
    <body>
      <h1>Shutterstock图片名称列表</h1>
      <ul>
        ${assetNames.map(name => `<li>${name}</li>`).join('')}
      </ul>
    </body>
  </html>
`;
cy.writeFile('cypress/report/test.html', htmlContent);

二、批量抓取并生成HTML的完整优化代码 #

你的现有代码仅处理单张图片，要实现批量抓取，需要先获取所有目标图片链接，逐个访问抓取数据，最后统一生成HTML。以下是调整后的代码：

describe('htmlTest', () => {
  it('批量抓取Shutterstock图片名称并生成HTML', () => {
    cy.visit('https://www.shutterstock.com');

    // 处理Cookie弹窗
    cy.get('body').then(($body) => {
      if ($body.find('.ot-sdk-row').length > 0) {
        cy.get('#onetrust-accept-btn-handler').click();
      }
    });

    // 执行搜索
    cy.get('.MuiFormControl-root > .MuiInputBase-root')
      .click()
      .type('3d character');
    cy.get('.mui-ukg7ay-searchBarButtons > .MuiButtonBase-root').click();

    // 等待搜索结果加载完成（替代固定等待，更可靠）
    cy.get('[data-automation="AssetGrids_GridItemContainer_div"]', { timeout: 10000 }).should('be.visible');

    // 定义要抓取的图片数量，示例取前3张
    const targetCount = 3;
    const assetNames = [];

    // 遍历目标图片
    cy.get('[data-automation="AssetGrids_GridItemContainer_div"]')
      .slice(0, targetCount)
      .each(($item) => {
        // 获取详情页链接
        const assetUrl = $item.children().eq(0).attr('href');
        cy.visit(assetUrl);
        
        // 抓取图片名称（修复选择器：类名用点连接，而非空格）
        cy.get('.MuiTypography-root.MuiTypography-body1.mui-t63b03-bold', { timeout: 5000 })
          .invoke('text')
          .then((name) => {
            assetNames.push(name.trim());
          });
        
        // 返回搜索页继续处理下一张
        cy.go('back');
        cy.get('[data-automation="AssetGrids_GridItemContainer_div"]', { timeout: 10000 }).should('be.visible');
      })
      .then(() => {
        // 生成完整HTML并写入文件
        const htmlContent = `
          <!DOCTYPE html>
          <html lang="zh-CN">
          <head>
            <meta charset="UTF-8">
            <title>Shutterstock图片名称列表</title>
            <style>
              body { font-family: Arial, sans-serif; padding: 20px; }
              h1 { color: #2c3e50; }
              ul { list-style-type: disc; padding-left: 20px; }
              li { margin: 8px 0; color: #34495e; }
            </style>
          </head>
          <body>
            <h1>搜索关键词：3d character</h1>
            <h2>共抓取${assetNames.length}个图片名称</h2>
            <ul>
              ${assetNames.map(name => `<li>${name}</li>`).join('')}
            </ul>
          </body>
          </html>
        `;
        cy.writeFile('cypress/report/test.html', htmlContent);
      });
  });
});

三、关键调整说明 #

• 替换固定等待：用元素可见性等待替代cy.wait(5000)，避免因加载速度差异导致的失败。
• 修复选择器问题：类名选择器中多个类名需用.连接，空格表示后代选择器，会导致无法选中目标元素。
• 批量处理逻辑：用each遍历搜索结果，逐个访问详情页抓取数据，存入数组后统一生成HTML。
• 模板字符串生成HTML：通过map将数组中的名称转为<li>标签，再拼接成完整HTML片段，嵌入到页面结构中。

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