如何使用Selenium保存包含CSS属性的HTML元素树

不用手动遍历元素、解析HTML字符串拼接style属性，下面两种方案实现成本极低，直接复用即可：

• 方案1：注入成熟JS库处理（推荐，兼容性最好）
  不要在Python侧做样式计算和HTML解析，这类CSS转内联的逻辑已经有非常成熟的开源实现，直接通过Selenium把库注入到当前页面，让浏览器引擎完成所有计算和属性写入，不用自己处理CSS优先级、样式继承、特殊属性兼容的问题。
  操作流程：
  1. 提前把Juice（专门做CSS内联的JS库）的压缩版源码存为本地字符串，避免页面跨域无法加载外部脚本
  2. 定位到你要导出的目标WebElement
  3. 调用execute_script()注入库源码，直接传入目标元素让库处理，拿到带完整内联样式的HTML字符串直接存文件即可
     参考代码：

  # 本地读取juice.min.js的源码存为juice_source
  with open("juice.min.js", "r", encoding="utf-8") as f:
      juice_source = f.read()
  
  target_element = driver.find_element(By.CSS_SELECTOR, "你要导出的元素选择器")
  # 注入脚本并处理元素
  final_html = driver.execute_script(
      """
      %s
      return juice(arguments[0].outerHTML, {
          url: window.location.href,
          inlinePseudoElements: true,
          preserveImportant: true
      })
      """ % juice_source,
      target_element
  )
  # 把final_html写入.html文件就能离线打开，样式和原页面完全一致
  with open("offline_page.html", "w", encoding="utf-8") as f:
      f.write(f"<!DOCTYPE html><html><body>{final_html}</body></html>")
  

• 方案2：原生JS实现（无额外依赖，适合简单页面）
  如果不想引入第三方库，直接在浏览器上下文里通过原生API递归给所有元素写入计算后的样式，所有DOM操作都在浏览器侧完成，不需要Python做任何字符串解析。
  直接把下面的逻辑传到execute_script()里执行即可：

  final_html = driver.execute_script(
      """
      const setInlineStyle = (node) => {
          if (node.nodeType !== Node.ELEMENT_NODE) return
          const computed = window.getComputedStyle(node)
          node.style.cssText = computed.cssText
          Array.from(node.children).forEach(setInlineStyle)
      }
      setInlineStyle(arguments[0])
      return arguments[0].outerHTML
      """,
      target_element
  )
  

  这个方案的缺点是对伪元素、媒体查询、部分继承样式的处理不够完善，只适合样式结构简单的页面。

注意点：导出前可以把元素内的图片、字体等资源路径替换为绝对地址，小体积资源可以直接转成base64嵌入HTML，避免离线打开时资源加载失败。

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