如何自动化查找未使用的JavaScript与CSS？能否集成到Selenium测试？

完全可以实现，核心是借助Chrome DevTools Protocol（CDP）提供的覆盖率相关接口，Selenium 4及以上版本已经原生支持CDP调用，不需要额外安装浏览器扩展。

前置要求 #

• 使用 Selenium 4及以上版本 ，配合对应版本的Chrome/Chromium浏览器
• 若仍在使用Selenium 3，需要额外引入CDP调用库适配，更推荐直接升级Selenium版本减少适配成本

具体实现步骤 #

• 初始化Chrome驱动后，先调用CDP命令开启JS和CSS覆盖率追踪

# 开启JS精确覆盖率追踪
driver.execute_cdp_cmd("Profiler.startPreciseCoverage", {"callCount": False, "detailed": True})
# 开启CSS规则使用追踪
driver.execute_cdp_cmd("CSS.startRuleUsageTracking", {})

• 执行正常的Selenium测试流程，包括页面访问、交互操作、滚动、路由跳转等所有你需要统计覆盖率的行为
• 所有测试操作完成后，拉取覆盖率原始数据

# 获取JS覆盖率结果
js_coverage_data = driver.execute_cdp_cmd("Profiler.takePreciseCoverage", {})
# 停止CSS追踪并获取CSS覆盖率结果
css_coverage_data = driver.execute_cdp_cmd("CSS.stopRuleUsageTracking", {})

• 数据解析处理
  拿到的原始数据包含每个资源的使用范围偏移量，你可以自行统计未使用代码的占比，也可以将数据转换为Chrome DevTools Coverage面板兼容的JSON格式，直接导入浏览器可视化查看未使用的JS/CSS片段。

优化建议 #

• 统计单页应用多路由覆盖率时，不需要每次路由跳转都重启追踪，完成所有路由操作后再统一拉取结果即可
• 可以将覆盖率统计逻辑封装到测试用例的前后钩子中，无需侵入业务测试代码即可自动完成全量用例的覆盖率采集
• 若页面存在跨域静态资源，可给Chrome添加启动参数--disable-web-security避免CDP读取跨域资源覆盖率时出现权限问题

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