运行 puppeteer 脚本时的屏幕截图位置答案

【问题标题】：Screenshots location while running the puppeteer script运行 puppeteer 脚本时的屏幕截图位置
【发布时间】：2019-09-13 22:54:52
【问题描述】：

我创建了一个 Puppeteer 脚本以在 offline 中运行，我有以下代码来截取屏幕截图。在命令提示符下运行offline-login-check.js 脚本时，有人可以告知屏幕截图的添加位置吗？

const puppeteer = require("puppeteer");

(async() => {
  const browser = await puppeteer.launch({
    headless: true,
    chromeWebSecurity: false, 
    args: ['--no-sandbox']
  });
  try {
    // Create a new page
    const page = await browser.newPage()
    // Connect to Chrome DevTools
    const client = await page.target().createCDPSession()
    // Navigate and take a screenshot
    await page.waitFor(3000);
    await page.goto('https://sometestsite.net/home',{waitUntil: 'networkidle0'})
    //await page.goto(url, {waitUntil: 'networkidle0'});
    await page.evaluate('navigator.serviceWorker.ready');
    console.log('Going offline');
    await page.setOfflineMode(true);
 // Does === true for the main page but the fallback content isn't being served.
    page.on('response', r => console.log(r.fromServiceWorker()));
    await page.reload({waitUntil: 'networkidle0'});
    await page.waitFor(5000);
    await page.screenshot({path: 'screenshot.png',fullPage: true})
    await page.waitForSelector('mat-card[id="route-tile-card]');
    await page.click('mat-card[id="route-tile-card]');
    await page.waitFor(3000);
    } catch(e) {
      // handle initialization error
    console.log ("Timeout or other error: ", e)
    }
    await browser.close();
})();

【问题讨论】：

pptr.dev - screenshotIf path is a relative path, then it is resolved relative to current working directory
这是我的测试文件路径C:\work\sun\UiTests。我没有在那个根位置看到 screenshot.png 文件
用这个snippet 试过，但效果很好:(
运行这个snippet waitFor方法，然后在同一个目录ls | GREP .png ，它正确地显示screenshot2.png。问题可能是在您的页面上指定的:(
await page.evaluate('navigator.serviceWorker.ready'); 我觉得有问题

标签： node.js puppeteer

【解决方案1】：

const puppeteer = require('puppeteer');

(async() => {
  const browser = await puppeteer.launch({
    headless: false,
    chromeWebSecurity: false,
    args: ['--no-sandbox']
  });
  try {
    // Create a new page
    const page = await browser.newPage();
    // Connect to Chrome DevTools
    const client = await page.target().createCDPSession();
    // Navigate and take a screenshot
    await page.goto('https://example.com', {waitUntil: 'networkidle0'});
    // await page.evaluate('navigator.serviceWorker.ready');
    console.log('Going offline');
    await page.setOfflineMode(true);
 // Does === true for the main page but the fallback content isn't being served.
    page.on('response', r => console.log(r.fromServiceWorker()));
    await page.reload({waitUntil: 'networkidle0'});
    await page.screenshot({path: 'screenshot2.png',fullPage: true})
    // await page.waitForSelector('mat-card[id="route-tile-card]');
    // await page.click('mat-card[id="route-tile-card]');
    } catch(e) {
      // handle initialization error
    console.log ("Timeout or other error: ", e)
    }
    await browser.close();
})();

然后在命令行中运行ls | GREP .png，您应该会在那里看到屏幕截图。请注意，我删除了可能指定给您网站的await page.evaluate('navigator.serviceWorker.ready');

【讨论】：

【解决方案2】：

你的剧本很完美。没有问题！

screenshot.png 应该在您运行node offline-login-check.js 命令的目录中。

如果它不存在，那么您可能在 page.screenshot 命令运行之前遇到了一些错误/超时。由于您的脚本没问题，这可能是由网络问题或页面问题引起的。例如，如果您的页面有一个永无止境的连接（如 WebSocket），请将“networkidle0”更改为“networkidle2”或“load”，否则第一个page.goto 会卡住。

同样，您的脚本非常完美。您不必更改它。

【讨论】：