Ubuntu18.04中使用Puppeteer启动浏览器出现透明无内容的问题求助

针对Ubuntu 18.04系统中使用Puppeteer启动可视化浏览器时窗口透明无内容的问题，可尝试以下几种解决方式：

1. 补充显示相关启动参数 #

在Puppeteer的启动参数中添加GPU禁用、共享内存优化及显示指定参数，修改后的代码如下：

const browser = await puppeteer.launch({
  headless: false,
  args: [
    "--disable-setuid-sandbox",
    "--no-sandbox",
    "--disable-gpu",
    "--disable-dev-shm-usage",
    "--display=:0" // 若你的X11显示编号不是:0，可根据实际情况调整
  ],
  ignoreDefaultArgs: ["--enable-automation"],
});
const page = await browser.newPage();
await page.goto("http://127.0.0.1:3000/");

2. 安装Chromium运行依赖库 #

Ubuntu系统下Chromium浏览器运行需要依赖部分系统库，缺失会导致渲染异常，执行以下命令安装：

sudo apt-get install -y libx11-xcb1 libxcomposite1 libxcursor1 libxdamage1 libxi6 libxtst6 libnss3 libcups2 libxss1 libxrandr2 libgconf-2-4 libasound2 libatk1.0-0 libgtk-3-0

3. 配置虚拟显示环境（适用于无桌面场景） #

如果是在无图形桌面的终端环境运行服务，需要配置Xvfb虚拟显示：

1. 安装Xvfb：

sudo apt-get install xvfb

2. 启动虚拟显示并设置环境变量：

Xvfb :99 -screen 0 1024x768x16 &
export DISPLAY=:99

3. 再运行你的Node.js服务。

4. 更新Puppeteer至兼容版本 #

旧版Puppeteer可能与Ubuntu 18.04存在兼容性问题，执行命令更新：

npm update puppeteer

若更新后仍有问题，可指定安装兼容性较好的版本：

npm install puppeteer@19.11.1

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