如何在pytest-html报告中嵌入可交互的Plotly图表并正常渲染？

我完全懂你想保留Plotly图表交互性的需求——复杂图表用静态图片根本没法深入分析数据细节！你现在遇到的问题，根源在于每个图表片段都自带了Plotly的JS代码，在pytest-html生成的完整HTML报告里，要么是重复加载JS引发冲突，要么是脚本执行顺序不对，导致浏览器没法正确渲染交互图表。

下面给你一套经过验证的修改方案，分步骤来：

一、核心思路调整 #

不要让每个图表都携带Plotly的JS代码，而是在pytest-html报告的全局头部只引入一次Plotly的CDN脚本，然后所有图表只生成纯HTML片段（不含JS），这样既避免重复加载，又能保证脚本执行顺序正确。

二、修改测试配置文件conftest.py #

这是关键的修改部分，我们要新增一个hook来给报告全局加Plotly的JS，同时调整图表HTML的生成逻辑：

import pytest
import pytest_html

@pytest.mark.hookwrapper
def pytest_runtest_makereport(item, call):
    outcome = yield
    report = outcome.get_result()
    if call.when == 'call':
        extras = getattr(report, 'extras', [])
        
        # 从测试用例中取出预存的Plotly图表
        if item.user_properties:
            fig = item.user_properties[0]
            # 生成仅含图表结构的HTML片段（不包含Plotly JS）
            # 给每个图表加唯一的div id，避免多个图表冲突
            plot_html = fig.to_html(
                full_html=False,
                div_id=f"plot_{item.nodeid.replace('/', '_')}",
                include_plotlyjs=False
            )
            extras.append(pytest_html.extras.html(plot_html))
        
        # 保留你原来的测试用HTML片段
        extras.append(pytest_html.extras.html("<div>Additional HTML 1</div>"))
        extras.append(pytest_html.extras.html("<div>Additional HTML 2</div>"))
        
        report.extras = extras

# 新增hook：在报告的全局<head>中插入一次Plotly CDN脚本
def pytest_html_results_html(report, data):
    # 用官方稳定版CDN，联网状态下直接加载
    data['head'] += '<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>'

三、测试文件test_dummy_plot.py无需修改 #

你原来的测试代码完全可以继续用，它负责生成图表并存在user_properties里，逻辑没问题：

import plotly.graph_objects as go
import pytest
from plotly.subplots import make_subplots

def test_example(request: pytest.FixtureRequest):
    fig = make_subplots()
    fig.add_trace(go.Scatter(x=[1, 2, 3, 4], y=[1, 2, 4, 8]))
    request.node.user_properties.append(fig)

四、运行测试并验证 #

还是用你原来的命令生成报告：

python -m pytest --html=report.html .

打开生成的report.html（确保联网），你会看到交互图表正常渲染，而且保留了缩放、悬停查看数据等所有Plotly的交互功能！

五、离线使用的适配方案 #

如果需要在无网络环境下查看报告，你可以这样做：

1. 去Plotly官方CDN页面下载plotly-latest.min.js文件，保存到和报告同一个目录下，命名为plotly.min.js
2. 修改conftest.py里的pytest_html_results_html函数，把CDN路径换成本地路径：

def pytest_html_results_html(report, data):
    # 用本地JS文件，离线也能渲染
    data['head'] += '<script src="./plotly.min.js"></script>'

为什么原来的代码不行？ #

你之前用include_plotlyjs=True让每个图表都自带JS，这会导致报告里重复插入多份Plotly的JS代码——浏览器要么会忽略重复的脚本，要么因为脚本加载顺序混乱，在图表的渲染代码执行时，Plotly的核心库还没加载完成，自然没法渲染出交互图表。

现在的方案全局只加载一次JS，所有图表共用这个库，完美解决了顺序和冲突问题～

内容来源于stack exchange