Puppeteerを利用して、簡単なスクレイピングをしてみます。
Googleで適当な文字列を検索して、結果のタイトル部分を出力します。
今回作成したソースコードは以下にようになります。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: true
});
// 新規ページを作成後、ページ遷移
const page = await browser.newPage();
await page.goto('https://www.google.com/?hl=ja');
// 検索項目に値を入力し、検索する。
await page.type('input[title="検索"]', '株式会社PUreatio', { delay: 50 });
await page.keyboard.press('Enter');
// 遷移完了を待機する。
await page.waitForNavigation();
let hasNext = true
while(hasNext) {
// 検索結果のタイトルを取得する。
const searchResults = await page.$$('h3[class="LC20lb"]');
for (let result of searchResults) {
// 検索結果のタイトルを取得する。
let title = await (await result.getProperty('textContent')).jsonValue();
console.log(title);
}
// 「次へ」のリンクをクリックする。
let nextLink = await page.$('a[id="pnnext"]');
if (nextLink !== null) {
await nextLink.click();
await page.waitForNavigation();
} else {
// 次の検索結果ページがなくなったら処理終了。
hasNext = false;
}
}
await browser.close();
})();
ソースコード上では、Googleで「株式会社PUreatio」を検索しています。
次画面への遷移には、「id = pnnext」のリンクを取得し、クリックすることで遷移します。
最初の検索項目に値を入力して検索ボタンを押下する（今回はEnterを入力しています）ところ、いくつかやり方がありますので載せておきます。
1. 項目をElementHandlerクラスで取得し、Enterを押下する
// 検索項目に値を設定する。
let conditionElement = await page.$('input[title="検索"]')
await conditionElement.type('Test Input');
// Enterを押下することで検索する。
await conditionElement.press('Enter');
2．普通にボタンを押下する。
await page.type('input[title="検索"]', 'PUreatio', { delay: 50 });
await page.click('input[value^="Google"]');
3．普通にボタンを押下するけど、evaluateとか使ってみる。
await page.type('input[title="検索"]', 'PUreatio', { delay: 50 });
await page.evaluate(() => {
let searchBtn = document.querySelector('input[value^="Google"]');
searchBtn.click();
});