Java TestNG Cucumber框架下Extent Report自定义配置指引

我正在使用Java TestNG Cucumber框架，希望自定义Extent Report，在每个步骤/场景的左侧添加通过/失败状态标记。以下是我当前使用的配置文件，以及实际报告与预期报告的截图，恳请指导如何调整配置？

我的extent.properties文件详情 #

extent.reporter.spark.start=true
extent.reporter.spark.out=Reports_cucumber/Spark.html
extent.reporter.spark.config=spark-config.xml
extent.reporter.pdf.start=true
extent.reporter.pdf.out=Reports_cucumber/Spark.pdf
extent.reporter.bdd.start=true
extent.reporter.bdd.out=test-output/BddReport/
extent.reporter.spark.base64imagesrc=true
#FolderName
basefolder.name=Reports_cucumber/Report_
basefolder.datetimepattern=d_MMM_YY HH_mm_ss
screenshot.dir=/screenshots/
screenshot.rel.path=../screenshots/

我的extent-config.xml文件详情 #

<extentreports>
  <configuration>

    <!-- report theme -->
    <!-- STANDARD, DARK -->
    <theme>STANDARD</theme>

    <!-- document encoding -->
    <!-- defaults to UTF-8 -->
    <encoding>UTF-8</encoding>

    <!-- protocol for script and stylesheets -->
    <!-- defaults to https -->
    <!-- HTTP, HTTPS -->
    <protocol>https</protocol>

    <!-- offline report -->
    <timelineEnabled>true</timelineEnabled>
    
    <!-- offline report -->
    <enableOfflineMode>false</enableOfflineMode>
    
    <!-- use thumbnails for base64 images -->
    <!-- this may slowdown viewing tests -->
    <thumbnailForBase64>false</thumbnailForBase64>

    <!-- title of the document -->
    <documentTitle>eSurety</documentTitle>

   <reportName>
         <![CDATA[
               
               <img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/sssvfnewhku9z4tqmovr"  style="width:50px;height:40px;" ;>
               <font size="5" >    TEST  RESULTS    </font>
              
                ]]>
        </reportName>
                
    <!-- timestamp format -->
    <timeStampFormat>MMM dd, yyyy HH:mm:ss</timeStampFormat>


        <!-- custom javascript -->
        <scripts>
            <![CDATA[
                $(document).ready(function() {
                    $('.logo-container.grey darken-2').css('display','block');
                });
            ]]>
        </scripts>
      
    <!-- custom styles -->
     <scripts> <![CDATA[$(document).ready(function() {$('.dashboard-view').click();});$('.col.s12:nth-child(2) .card-panel.nm-v').hide();$('.col.s2:nth-child(2)').hide();$('.col.s12:nth-child(1)').css('width', '100%');$('.row .col.s2').css('width', '25%');]]> </scripts>
        
    <styles>
     
    </styles>

  </configuration>
</extentreports>

实际报告截图 #

预期报告截图 #

配置调整方案 #

要实现步骤/场景左侧显示状态标记，需通过自定义JavaScript修改Extent Report的DOM结构，给每个步骤/场景添加左侧状态标识，具体修改如下：

1. 替换extent-config.xml中的自定义脚本部分 #

将原有分散的<scripts>标签合并，添加状态标记逻辑：

<!-- custom javascript -->
<scripts>
    <![CDATA[
        $(document).ready(function() {
            // 保留原有自定义逻辑
            $('.logo-container.grey darken-2').css('display','block');
            $('.dashboard-view').click();
            $('.col.s12:nth-child(2) .card-panel.nm-v').hide();
            $('.col.s2:nth-child(2)').hide();
            $('.col.s12:nth-child(1)').css('width', '100%');
            $('.row .col.s2').css('width', '25%');

            // 给场景添加左侧状态标记
            $('.scenario').each(function() {
                var status = $(this).find('.status').text().trim();
                var statusIcon = getStatusIcon(status);
                $(this).prepend('<span class="left-status-marker" style="margin-right:8px; font-weight:bold;">' + statusIcon + '</span>');
            });

            // 给步骤添加左侧状态标记
            $('.step').each(function() {
                var status = $(this).find('.status').text().trim();
                var statusIcon = getStatusIcon(status);
                $(this).prepend('<span class="left-status-marker" style="margin-right:8px; font-weight:bold;">' + statusIcon + '</span>');
            });

            // 定义状态对应的图标
            function getStatusIcon(status) {
                switch(status) {
                    case 'PASS':
                        return '✅';
                    case 'FAIL':
                        return '❌';
                    case 'SKIP':
                        return '⏭️';
                    default:
                        return 'ℹ️';
                }
            }
        });
    ]]>
</scripts>

2. 可选：添加自定义样式优化显示 #

在<styles>标签中加入以下代码，让标记显示更规整：

<styles>
    <![CDATA[
        .left-status-marker {
            display: inline-block;
            width: 20px;
            text-align: center;
        }
        .scenario, .step {
            display: flex;
            align-items: center;
        }
    ]]>
</styles>

说明 #

• 脚本会在页面加载完成后，遍历所有场景和步骤元素，提取其状态文本生成对应图标，添加到元素左侧；
• 可根据需求修改getStatusIcon函数中的图标样式，比如换成文字（如"P"/"F"）或自定义CSS图标；
• 建议使用最新版ExtentReports库，确保支持自定义JS和DOM操作。

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