Docker环境下Puppeteer等待选择器时出现超时错误

我有一个运行在Docker中的Puppeteer应用，本地以headless: 'new'模式运行时一切正常，但部署到Docker环境后就找不到指定选择器。我已经尝试了所有和waitForSelector相关的解决方案，还是不行。

我的Dockerfile #

FROM node:slim

# We don't need the standalone Chromium

# Install Google Chrome Stable and fonts
# Note: this installs the necessary libs to make the browser work with Puppeteer.
RUN apt-get update && apt-get install gnupg wget -y && \
wget --quiet --output-document=- https://dl-ssl.google.com/linux/linux_signing_key.pub | gpg --dearmor > /etc/apt/trusted.gpg.d/google-archive.gpg && \
sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' && \
apt-get update && \
apt-get install google-chrome-stable -y --no-install-recommends && \
rm -rf /var/lib/apt/lists/*

ENV PUPPETEER_EXECUTABLE_PATH /usr/bin/google-chrome-stable

# Create working directory
WORKDIR /app

# Copy project files to container
COPY . .

# Install NPM dependencies for function
RUN npm install

# Expose app
EXPOSE 3050

# Run app
CMD ["npx", "nodemon", "server.js"]

核心脚本代码 #

await page.type('[id="login-input"]', pEmail, { delay: this.typeDelay });
setTimeout(async function () {
   await page.click('[type="submit"]');
}, 3000);
await page.waitForNavigation();

1. 修复异步逻辑错误 #

当前代码中的setTimeout是异步执行的，会导致await page.waitForNavigation()在点击操作之前就触发，破坏了流程顺序，进而引发选择器查找或导航等待异常。替换为Puppeteer的异步等待方法：

await page.type('[id="login-input"]', pEmail, { delay: this.typeDelay });
// 用异步等待替代setTimeout，保证执行顺序
await page.waitForTimeout(3000);
// 等待提交按钮可见后再点击
await page.waitForSelector('[type="submit"]', { visible: true, timeout: 10000 });
await page.click('[type="submit"]');
// 明确导航等待条件，避免过早结束等待
await page.waitForNavigation({ waitUntil: 'networkidle2' });

2. 配置Docker环境下Chrome的启动参数 #

Docker中运行Chrome需要添加特定参数解决权限、内存和渲染问题，在启动Puppeteer时配置：

const browser = await puppeteer.launch({
  executablePath: process.env.PUPPETEER_EXECUTABLE_PATH,
  headless: 'new',
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-dev-shm-usage', // 解决Docker内存限制问题
    '--disable-gpu',
    '--window-size=1920,1080' // 确保页面渲染尺寸足够，避免元素因视口过小被隐藏
  ]
});

3. 提升选择器稳定性 #

• 避免依赖易变的属性（如动态ID），改用更稳定的选择器，比如结合元素结构：await page.click('form > button[type="submit"]')
• 每次操作前都显式等待目标元素可见，而非仅依赖固定延迟

4. 优化Docker镜像构建 #

• 使用puppeteer-core代替完整的puppeteer，避免内置Chromium与手动安装的Chrome版本冲突
• 安装依赖时添加--unsafe-perm参数，解决容器内权限问题：

  RUN npm install --unsafe-perm
  

内容的提问来源于stack exchange，提问作者Bernardo Mantoan Castellani