如何从不同网页提取div元素？如何从Allure报告页抓取指定div到独立页面？

首先先定位目标元素的选择器：打开原Allure报告页，按F12调出开发者工具，用元素拾取工具点击你需要的百分比卡片，记录该div的类名或ID。Allure默认仪表盘的通过率百分比元素通用选择器为.widget__chart-donut__percentage，你可以直接用这个选择器做测试。

下面分不同场景给出实现方案：

场景1：原Allure报告与新网页同域部署 #

直接拉取原报告页面DOM，解析后提取目标元素插入新页面即可，示例代码如下：

新页面HTML部分 #

<!DOCTYPE html>
<html>
<head>
  <title>测试通过率展示</title>
  <!-- 可选：引入Allure报告的样式文件，保证展示效果和原报告一致 -->
  <link rel="stylesheet" href="/allure-report/styles.css">
</head>
<body>
  <h1>测试通过率</h1>
  <!-- 用于容纳拉取到的百分比div的容器 -->
  <div id="allure-percentage-wrap"></div>

  <script>
    async function getPercentageDiv() {
      try {
        // 替换为你的Allure报告实际访问路径
        const res = await fetch('/allure-report/index.html');
        const htmlStr = await res.text();
        // 解析HTML为DOM对象
        const domParser = new DOMParser();
        const allureDom = domParser.parseFromString(htmlStr, 'text/html');
        // 替换为你实际定位到的目标元素选择器
        const targetDiv = allureDom.querySelector('.widget__chart-donut__percentage');
        if (targetDiv) {
          document.getElementById('allure-percentage-wrap').appendChild(targetDiv);
        }
      } catch (e) {
        console.error('拉取数据失败：', e);
      }
    }
    // 页面加载完成后执行
    window.addEventListener('load', getPercentageDiv);
  </script>
</body>
</html>

场景2：原Allure报告与新网页跨域部署，且你有权限调整Allure报告的生成/部署配置 #

有两种可选方案：

• 配置Allure报告所在服务的CORS响应头，添加Access-Control-Allow-Origin: 你的新网页域名，允许跨域访问后即可用场景1的代码拉取
• 更轻量的方案：生成Allure报告时直接导出百分比数据到单独的JSON文件，不需要拉取整个页面解析。你可以在生成报告的脚本中添加后置处理逻辑，示例shell脚本如下：

# 生成Allure报告
allure generate ./allure-results -o ./allure-report
# 提取通过率数据写入单独的json文件（需要安装jq工具处理json）
total=$(jq '.statistic.total' ./allure-report/widgets/summary.json)
passed=$(jq '.statistic.passed' ./allure-report/widgets/summary.json)
echo "{\"passRate\": $((passed * 100 / total))}" > ./allure-report/pass-rate.json

新页面直接拉取这个JSON文件渲染即可，比解析整个HTML性能更高。

场景3：不需要实时同步数据，仅静态展示 #

直接在原Allure报告页用开发者工具选中目标div，右键选择「复制」-「复制outerHTML」，直接粘贴到你的新网页代码中，再把对应样式复制过去即可，不需要额外写JS逻辑。

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