Playwrightには画面をポチポチ操作してテストコードを生成する機能があります。
テストコード生成機能の起動方法は3種類あります。
- CLIから起動する方法
- VS codeの拡張機能で「Record new」を使う方法
- VS codeの拡張機能で「Record at cursor」を使う方法
入り口とテストコードの出力先が違うだけでツールとしてはどれも同じです。
1. CLIから起動する方法
下記コマンドでcodegenを起動します。「codegen」が自動生成するツールです。
「demo.playwright.dev/todomvc」はアクセスしたいページになります。
コード生成したいページのURLに適宜変更してください。
npx playwright codegen demo.playwright.dev/todomvcこの方法で起動すると2つのウインドウが開きます。
- コードウインドウ
- ブラウザウインドウ
ブラウザウインドウの操作がコードウインドウに表示されるので
コードウインドウのコードを自分でエディタにコピペします。
URLを指定せずcodegenを起動することもできます。
npx playwright codegen下記のようにブラウザが起動するので、ブラウザを起動した状態からテストしたいページのURLを指定することもできます。
レコーダーのツールバー
レコーダーのツールバーを左から解説します。
- Record
- 操作の記録を開始／停止
- ブラウザ操作をコードとして自動生成するための録画ボタン
- Pick locator（要素選択）
- 画面上の要素をクリックして locator を取得する
- テストコード作成時に超重要
- Show trace / Inspect（目アイコン）
- 実行結果や要素の状態を確認
- UIモードやトレース確認用
- ab（Text locator）
- テキストを基準に locator を取得
getByText()系の操作に対応
- Toggle toolbar / Layout（四角のアイコン）
- 表示レイアウトの切り替え
- パネルの表示・非表示調整
- Open in VS Code / Show code（<> アイコン）
- 生成されたコードをエディタで確認
- テストコードの編集に使う
- Copy（重なった紙のアイコン）
- 生成されたコードをクリップボードにコピー
- Run（▶）
- テスト実行
- Pause（⏸）
- テストの一時停止
- デバッグ時に使用
- Step / Continue（・→の矢印）
- ステップ実行・次のアクションへ進む
- デバッグ補助
- Target: Test Runner（右側プルダウン）
- 操作対象の切り替え
Test Runner/Browserなどを選択
- Settings（⚙️）
- Playwright UI の設定
- 表示・挙動の調整
2. VS codeの拡張機能で「Record new」を使う方法
VS Codeのサイドバーのフラスコアイコンを選択した後
「Record new」をクリックします。
CLIでURLを指定しなかった場合と同じブラウザウインドウが表示されます。
ブラウザウインドウの操作は同じですが、スクリプトの出力先が異なります。
新しいソースコードが「tests」フォルダに生成され、そこにコードが出力されます。
3. VS codeの拡張機能で「Record at cursor」を使う方法
VS Codeのサイドバーのフラスコアイコンを選択した後
「Record at cursor」をクリックすると
CLIでURLを指定しなかった場合と同じブラウザウインドウが表示されます。
「Record new」は新しいソースコードを生成していましたが
「Record at cursor」は現在のカーソル位置にコード追加できます。
テストファイルを予め作成し、途中までコードを書いたあと、続きのコードを生成して欲しいときに
その位置にカーソルを置いて起動して、続きのコードを生成するといった使い方ができます。
まとめ
テストコード生成機能の起動方法を3種類紹介しました。
- CLIから起動する方法
- VS codeの拡張機能で「Record new」を使う方法
- VS codeの拡張機能で「Record at cursor」を使う方法
手っ取り早く使いたい方はCLI
すでに拡張機能をインストール済みの方はVS codeがおすすめです。
自身の環境や用途に応じて使ってみてください。
