puppeteer-coreとMacにインストール済みのChromeを使って自動操作

いわゆる「ぐぐれかす」をPuppeteerで作って練習したときのメモ

インストール済みのChrome for Macを使うには？

puppeteer標準でChromiumブラウザがくっついてくるが、Chromiumダウンロードめっちゃ時間がかかるので、とりあえず手元にChromeをインストール済みなら、それを使って自動操作をしたい。

puppeteer-core を使って、手持ちのChromeのゲストセッションを開くには？と調べたら、issueで質問 してる人がいて、「公式Docに書いてるでしょ」って書いてたｗ

Macだったら

const launchChrome = puppeteer.launch({
    // MacにインストールされているChromeを使う。
    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
});

これでよさそう。

(2021.08.05 追記) Puppeteer 10.2以降であれば、もっと簡単にかけます！

const launchChrome = puppeteer.launch({
    // MacにインストールされているChromeを使う。
    channel: 'chrome',
});

ゲストセッションを開くには？

デフォルトでゲストセッションが開く？よくわからないけど、なんとなく

const launchChrome = puppeteer.launch({
    // MacにインストールされているChromeを使う。
    channel: 'channel',

    args: [
        // ゲストセッションで操作する。
        "--guest",
    ],
});

こんな感じで指定しておくとよさそう？

普段ブラウザを使うように、ウインドウを開くには？

これは、launchオプションと、pageのsetViewportの両方の指定が必要。

const launchChrome = puppeteer.launch({
    // MacにインストールされているChromeを使う。
    channel: 'chrome',

    // ブラウザ画面を表示しながら（ヘッドレスモードを無効にする）。
    headless: false,

    args: [
        // ゲストセッションで操作する。
        "--guest",

        // ウインドウサイズをデフォルトより大きめに。
        '--window-size=1280,800',
    ],
});

launchChrome.then(async (browser) => {
    // 大抵のサンプルコードはここで単純に browser.newPage() しているだけのものが多いが、
    // ブラウザを開いたときにすでに１つタブが開いている場合には、２つ目のタブが開いてしまう。
    // それを防ぐため、すでにタブが開いている場合にはそれを使うようにする。
    const page = (await browser.pages())[0] || (await browser.newPage());

    await page.setViewport({ width: 1280, height: 800 });

})

デフォルトだと、ウインドウサイズが少し小さい。なので、1280x800に指定している。

あと、多くのサンプルコードでは無造作に browser.newPage() しているが、自分の場合にはなぜかタブが２つ開いてしまったので、すでにタブが開いていたらそれを使うようなロジックにしてみた。

キーボードの打鍵速度を人間味のあるスピードにするには？

全体的にゆっくりめに操作をしたい場合

puppeteer.launch() に slowMo オプションを指定すれば良い。
体感的には、50〜100くらいを指定するのがよさそう。

一部の操作だけゆっくりめに操作したい場合

page.click や page.type などのメソッドには delay オプションがある。

たとえば、先の「ぐぐれかす」で、検索キーワード入力部分に delay: 200 (5キー/sec)を指定すると

await page.type("input[name='q']", searchKeyword, { delay: 200 });

こんなかんじで、ゆっくりキーワードが入力される。

まとめ

基本的な操作方法はぐぐればでてくるし、 api.md みればAPI仕様もシンプルにわかる。
なんだけど、puppeteerはChromiumブラウザのダウンロードが遅い!!ので、puppeteer-coreと手持ちのChromeを使ってサクッと自動操作する方法をまとめてみました。

ソースコードは↓にまとめてあります。
https://github.com/YusukeIwaki/ggrks-puppeteer