如何在Extent Spark报告配置JSON文件中添加自定义页眉Logo

我有如下的spark-config.json配置文件：

{
  "theme": "STANDARD",
  "encoding": "utf-8",
  "protocol": "HTTPS",
  "timelineEnabled": true,
  "offlineMode": true,
  "thumbnailForBase64": false,
  "documentTitle": "Test Automation Report",
  "reportName": "TA Report",
  "timeStampFormat": "MMM dd, yyyy HH:mm:ss a",
  "js": "document.getElementsByClassName('logo')[0].style.display = 'none';",
  "css": ""
}

我尝试在js字段中添加以下代码，想替换默认Extent Logo、显示自定义图片：

<![CDATA[<img src='.//src/test/resources/Logo/CompanyLogo.png'/>]]>

但操作后仅隐藏了默认Logo，自定义图片并未显示。我的需求是在Extent报告的页眉区域显示自定义图片，替代默认的Extent Logo。

你添加的是XML格式的CDATA片段，并非可执行的JavaScript代码，所以无法完成插入图片的操作。需要通过DOM操作的JS代码来实现需求，修改后的spark-config.json中js字段示例如下：

"js": "// 隐藏默认Extent Logo
document.getElementsByClassName('logo')[0].style.display = 'none';
// 创建自定义Logo图片元素
const customLogo = document.createElement('img');
customLogo.src = './/src/test/resources/Logo/CompanyLogo.png';
customLogo.style.height = '40px'; // 按需调整尺寸
customLogo.style.margin = '0 10px'; // 按需调整间距
// 将图片插入页眉区域（若选择器不生效，可通过浏览器开发者工具查看实际DOM结构修改）
document.querySelector('nav').prepend(customLogo);"

关键注意点 #

• 路径校验：离线模式下，图片路径要相对于生成的报告文件位置，也可以直接使用Base64编码的图片内容避免路径问题
• 样式适配：通过style属性调整图片的尺寸、边距等，保证和报告页眉布局匹配
• DOM选择器适配：如果上述代码中的nav选择器不生效，打开生成的报告，用浏览器开发者工具查看页眉的实际DOM结构，替换为正确的选择器（比如默认Logo的父元素类名）

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