Puppeteerで操作する前に手動で何かしらの操作をしてから操作したいというパターンのためのメモ
Chromeの起動
コマンドラインからChromeを立ち上げる
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir=remote-profile
例はWindowsの場合
Macの場合も実行ファイルのパスが変わるだけ
その際に--remote-debugging-portオプションを渡してあげるとPuppeteerから接続可能になる
- puppeteerのコード
(async() => { const browser = await puppeteer.connect({ browserURL: 'http://127.0.0.1:9222', defaultViewport: { width: 1000, height: 1000 } }); const pageList = await browser.pages(); const page = pageList[0]; await page.bringToFront(); ..... ..... ..... ..... ..... })
これだけ
puppeteer.connectですでに立ち上がっているブラウザへ接続
browser.pages()でタブのリストを取得し、（例のコードだと）1つ目のタブを指定してbringToFront()でアクティブなタブにする
後は普段と同じようにpage.~~~とコードを書けば良い
使いどころ
たとえばログイン処理がどうしても自動化できない場合や、一部手動でブラウザ操作する必要がある場合などには使える
またブラウザが立ち上がっているので操作の流れを実際に見ながら確認できる
デバッグしながら開発したい場合にも使えると思う
プロファイル
Chrome起動時に渡しているオプションの--user-data-dirでプロファイルの指定的なことを行っているよう
2回目以降の起動時にログイン情報などを引き継ぎたい場合はこの値を同じにすれば良い
蛇足
WindowsでChromeを起動してWSLからアクセスとかはできなかった（自分の力では）
WSLとWindows間でファイルパスの扱いをうまく解決できず…
