puppeteer はじめの一歩

Install

npm init -y
npm install --save puppeteer

• node.js がインストールされていれば良く、Chrome をインストールしておく必要は無い

Basic

example (Google のトップページのスクリーンショットを撮るだけ)

const puppeteer = require('puppeteer');
(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://google.com');
    await page.screenshot({
        path: 'ss.png',
        fullPage: true
    });
    await browser.close();
})();

ヘッドフルモードとスローモーション再生

const browser = await puppeteer.launch({
    headless: false,
    slowMo: 500 // ms
})

シークレットモード

const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();

DOM 指定

• CSS セレクタ
  • https://webliker.info/css-selector-cheat-sheet/
  • page.$() 複数の場合は page.$$()
• XPath セレクタ
  • https://qiita.com/rllllho/items/cb1187cec0fb17fc650a
  • page.x$()
• 操作
  • class: ElementHandle のメソッドが利用できる
  • class: Page のメソッドも利用できる

待機

waitFor 系のメソッドを使用する。

ただし、「クリック後、画面遷移を待つ」ような場合は、その二つの動作を並列に実行しておくこと。

await Promise.all([
    page.waitForNavigation(),
    page.click('.button'),
]);

上記ふたつを await で並べてしまうと、タイミングによってはクリック後ずっと待ち状態に入ってしまうため。

example (Google で「puppeteer」と検索した結果のスクリーンショットを撮る)

const puppeteer = require('puppeteer');
(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://google.com');

    await page.type('.gLFyf', 'puppeteer')

    await Promise.all([
    page.waitForNavigation(),
    page.click('.gNO89b'),
    ]);

    await page.screenshot({
        path: 'ss.png',
        fullPage: true
    });
    await browser.close();
})();

memo

• Puppeteer は Chrome に特化している。Selenium は WebDriver を挟むことで、他ブラウザにも対応できる

参考

• Web+DB Press Vol.109 『[速習] Puppeteer』
  • ここまでの話以上に、テストでの実践やスクレイピングサンプルもあり、オススメな記事
• https://github.com/puppeteer/puppeteer

---