在自动化测试、页面监控和内容归档等场景中，网页截图是一项常见需求。传统的前端截图方案，比如使用html2canvas在浏览器中绘制，经常受限于跨域资源、CSS兼容性和动态内容渲染不完整等问题。而通过Node.js驱动Selenium WebDriver，可以控制真实的Chrome或Firefox浏览器加载页面，等待JavaScript执行完毕，再调用原生的截图接口把当前视口保存为PNG图片。这种方式能最大程度还原用户实际看到的效果，特别适合处理需要登录、异步加载或复杂交互的页面。接下来会介绍在Node.js环境下从零实现一个Selenium截图工具的具体步骤。
环境准备与依赖安装
开始之前需要确保本机已安装Node.js和Chrome浏览器。Node.js建议使用14及以上版本，因为较新的selenium-webdriver依赖现代JavaScript特性。Chrome可以选择正式版或Beta版，但尽量保持更新，避免驱动与浏览器版本不匹配导致启动失败。项目初始化时创建一个空目录，执行npm init -y生成package.json，然后安装核心依赖：
npm install selenium-webdriver
从selenium-webdriver 4.6版本开始，官方内置了Selenium Manager工具，能够自动检测本机Chrome版本并下载匹配的chromedriver。也就是说，开发者不再需要手动去官网下载驱动并配置环境变量，这大大降低了上手门槛。如果你使用的版本较旧，仍需要手动下载chromedriver并确保它位于PATH中，或者通过代码指定驱动路径。安装完成后，可以在项目里创建一个screenshot.js文件，开始编写截图逻辑。
除了selenium-webdriver，有时还需要安装chromedriver包作为备用方案。在Selenium Manager不可用或网络受限的环境下，显式安装chromedriver包可以确保驱动文件存在。但要注意，如果浏览器版本更新了，chromedriver包可能过时，此时需要升级依赖或者重新指定版本。通常推荐依赖Selenium Manager自动管理，只有在CI/CD等特殊环境中才考虑手动控制。
编写截图脚本：从启动浏览器到保存图片
一个完整的截图脚本包含几个步骤：创建浏览器实例、设置选项、打开目标页面、等待关键元素出现、调用截图接口、写入文件。下面是一个可以直接运行的示例，代码中把访问地址替换成了ipipp.com作为演示：
const { Builder, By, until } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const fs = require('fs');
(async function screenshot() {
let options = new chrome.Options();
options.addArguments('--headless=new');
options.addArguments('--no-sandbox');
options.addArguments('--disable-gpu');
options.addArguments('--window-size=1920,1080');
let driver = await new Builder()
.forBrowser('chrome')
.setChromeOptions(options)
.build();
try {
await driver.get('https://ipipp.com');
await driver.wait(until.elementLocated(By.css('h1')), 10000);
let image = await driver.takeScreenshot();
fs.writeFileSync('screenshot.png', image, 'base64');
console.log('截图已保存为 screenshot.png');
} finally {
await driver.quit();
}
})();代码首先引入了selenium-webdriver的核心模块和chrome选项模块。使用Builder构建驱动实例，并通过setChromeOptions传入配置。无头模式参数--headless=new是新版Chrome推荐的无头模式写法，它比旧版--headless渲染效果更接近真实浏览器。--no-sandbox和--disable-gpu在Linux服务器环境中经常需要，可以避免权限和GPU加速带来的启动问题。
打开页面后，脚本使用driver.wait配合until.elementLocated等待页面上的h1元素出现。这一步非常关键，因为很多页面在初始HTML加载后还会通过Ajax或前端框架动态渲染内容，如果直接截图可能只得到一个空白页。等待超时时间设置为10秒，超时会抛出异常，从而避免截图任务无限挂起。截图方法takeScreenshot返回的是Base64编码的PNG数据，使用fs.writeFileSync以base64方式写入文件即可得到图片。
除了等待元素出现，有时还需要等待元素可见。例如一个元素虽然存在于DOM中，但被CSS隐藏或者尚未完成动画，此时截图可能无法体现正确状态。可以使用until.elementIsVisible替换elementLocated，实现更精确的等待。另外，如果页面包含懒加载图片，建议滚动到页面底部触发加载后再截取全页。这些细节可以根据实际页面结构调整。
无头模式与等待策略优化
无头模式是服务器端截图的首选，它不依赖图形界面，内存占用更低，运行速度也更快。但无头模式下的渲染结果与有头模式可能存在细微差异，例如某些CSS动画或字体渲染。如果对截图还原度要求极高，可以在本地调试时关闭无头模式，确认页面效果后再切换回无头模式部署。窗口尺寸通过--window-size参数设置，它直接影响截图的分辨率，建议根据业务需要设置成常见分辨率，如1920x1080或1366x768。
等待策略的选择直接影响截图的成功率和执行时间。Selenium提供了三种等待方式：隐式等待、显式等待和强制休眠。隐式等待通过driver.manage().setTimeouts({ implicit: 5000 })设置，它会在查找元素时自动等待一段时间，但对截图前的整体渲染完成度帮助不大。显式等待使用driver.wait配合条件函数，能精确等待某个元素或状态出现，是截图场景中最推荐的方式。强制休眠driver.sleep(3000)简单但不可靠，页面加载时间波动时会失效，应尽量避免使用。
对于内容很长的页面，截图默认只截取当前视口区域，如果需要整页截图，可以考虑在截图前通过JavaScript滚动页面，或者使用第三方工具拼接。目前selenium-webdriver本身不支持直接输出整页长图，但可以通过调整窗口高度为页面完整高度来实现近似效果。先获取document.body.scrollHeight，然后重新设置窗口大小，再截图。这样虽然会消耗更多内存，但能保留完整的页面内容。
常见错误排查与性能建议
在实际使用中，最常见的错误是浏览器驱动版本不匹配。如果报错信息包含session not created或This version of ChromeDriver only supports Chrome version，就说明驱动与浏览器版本对不上。此时应升级selenium-webdriver到最新版，让Selenium Manager自动匹配，或者手动更新chromedriver。另一个常见问题是超时，如果driver.wait抛出TimeoutError，需要检查目标元素的选择器是否正确，以及页面是否真的加载出了该元素。
性能方面，每次截图都启动一个新的浏览器实例会带来较大的开销。对于批量截图任务，可以考虑复用同一个驱动实例，依次打开不同页面。不过需要注意，复用驱动时页面之间的状态可能会相互影响，比如Cookie和本地存储。如果需要隔离，可以在每次任务之间执行driver.manage().deleteAllCookies()。对于并发需求，可以使用多个驱动实例同时工作，但要注意控制并发数量，避免系统资源被耗尽。
内存泄漏是长时间运行截图服务时需要关注的问题。即使调用了driver.quit()，某些情况下系统可能仍残留Chrome进程。可以在脚本外层加上定时检查逻辑，定期清理僵尸进程。在Linux服务器上，可以组合使用pkill -f chrome命令作为兜底，但要注意不要误杀其他Chrome相关服务。总体上，只要合理管理驱动生命周期，Node.js结合Selenium做截图是完全可行且稳定的方案。