WSL環境でpuppeteerを使ってヘッドレスブラウザを操る
猛烈にスクレイピングしたくなる病気にかかったので、WindowsのWSL2環境＋TypeScriptでpuppeteerを動かしてみました。
WSL2のUbuntuに、インジケーターとフォントのパッケージ＆Chromeをインストールします。
$ sudo apt-get update
$ sudo apt-get install libappindicator1 libappindicator3-1 fonts-liberation
$ curl -O https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
$ sudo dpkg -i google-chrome-stable_current_amd64.deb
$ google-chrome-stable --version
Google Chrome 89.0.4389.114
$ which google-chrome-stable
/usr/bin/google-chrome-stable
続いてpuppeteerをインストールします。後述の手順で必要だったので、puppeteer-coreも入れています。
$ yarn add puppeteer puppeteer-core
$ yarn add -D @types/puppeteer @types/puppeteer-core
どこぞの.tsファイルに下記のようなコードを書きます。chromeのパスを指定しないとエラーが出たので注意。
import * as puppeteer from 'puppeteer-core'
;(async () => {
// WSL環境なせいか、executablePathを指定しないとダメだった
const browser = await puppeteer.launch({
executablePath: '/usr/bin/google-chrome-stable',
// headless: false,
})
const page = await browser.newPage()
try {
// ページを開く
await page.goto('https://blog.ijoru.com/')
// 試しにHTMLをまるっと取得
const html = await page.evaluate(() => {
return document.body.innerHTML
})
console.log(html)
} catch (e) {
console.warn(e)
} finally {
await browser.close()
}
})()
あとは公式ドキュメントとかを参照してpuppeteerの機能を使えば、あんなことやこんなことが出来ちゃいます。グヘヘ。
フォーム入力とかボタン押下も自由自在なんですよ。あなおそろしや。グヘー。
↑のコードではコメントアウトしていますが、headless: trueにするとChromeが開きますので、開発中はtrueにしておくと動作を把握しやすいです。ただし、WSL2環境だとVcXsrvをインストール＆起動しておかないとChromeが開けないので注意。→なんかheadless: falseでもVcXsrvが起動していないと動かなかったので注意
VcXsrvのインストール参考
https://qiita.com/hana_shin/items/4ccf9d53aecd290d2cbb
設定ファイルを使ったVcXsrvの自動起動参考
ちなみに、筆者はjQueryを組み合わせてWebページのスクレイピングを試しています。Node.jsでjQueryを使うのがちょっと面倒だったので、そちらはまた別の機会に。