使用Playwright+Java实现网页截图功能教程

我搭建的api(供您测试):
curl https://screenshot.rui10038.top/screenshot?url=https://baidu.com > baidu.png

简介

Playwright是一个由Microsoft开发的现代化自动化测试工具，支持跨浏览器自动化操作。本教程将介绍如何使用Playwright配合Java实现网页访问和截图功能。

官网地址: https://playwright.dev/

环境准备

  • Java JDK 8或更高版本
  • Maven/gradle
  • IDE（推荐IntelliJ IDEA）

项目依赖配置

最新版本查看路径: Installation | Playwright Java

在Maven的pom.xml文件中添加以下依赖：

1
2
3
4
5
<dependency>
    <groupId>com.microsoft.playwright</groupId>
    <artifactId>playwright</artifactId>
    <version>1.51.0</version>
</dependency>

gradle添加

1
implementation("com.microsoft.playwright:playwright:1.51.0")

系统版本要求

  • Java 8 or higher.
  • Windows 10+, Windows Server 2016+ or Windows Subsystem for Linux (WSL).
  • macOS 14 Ventura, or later.
  • Debian 12, Ubuntu 22.04, Ubuntu 24.04, on x86-64 and arm64 architecture.

最新要求查看: Installation | Playwright Java

基础实现步骤

  1. 创建Playwright实例
  2. 启动浏览器
  3. 创建新页面
  4. 访问目标URL
  5. 进行截图操作
  6. 关闭浏览器

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import com.microsoft.playwright.*;

public class ScreenshotExample {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            Browser browser = playwright.chromium().launch();
            Page page = browser.newPage();
            
            // 访问目标网页
            page.navigate("https://www.example.com");
            
            // 等待页面加载完成
            page.waitForLoadState();
            
            // 进行截图
            page.screenshot(new Page.ScreenshotOptions()
                .setPath(Paths.get("screenshot.png"))
                .setFullPage(true));
                
            browser.close();
        }
    }
}

截图配置选项

Playwright提供了多种截图配置选项：

  • fullPage：是否截取整个页面
  • path：截图保存路径
  • quality：图片质量（仅适用于JPEG格式）
  • clip：指定截图区域

注意事项

  • 首次运行时，Playwright会自动下载所需的浏览器,请确认服务器能连接外网
  • 建议使用try-with-resources语句来确保资源正确关闭
  • 对于动态加载的页面，建议添加适当的等待机制
  • 可以根据需要选择不同的浏览器引擎（Chromium、Firefox、WebKit）

常见问题排查

浏览器启动失败

检查是否正确安装了浏览器驱动
确认系统环境变量设置
检查防火墙设置

截图白屏

等待页面渲染完成
page.waitForLoadState(LoadState.DOMCONTENTLOADED)
确认页面网络请求发送情况

1
2
3
4
5
6
7
8
page.onResponse(response -> {
            numberOfRequests.decrementAndGet();
            if (response.status() >= 400) {
                log.error("Network error - URL: {}, Status: {}", response.url(), response.status());
            } else {
                log.debug("Response success - URL: {}, Status: {}", response.url(), response.status());
            }
        });

检查控制台是否有报错

1
2
3
4
5
6
7
8
// Listen for console messages
        page.onConsoleMessage(message -> {
            if ("error".equals(message.type())) {
                log.error("Console error: {}", message.text());
            } else {
                log.debug("Console [{}]: {}", message.type(), message.text());
            }
        });

自动下载浏览器超时

参考下面的问题,安装node环境,然后用node下载
npx playwright install (手动下载应该也行)
会下载到以下目录:

  • %USERPROFILE%\AppData\Local\ms-playwright on Windows
  • ~/Library/Caches/ms-playwright on macOS
  • ~/.cache/ms-playwright on Linux

手动下载解压到这个目录也可以
然后配置环境变量PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1跳过下载.
如果跳过下载提示报错未找到文件,则按照报错的文件名重命名现有的目录(chromium-1024 -> chromium-1000)即可

运行报错Failed to create driver

Playwright-java需要GLIBcxx 3.4.20等依赖 但不会下载需要的依赖,而是会报错Failed to create driver,这个时候需要安装node,运行官方命令
PS:因为有些环境,报错不影响截图,所以没写在必经流程里面.

npx playwright install-deps
来完成依赖安装.具体如下:

1
2
3
4
5
# 安装node环境 注意要版本号要>=18
# 可以前往官网选择版本安装 https://nodejs.org/zh-cn/download
sudo apt install nodejs npm
# 安装依赖
npx playwright install-deps

截图完后中文显示方框

是因为服务器没中文字体
sudo apt-get install -y fonts-wqy-microhei fonts-wqy-zenhei 安装即可

提示：为了获得更好的性能，建议在非UI测试场景下使用无头模式（Headless Mode）运行浏览器。