はじめに
この記事の内容は、タイトル通りです。
npm install playwright-core でインストールした「playwright-core」で「Codegen」を使います。それと、そこで生成されたコードをユニークなファイル名で保存できるように、ファイル名に年月日などがついたファイル名を出力先に指定した書き出しを行います。
そのようなことを試した際の、メモ的な記事です。
この内容を試したきっかけ
今回の内容を試したきっかけは、以下の 2つの内容です。
playwright-core でインストール済みのブラウザを利用
1つは、playwright-core を使う際に、PCにインストール済みのブラウザをシンプルな記述をして利用するというものです。
●playwright-coreと、PCにインストール済みのChromeやEdgeを使って自動操作する
https://zenn.dev/yusukeiwaki/articles/90bf05c2cf9a90
上記は JavaScript のプログラムで playwright-core を使うものですが、そこで launch({channel: 'chrome', headless: false}) といったように、 channel: '【ブラウザを示す文字列】' というシンプルな指定をして、PC にインストール済みのブラウザを利用しています。
Playwright で Codegen を利用するコマンド
上記の PC にインストール済みのブラウザを利用する記載をキーワードに検索をしていて、 Playwright と Codegen を組み合わせたコマンドで使われた事例が出てきました。
●PlaywrightでChromeを使って操作をレコード(codegen)してみた - 絶壁侍の日記
https://zeppekisamurai.hatenablog.com/entry/2022/02/07/Playwright%E3%81%A7Chrome%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E6%93%8D%E4%BD%9C%E3%82%92%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%28codegen%29%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F
上記の記事では、以下のコマンドで Codegen を使っていました。
playwright codegen --channel 【ブラウザを示す文字列】 【URL】
これらを見て、「playwright-core で同様のことができるか試してみよう」と思ったのが最初のお試しの流れです。
今回のメインの内容
1） playwright-core で Codegen（PC にインストール済みのブラウザを利用）
結果から書くと、PC にインストール済みのブラウザを利用する形で playwright-core と codegen を使うには、以下のコマンドで OK です。
npx playwright-core codegen --channel chrome 【URL】
playwright-core をローカルインストールするため、コマンドに npx をつけています。
Codegen の結果を年月日などがついたファイル名で書き出す
その後、Codegen のオプションなどを見ていて、以下のように外部ファイルへの内容の書き出しができるものを見ました。
npx playwright-core codegen --channel chrome 【URL】 -o 【ファイル名と出力先のパス】
このファイル名指定に関して、「実行ごとにユニークなファイル名にできたら良さそうかも？」というのがあり、それをさらに試しました。
最終的に、以下のコマンドを実行して、想定通りの結果を得ることができました。
（以下は Mac で実行していて、そして結果の出力先は、コマンドを実行したフォルダ直下の「codegen」としています）
npx playwright-core codegen --channel chrome 【URL】 -o ./codegen/code`date +%Y%m%d%H%M%S`.js
ファイル名指定の部分に関して参照した記事
おまけ（？）
JavaScript のプログラムで page.pause() を入れると、そこで Codegen を実行する使い方もできるというのを見かけて、それも playwright-core でやってみました。
const playwright = require("playwright-core");
(async () => {
const browser = await playwright.chromium.launch({ channel: "chrome", headless: false });
const page = await browser.newPage();
await page.goto("【URL】");
await page.pause();
})();
あとは、以下の Inspector が立ち上がっているので、そこで「Record」を押せば記録を開始できます。
