puppeteer發布應該有一段時間了，這兩天正好基於該工具寫了一些自動化解決方案，在這里拋磚引給大家介紹一下。
官方描述：
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
簡單來說，puppeteer的特點如下
- 是node的庫
- 基於DevTools Protocol協議
- 默認是無界面模式運行
安裝
npm i puppeteer
# or "yarn add puppeteer"基本使用方式
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();上面代碼的作用是打開一個頁面，然后給這個頁面截圖，最后關閉瀏覽器。
想象空間
- 可以做一些界面的自動化工作
- 可以做爬蟲
- 可以在服務器上穩定運行，方便容器化
更多例子
將頁面保存成pdf的例子
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
await page.pdf({path: 'hn.pdf', format: 'A4'});
await browser.close();
})();在頁面上下文執行js的例子
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// Get the "viewport" of the page, as reported by the page.
const dimensions = await page.evaluate(() => {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
deviceScaleFactor: window.devicePixelRatio
};
});
console.log('Dimensions:', dimensions);
await browser.close();
})();在亞馬遜搜索商品的例子
/**
* @name Amazon search
*
* @desc Looks for a "nyan cat pullover" on amazon.com, goes two page two clicks the third one.
*/
const puppeteer = require('puppeteer')
const screenshot = 'amazon_nyan_cat_pullover.png'
try {
(async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.setViewport({ width: 1280, height: 800 })
await page.goto('https://www.amazon.com')
await page.type('#twotabsearchtextbox', 'nyan cat pullover')
await page.click('input.nav-input')
await page.waitForSelector('#resultsCol')
await page.screenshot({path: 'amazon_nyan_cat_pullovers_list.png'})
await page.click('#pagnNextString')
await page.waitForSelector('#resultsCol')
const pullovers = await page.$$('a.a-link-normal.a-text-normal')
await pullovers[2].click()
await page.waitForSelector('#ppd')
await page.screenshot({path: screenshot})
await browser.close()
console.log('See screenshot: ' + screenshot)
})()
} catch (err) {
console.error(err)
}
登陸github的例子
/**
* @name Github
*
* @desc Logs into Github. Provide your username and password as environment variables when running the script, i.e:
* `GITHUB_USER=myuser GITHUB_PWD=mypassword node github.js`
*
*/
const puppeteer = require('puppeteer')
const screenshot = 'github.png';
(async () => {
const browser = await puppeteer.launch({headless: true})
const page = await browser.newPage()
await page.goto('https://github.com/login')
await page.type('#login_field', process.env.GITHUB_USER)
await page.type('#password', process.env.GITHUB_PWD)
await page.click('[name="commit"]')
await page.waitForNavigation()
await page.screenshot({ path: screenshot })
browser.close()
console.log('See screenshot: ' + screenshot)
})()常見問題
誰在維護puppeteer?
Chrome DevTools 團隊
Puppeteer可以替換selenium/webdriver嗎?
不可以。這2個工具的目的是不一樣的。
selenium的目的是一套腳本運行在不同瀏覽器上，可以做兼容性測試;
puppeteer專注於Chromium的功能測試。