首页 > 解决方案 > 运行 puppeteer 脚本时的屏幕截图位置

问题描述

我已经创建了一个 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();
})();

标签: node.jspuppeteer

解决方案


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');可能指定给您网站的内容


推荐阅读