APIが用意されていないサービスからのデータ取得 - Puppeteer - 01

github.com

Puppeteer の使い方を説明する。大きな流れとしては、次の通りである。

1. まず最初にブラウザを初期化・起動する。
2. 操作したい部分を セレクタ や XPath で選択する
3. クリック操作や入力操作を行ったり、内包するテキストを読み込む
4. ブラウザを終了

Selenium を使うときと大きくは変わらない。 Puppeteer を試しに使ってみたい人のために、オンラインで動作するサイトが用意されている。

try-puppeteer.appspot.com

下記のサンプルをエディタ欄に入力し、 “RUN IT” を押してみよう。無事に動いたら、図のようになるはずだ。ここから先は、連載で詳しく見ていこう。

Puppeteer を動作させて、Yahooで検索結果の1番目のテキストを取得＆スクリーンショットを撮るサンプル

const browser = await puppeteer.launch();

const page = await browser.newPage();
const url = 'https://www.yahoo.co.jp/';
await page.goto(url);

const textboxSelector = 'input[type=search]';
const searchWord = 'テスト';
const resultPageLoadCheckSelector = '#SaA-tg-list';
const firstResultSelector = '#contents__wrap  div  div  section';

// 検索文字を入力して、Enterを押す
await page.type(textboxSelector, searchWord);
await page.keyboard.press('Enter');

// 検索結果ページが表示されるまで待つ
await page.waitForSelector(resultPageLoadCheckSelector);

// スクリーンショットを撮る
await page.screenshot({path: 'screenshot.png'});
const firstResult = await page.$eval(firstResultSelector, item => {
  return item.textContent;
})
// 検索結果の最初にヒットしたもののテキストを抽出
console.log(firstResult);

await browser.close();