puppeteer使用筆記 - NodeJS庫

Puppeteer是谷歌官方出品的一個經過DevTools協議控制headless Chrome的Node庫。能夠經過Puppeteer的提供的api直接控制Chrome模擬大部分用戶操做來進行UI Test或者做爲爬蟲訪問頁面來收集數據。

 

demo操做流程：

1.新建一個目錄: mkdir pupdemo

2.進入到這個目錄: cd pupdemo

3.初始化package.json, 運行命令：npm init (一路回車就行了)

4.安裝Node依賴模塊,運行命令：npm install --save-dev

5.新建index.js，源代碼以下：

// 引入模塊
const puppeteer = require('puppeteer');

// 異步執行代碼
(async () => {
  // 運行一個帶UI的chrome瀏覽器
  const browser = await puppeteer.launch({headless: false});
  // 新建一個標籤頁
  const page = await browser.newPage();
  // 打開網址
  await page.goto('https://baidu.com');
  // 在文本框('#kw': ID爲kw的元素)中輸入puppeteer, 而後等100毫秒
  await page.type('#kw', 'puppeteer', {delay: 100});
  // 點擊按鈕('#su': ID爲su的元素)
  page.click('#su')
  // 等1s
  await page.waitFor(1000);
  // 執行一段腳本，用於返回頁面的信息: width 寬, height 高, devicePixelRatio 這個能夠百度
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });
  // 在命令行控制檯輸出信息
  console.log('Dimensions:', dimensions);
  // 再執行一段腳本，用於返回".result a" 選擇器查到的元素文本中包含'Puppeteer的入門和實踐'的內容（其中就是找出它的連接地址）
  const targetLink = await page.evaluate(() => {
    return [...document.querySelectorAll('.result a')].filter(item => {
      return item.innerText && item.innerText.includes('Puppeteer的入門和實踐')
    }).toString()
  });
  // 跳轉這個連接地址
  await page.goto(targetLink);
  // 等1s
  await page.waitFor(1000);
  // browser.close(); 這句代碼會關閉窗口，爲了體現效果先註釋
})()

6.運行命令：node --harmony index.js (而後就能夠看到會自動打一個chrome瀏覽器，並打開指定網頁，輸入文本及點擊按鈕一系統操做)