手作業と自動化の合せ技！puppeteerを起動中のブラウザで自動操作して開発を楽にする方法

こんにちは。なおしむです。
業務効率化の方法にブラウザの自動操作があります。ブラウザの操作をpuppeteerなどの自動化ツールを利用してプログラミングをして業務を自動的に行えるようにします。
ただ、実際にやってみると、操作をすべてプログラミングで自動化するのは複雑で時間がかかりますよね。とくにWEBサイトへのログインは、二要素認証などもあり実装が大変てす。
なので、私はログインまでは手作業で行い、そこから先の操作だけを自動化することで、開発を省力化しています。100点ではなく70点を目指すイメージです。

これをやるためには、事前に手動作業をしたブラウザに対してpuppeteerを実行する必要があるので、今回はその方法を紹介します。

Chromeをコマンドラインから起動する

まずはChromeを起動します。Chromeは次のコマンドを使って、コマンドラインから立ち上げる必要があります。

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir=remote-profile

重要なのは --remote-debugging-port です。puppeteerからはこのポートを使って接続します。

puppeteerを実行する

続いてpuppeteerを実行します。ここでpuppeteer.connectを利用し、先ほどの--remote-debugging-portの値を渡してあげます。

import puppeteer from 'puppeteer';
// const browser = await puppeteer.launch();
const browser = await puppeteer.connect({
  browserURL: 'http://127.0.0.1:9222',
  defaultViewport: {
    width: 1000,
    height: 1000
  }
});
const page = await browser.newPage();
await page.goto('https://calendar.google.com/calendar?authuser=0');

上記の例では、puppeteerでGoogleカレンダーを表示しています。
通常、Googleカレンダーを表示するにはその前にGoogleへのログインが必要なので、プログラミングで全てを自動化するのは難しいですが、今回の方法を使うとログイン部分のプログラミングが不要になり、開発が楽になります。

まとめ

puppeteerを起動中のブラウザに対して実行する方法を紹介しました。よかったら参考にしてみてください。