Puppeteer自动化测试（爬虫）

中文文档：puppeteer.js中文文档|puppeteerjs中文网|puppeteer爬虫教程

书栈网-中文文档：README - 《Puppeteer中文文档》 - 书栈网 · BookStack

W3C文档：Puppeteer 手册_w3cschool

基本使用：

使用的 node 版本，需要装 nodeJS

let puppeteer = require('puppeteer')

;(async function () {
  // 启动浏览器
  const browser = await puppeteer.launch({
    headless: false, // 是否显示浏览器窗口
    devtools: false, // 打开F12控制台
    args: ['--disable-features=site-per-process'],
    defaultViewport: { width: 760, height: 960 }, // 页面大小
  })
  // 打开一个窗口
  let page = await browser.newPage()
  // 启用 javascript
  await page.setJavaScriptEnabled(true)
  // 打开一个页面
  await page.goto('https://www.baidu.com/')
  // 找输入框
  const elementHandle = await page.$('#kw')
  // 输入内容
  await elementHandle.type('hello word')
  // 找按钮
  const sel_btn = await page.$('#su')
  // 点击
  await sel_btn.click()

  // 等待元素出现
  await page.waitForSelector('div.c-font-normal > .text_2NOr6', { visible: true })

  // 获取元素文本
  const text = await page.$eval('div.c-font-normal > .text_2NOr6', (ele) => ele.innerText)
  console.log(text)
})()

 自动登录（案例）

let puppeteer = require('puppeteer')

;(async function () {
  // 启动浏览器
  const browser = await puppeteer.launch({
    headless: false, // 是否显示浏览器窗口
    devtools: false, // 打开F12控制台
    args: ['--disable-features=site-per-process'], // 抓取 iframe
    defaultViewport: { width: 760, height: 960 }, // 页面大小
  })
  // 打开一个窗口
  let page = await browser.newPage()
  // 启用 javascript
  await page.setJavaScriptEnabled(true)
  // 打开一个页面
  await page.goto('https://126.com/')
  
  // 获取所有iframe
  await page.frames().map((item) => {
    console.log(item.url())
  })

  const tar_url = 'https://passport.126.com'
  // 查找包含指定地址的 iframe
  const frame = await page.frames().find((item) => item.url().includes(tar_url))
  // 获取 iframe 里的邮箱输入框
  const mail = await frame.waitForSelector('input.j-nameforslide')
  // 输入内容
  await mail.type('aaa123456')
  // 获取 iframe 里的密码输入框
  const pass = await frame.waitForSelector('input.dlpwd')
  // 输入内容
  await pass.type('123456')
  // 获取按钮
  const sub_btn = await frame.waitForSelector('#dologin')
  // 点击
  await sub_btn.click()
})()

滚动页面底部 && 截图 && 生成pdf

page.evaluate使用：等待里面的异步函数执行完成

// 生成pdf && image
async function createPDF() {
  const browser = await puppeteer.launch({
    headless: false,
    devtools: false,
    args: ['--disable-features=site-per-process'],
    defaultViewport: { width: 1920, height: 1080 },
  })
  let page = await browser.newPage()
  // 启用 javascript
  await page.setJavaScriptEnabled(true)

  await page.goto('https://www.jd.com/', { waitUntil: 'networkidle0' })

  const result = await page.evaluate(() => {
    let distance = 20
    let interval = 10
    let totalHeight = 0
    return new Promise((resolve, reject) => {
      let timer = setInterval(() => {
        var scrollHeight = document.body.scrollHeight
        window.scrollBy(0, distance)
        totalHeight += distance
        if (totalHeight >= scrollHeight) {
          clearInterval(timer)
          resolve('--- 滚动完成 ---')
        }
      }, interval)
    })
  })
  console.log(result)

  // 导出PDF配置
  const options = {
    // 保存路径
    path: 'test.pdf',
    //纸张尺寸
    format: 'A4',
    margin: {
      top: '2px',
      bottom: '35px',
    },
  }

  try {
    await page.pdf(options)
  } catch (e) {
    console.log(e)
  } finally {
    // await page.close()
  }

  await page.screenshot({
    path: 'baidu.png',
    fullPage: true,
  })
}
createPDF()