如何用WebDriver结合PIL替代已弃用的PhantomJS实现全页截图？

我完全懂你的痛点——PhantomJS当年在全页截图尤其是处理AJAX动态内容这块确实好用，现在它被弃用后，我在项目里试过几个靠谱的替代方案，都能达到你要的效果，甚至功能更强：

1. Puppeteer（最推荐，Headless Chrome官方API） #

Puppeteer是Google官方维护的Headless Chrome工具，对动态内容处理、全页截图的支持非常到位，完全能替代PhantomJS的核心功能。

关键步骤： #

• 安装Puppeteer：npm install puppeteer
• 编写脚本时重点处理两个核心点：
  1. 等待AJAX内容完全加载：别刚导航到页面就截图，得等报告的动态内容渲染完成——可以用page.waitForSelector()等待报告的核心元素出现，或者page.waitForNetworkIdle()等待网络请求结束（适合AJAX请求较多的场景）。
  2. 精确控制截图尺寸和黑白样式：因为报告宽度固定，先设置固定的视口宽度；黑白效果可以通过模拟print媒体类型（很多报告的黑白样式是写在print媒体查询里的），或者手动注入CSS滤镜。

示例代码： #

const puppeteer = require('puppeteer');

(async () => {
  // 启动Headless Chrome，可选禁用图片加载来提速
  const browser = await puppeteer.launch({ headless: 'new', args: ['--disable-images'] });
  const page = await browser.newPage();

  // 设置固定视口宽度（和你的报告宽度一致），高度随便设，fullPage会自动适配实际页面高度
  await page.setViewport({ width: 1200, height: 800 });

  // 模拟print媒体类型，触发报告自带的黑白样式
  await page.emulateMediaType('print');

  // 导航到报告页面，等待网络请求基本结束
  await page.goto('https://your-report-url.com', { waitUntil: 'networkidle2' });

  // 等待报告核心容器加载完成（替换成你实际的元素选择器）
  await page.waitForSelector('#report-container');

  // 截取全页PNG截图
  await page.screenshot({
    path: 'report-screenshot.png',
    fullPage: true, // 关键参数：自动截取整个页面的实际高度
    type: 'png'
  });

  await browser.close();
})();

额外优化： #

如果报告本身没有print样式，可以手动注入CSS实现黑白效果：

await page.addStyleTag({ content: 'body { filter: grayscale(100%); }' });

2. Selenium WebDriver + Headless Chrome/Firefox #

如果你已经在项目里用Selenium，不需要换工具，只需要配置Headless模式，配合全页截图的方法即可。

关键步骤（以Java为例，其他语言逻辑一致）： #

• 配置Headless Chrome：

ChromeOptions options = new ChromeOptions();
options.addArguments("--headless=new");
options.addArguments("--window-size=1200,800"); // 设置和报告一致的固定宽度
WebDriver driver = new ChromeDriver(options);

• 等待AJAX加载：用显式等待确保报告元素渲染完成：

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("report-container")));

• 全页截图：Chrome的Selenium驱动支持直接获取全页截图，无需手动调整窗口高度：

File screenshot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(screenshot, new File("report-screenshot.png"));

• 黑白样式：通过执行JS注入CSS滤镜：

driver.executeScript("document.body.style.filter = 'grayscale(100%)';");

3. Playwright（多浏览器支持，API更简洁） #

Playwright是微软推出的自动化工具，支持Chrome、Firefox、Safari的Headless模式，API设计比Puppeteer更直观，全页截图同样简单。

示例代码： #

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();

  // 设置固定视口宽度
  await page.setViewportSize({ width: 1200, height: 800 });

  // 模拟print媒体类型
  await page.emulateMedia({ media: 'print' });

  // 导航到报告页面，等待网络空闲
  await page.goto('https://your-report-url.com', { waitUntil: 'networkidle' });

  // 等待报告核心元素加载
  await page.waitForSelector('#report-container');

  // 截取全页截图
  await page.screenshot({ path: 'report-screenshot.png', fullPage: true });

  await browser.close();
})();

通用注意事项 #

• AJAX等待要精准：一定要确保动态内容完全渲染再截图，比如报告有加载动画的话，可以等待动画元素消失。
• 固定宽度要一致：所有方案都要设置和报告相同的视口宽度，避免截图宽度出现偏差。
• 效果对比测试：可以拿PhantomJS的旧截图和新方案的截图对比，调整媒体类型或CSS滤镜，确保黑白效果和之前一致。

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