一、依赖

# 当你安装 Puppeteer 时，它会下载最新版本的Chromium，以保证可以使用 API。
npm i puppeteer

二、网页截图

• 加载完页面后，对页面进行截图方法screenshot()
• 基本截图

const puppeteer = require('puppeteer');
// 网页截图
async function getPic() {
  /**
   * 用于启动 puppeteer，
   * 实质上打开了一个 Chrome 的实例，然后将这个实例对象赋给变量 browser。
   */
  const browser = await puppeteer.launch();
  // 在浏览器实例中新建一个页面，等到返回将页面对象赋给page
  const page = await browser.newPage();
  // 用它来加载我们给的 URL 地址，等待页面加载完毕
  await page.goto('https://blog.csdn.net/weixin_46037781');
  await page.screenshot({path: './static/my-csdn.png'});

  await browser.close();
}

getPic();

• 全屏截图
• 参数fullPage:true

const puppeteer = require('puppeteer');
// 网页截图
async function getPic() {
  /**
   * 用于启动 puppeteer，
   * 实质上打开了一个 Chrome 的实例，然后将这个实例对象赋给变量 browser。
   */
  const browser = await puppeteer.launch();
  // 在浏览器实例中新建一个页面，等到返回将页面对象赋给page
  const page = await browser.newPage();
  // 用它来加载我们给的 URL 地址，等待页面加载完毕
  await page.goto('https://blog.csdn.net/weixin_46037781');
  await page.screenshot({path: './static/my-csdn.png', fullPage:true});

  await browser.close();
}

getPic();

三、生成PDF

• pdf()

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://blog.csdn.net/weixin_46037781', {waitUntil: 'networkidle2'});
  await page.pdf({path: './static/csdn.pdf', format: 'A4'});

  await browser.close();
})();

四、自动化操作

自动CSDN

const puppeteer = require('puppeteer');

(async () => {
 // 启动浏览器
const browser = await puppeteer.launch({
  // 关闭无头模式，方便我们看到这个无头浏览器执行的过程
  headless: false,
  defaultViewport: { width: 1536, height: 722 }, // 浏览器宽高
  args: ['--start-maximized']
});
// 浏览器宽高获取
// console.log(window.innerWidth, window.innerHeight);
// 打开空白页面
const page = await browser.newPage();
await page.goto('https://blog.csdn.net/weixin_46037781', {waitUntil: 'networkidle2'}); // 等待网络状态为空闲的时候才继续执行
await page.type('#toolbar-search-input', '自动化', {delay: 300}); // delay输入间隔
await page.keyboard.press('Enter');
// await browser.close();
})();

五、通过脚本方法截取指定元素的图

const puppeteer = require('puppeteer');
// 网页截图
async function getPic() {
  /**
   * 用于启动 puppeteer，
   * 实质上打开了一个 Chrome 的实例，然后将这个实例对象赋给变量 browser。
   */
  const browser = await puppeteer.launch();
  // 在浏览器实例中新建一个页面，等到返回将页面对象赋给page
  const page = await browser.newPage();
  // 用它来加载我们给的 URL 地址，等待页面加载完毕
  await page.goto('https://blog.csdn.net/weixin_46037781');
  let clip = await page.evaluate(() => {
    let {
        x,
        y,
        width,
        height
    } = document.getElementsByClassName('navList-box')[0].getBoundingClientRect();
    return {
        x,
        y,
        width,
        height
    };
});
  await page.screenshot({path: './static/list-csdn.png', clip: clip});

  await browser.close();
}

getPic();

六、扩展

js执行py脚本

// execSync同步执行，exec异步执行
const execSync = require('child_process').execSync;
const output = execSync('python D:\\.mygitee\\my-py\\读取网站内容.py')
console.log('sync: ' + output.toString())
console.log('over')

• 读取网站内容.py

from urllib.request import urlopen

myURL = urlopen("https://www.runoob.com/")
print(myURL.read(300))
# 读取内容长度300

Puppeteer中文API文档