使用Playwright+NodeJS自动化时无法点击保存按钮求助

核心原因 #

你遇到的问题本质是：点击Chrome打印预览页的「保存」按钮后弹出的是系统级文件保存对话框，这类对话框属于操作系统层面，不在Playwright的浏览器上下文控制范围内，因此无法通过page.click()或键盘模拟来操作。

最优解决方案：使用Playwright原生PDF生成API（推荐） #

直接跳过打印对话框流程，利用Playwright内置的frame.pdf()（针对iframe内容）或page.pdf()方法生成PDF，这是官方推荐的稳定方案，完全无需处理任何对话框。

修改你的handlePdfLink函数，替换点击打印按钮后的逻辑：

async function handlePdfLink(url, name) {
    const pdfPage = await context.newPage();
    const maxRetries = 4;
    let navigationSuccess = false;

    for (let attempt = 1; attempt <= maxRetries; attempt++) {
      try {
        console.log(`Attempt ${attempt} to load ${url}`);
        await pdfPage.goto(url, { waitUntil: 'networkidle', timeout: 60000 });
        navigationSuccess = true;
        break;
      } catch (error) {
        console.warn(`Attempt ${attempt} failed to load ${url}:`, error);
        if (attempt === maxRetries) {
          console.error(`Failed to load ${url} after ${maxRetries} attempts.`);
          failedUrls.push(url);
        } else {
          await pdfPage.waitForTimeout(1000);
        }
      }
    }

    if (navigationSuccess) {
      try {
        // Wait for iframe and get its content frame
        const iframeElementHandle = await pdfPage.waitForSelector('iframe');
        const frame = await iframeElementHandle.contentFrame();

        if (!frame) {
          throw new Error('Could not get iframe content.');
        }

        // 移除原有的打印按钮点击逻辑，直接生成PDF
        // await frame.click('#btn-print');

        // 模拟打印媒体样式，匹配页面的打印布局
        await frame.emulateMedia({ media: 'print' });

        // 配置PDF生成参数，按需调整
        const pdfOptions = {
          format: 'A4',
          printBackground: true, // 保留页面背景色/图片
          margin: { top: '1cm', right: '1cm', bottom: '1cm', left: '1cm' },
        };

        // 从iframe生成PDF
        const pdfBuffer = await frame.pdf(pdfOptions);

        // 保存PDF到指定路径
        const savePath = path.join(pdfDir, `${generateUniqueFileName(name)}.pdf`);
        await fs.promises.writeFile(savePath, pdfBuffer);

        console.log(`Saved ${savePath}`);
      } catch (error) {
        console.error(`Error processing ${url}:`, error);
        failedUrls.push(url);
      }
    }

    await pdfPage.close();
    await new Promise(resolve => setTimeout(resolve, 2000));
  }

备选方案：强制自动打印到PDF（仅针对必须走打印流程的场景） #

如果页面必须通过点击打印按钮触发动态生成内容等逻辑，可以通过Chrome启动参数自动跳过对话框，直接保存PDF：

在创建浏览器上下文时添加以下启动参数：

const context = await browser.newContext({
  args: [
    '--kiosk-printing', // 启用自动打印模式，无需确认
    '--print-to-pdf=' + path.join(pdfDir, `${generateUniqueFileName(name)}.pdf`), // 指定PDF保存路径
  ],
});

注意：这种方式需要提前指定每个页面的保存路径，灵活性不如方案1，仅在特殊场景下使用。

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