测试用例失败时导出DOM的实现方法及注意事项

一、DOM/Body快照实现 #

在sampleAfterTestCase方法中添加DOM快照逻辑，核心是通过WebDriver执行JavaScript获取页面HTML，再写入本地文件：

核心代码（Groovy） #

@AfterTestCase
def sampleAfterTestCase(TestCaseContext testCaseContext) {
    if (!testCaseContext.getTestCaseStatus().equals("PASSED")) {
        // 保留原有截图逻辑
        WebUI.takeScreenshot("Screenshots/Test Case Fails/${testCaseContext.getTestCaseId()}.png")
        
        // 新增：保存DOM快照为HTML
        try {
            // 获取当前WebDriver实例
            def driver = DriverFactory.getWebDriver()
            // 可选：获取完整页面HTML（含head）或仅body部分
            // 完整页面：document.documentElement.outerHTML
            // 仅body：document.body.outerHTML
            def pageHtml = driver.executeScript("return document.documentElement.outerHTML;")
            
            // 定义保存路径，建议和截图同目录，方便关联排查
            def htmlPath = "Screenshots/Test Case Fails/${testCaseContext.getTestCaseId()}.html"
            // 写入文件，指定UTF-8编码避免乱码
            new File(htmlPath).write(pageHtml, "UTF-8")
        } catch (Exception e) {
            // 捕获异常，防止影响后续资源关闭流程
            println("保存DOM快照失败：${e.getMessage()}")
        }
    }
    
    PracticeProfileHandler.GetInstance().close();
    SMDWebDriverUtils.CloseDriver();
}

关键细节 #

• 用原生JS获取HTML比工具类封装更可靠，能拿到测试失败瞬间的真实DOM状态
• 优先选择完整页面HTML（document.documentElement.outerHTML），便于排查样式加载、脚本执行等潜在问题；若仅关注页面内容，用document.body.outerHTML即可
• 必须用try-catch包裹快照逻辑，避免获取DOM时抛出异常导致后续的资源关闭步骤中断

二、保存时的注意事项 #

1. <script>标签的处理建议 #

不建议完全删除，可选择性调整：

• 保留：静态框架脚本、样式相关脚本，能让保存的HTML更接近真实渲染状态，方便复现问题
• 禁用/删除：动态生成的内联脚本、定时器、异步请求脚本，避免打开本地HTML时触发不必要的请求或报错；可通过给<script>标签添加type="text/plain"属性禁用执行，同时保留代码内容用于排查
• 若担心脚本执行干扰，可在获取HTML后用正则替换脚本标签：

  // 示例：禁用所有脚本执行
  pageHtml = pageHtml.replaceAll(/<script(.*?)>/, '<script$1 type="text/plain">')
  

2. 其他重要事项 #

• 资源路径处理：页面中的相对路径（图片、CSS）在本地打开会失效，可通过JS将相对路径替换为绝对路径（利用document.baseURI拼接），或忽略（DOM快照主要用于查看元素结构）
• 编码控制：写入文件时必须指定UTF-8编码，避免中文或特殊字符乱码
• 文件大小优化：若页面包含大量动态内容（如长列表），可只保存报错元素所在的局部DOM（通过driver.findElement(By.xpath("xxx")).getAttribute("outerHTML")获取），减少文件体积
• 资源冲突：确保HTML文件路径和截图路径不重复，避免文件覆盖
• 隐私清理：若页面包含敏感数据（如用户信息），需提前通过JS替换或删除DOM中的敏感内容

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