ブラウザを操作してPlaywrightのコードを自動生成する（Node.js／Python）

目次

• ブラウザを操作してPlaywrightのコードを自動生成する
• コード自動生成の実行
• codegenの便利なオプション

Playwrightには、Chromiumブラウザで操作した内容をそのままコードにしてくれる「コードの自動生成機能」があります。

Node.jsとPythonであればPlaywrightがインストールされていれば使用できます。
（C＃には現状機能がないようです。）

Node.jsで作成されるコードは「Playwright Test」で使う自動テスト用のtsファイルですので、
「Playwright Library」をインストールしている場合はそのまま使えませんので、必要なコードを切り貼りしてください。

VSCodeを使ったコード自動生成機能についてはこちらを参考にしてください。

１．以下のコマンドを実行します。

							npx playwright codegen
						

							playwright codegen
						

参考

codegenの実行時にオプション指定することで、自動コード生成時にブラウザに対して色々な条件の変更を行うことができます。

ブラウザ起動時に初期表示するURLの指定

コードを出力するファイルを指定する

ビューポートの指定

コマンド実行時に--viewport-size=800,600を指定すると、指定したビューポートのサイズでブラウザを起動します。

npx playwright codegen --viewport-size=800,600 https://web.biz-prog.net/

モバイル機器をエミュレートする

コマンド実行時に--device="デバイス名"を指定すると、モバイル機器をエミュレートした状態でブラウザが起動します。

npx playwright codegen --device="iPhone 13" https://web.biz-prog.net/

使用できるデバイスは"iPhone 13"以外にも色々あります。
リストはこちらにあります。

ダークモード／ライトモードの指定

タイムゾーンの指定

位置情報の指定

コマンド実行時に--geolocation="経度,緯度"を指定すると、現在地が指定した座標になります。

npx playwright codegen --geolocation="41.890221,12.492348" bing.com/maps

ブラウザ起動後に、現在位置を表示するボタンを押してください。

言語の指定

コマンド実行時に--lang="言語"を指定すると、指定した言語でブラウザが起動します。

npx playwright codegen --lang="en-US" bing.com/maps

CookieとloacalStrageの保存・読み込み

参考