HTML测试报告点击按钮弹窗显图：仅首个失败案例有CLICK按钮

问题背景 #

你生成的HTML测试报告需要在失败用例的COMMENTS字段添加点击按钮，用于展示Expected和Actual两张对比图，但目前只有第一个失败案例能显示CLICK按钮，其余失败案例均无此功能。

问题分析 #

我检查了你的代码，发现两个核心问题：

1. Python代码中DisplayImage函数的调用错误：在resultstableupdate方法里，你尝试把DisplayImage的返回值拼接到<img>标签的src属性中，但DisplayImage是直接向HTML文件写入内容，没有返回值（默认返回None），这会导致后续生成的HTML结构错误，无法渲染出按钮。
2. JavaScript的事件绑定逻辑缺陷：你的init函数只处理了第一个按钮（cc=0的情况），没有遍历所有生成的按钮元素，导致只有第一个按钮能绑定点击事件，其余按钮无响应甚至不显示。

修正方案 #

1. 修复Python代码中的DisplayImage调用

在resultstableupdate方法中，当处理图片类型的失败用例时，直接调用DisplayImage即可，不需要将其返回值拼接到字符串中。修改这部分代码：

elif (listvalue == self.Comments):
    if type == "img" and result_status == 1:
        # 直接调用DisplayImage写入按钮和图片，不需要拼接返回值
        self.htmlapp.write("<th>")
        self.DisplayImage(list[self.Comments], list[self.ExpectedValue])
        self.htmlapp.write("</th>")
    else:
        self.htmlapp.write("<th>" + str(list[self.Comments]) + "</th>")

同时，优化DisplayImage方法的代码可读性，确保ID唯一且结构正确：

def DisplayImage(self, srcimage, expimg):
    try:
        self.htmlapp.write(f"<a href='#' id='img{self.inc}' class='image-toggle-btn' value='show my Image'>click here</a>")
        self.htmlapp.write(f"<img id='myimage_{self.inc}' class='hide' src='{srcimage}' alt='Actual Image' width='100px' height='100px'>")
        self.htmlapp.write(f"<img id='myimage{self.inc}' class='hide' src='{expimg}' alt='Expected Image' width='100px' height='100px'>")
        self.inc += 1
    except Exception as e:
        print(f"Error in DisplayImage: {e}")

2. 重构JavaScript的事件绑定逻辑

将原来的init函数修改为遍历所有按钮元素，给每个按钮绑定独立的点击事件。我们给所有按钮添加统一的class（image-toggle-btn），然后通过class批量获取元素：

function init() {
    // 获取所有图片切换按钮
    const buttons = document.getElementsByClassName('image-toggle-btn');
    for (let i = 0; i < buttons.length; i++) {
        const btn = buttons[i];
        const btnId = btn.id.replace('img', ''); // 提取按钮编号
        // 获取对应的两张图片
        const actualImg = document.getElementById(`myimage_${btnId}`);
        const expectedImg = document.getElementById(`myimage${btnId}`);
        
        btn.onclick = function() {
            // 切换实际图片的显示状态
            actualImg.classList.toggle('hide');
            // 切换预期图片的显示状态
            expectedImg.classList.toggle('hide');
            // 切换按钮文本
            this.value = this.value === 'show my Image' ? 'hide my Image' : 'show my Image';
        }
    }
}

// 页面加载完成后执行初始化
window.addEventListener('load', init, false) || window.attachEvent('onload', init);

额外优化建议 #

• 使用Python的f-string替代字符串拼接，让HTML生成代码更易读和维护。
• 给图片添加明确的alt文本，方便无障碍访问和调试。
• 给所有文件操作和DOM操作添加异常捕获，避免单个错误导致整个报告生成中断。

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