Playwright｜画面ポチポチコード生成ツールの使い方

Playwrightには画面をポチポチ操作してテストコードを生成する機能があります。

テストコード生成機能の起動方法は3種類あります。

入り口とテストコードの出力先が違うだけでツールとしてはどれも同じです。

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（要素選択）
- 要素選択のコードを生成する
- 生成したコードは別ウインドウに出力する。テストコードには出力しない
Assert visibility （目アイコン）
- 検証コードを生成
- 選択してからブラウザで要素を選択すると
  その要素が表示されたか検証するコードを出力する
  - .toBeVisible()
Assert Text（abアイコン）
- 検証コードを生成
- 選択してからブラウザで要素を選択するとテキストボックスが表示される
- 選択した要素に、テキストボックスに入力したテキストが
  含まれるか検証するコードを出力する
Assert value（四角のアイコン）
- 検証コードを生成
- 選択してからブラウザでテキストボックスを選択すると
  その要素の値を検証するコードを生成する
Assert Snapshot（<> アイコン）
- 検証コードを生成
- 公式ドキュメント：https://playwright.dev/docs/api/class-snapshotassertions
Copy（重なった紙のアイコン）
- 生成されたコードをクリップボードにコピー
Run（▶）
- テスト実行
Pause（⏸）
- テストの一時停止
- デバッグ時に使用
Step / Continue（・→の矢印）

VS Codeのサイドバーのフラスコアイコンを選択した後
「Record new」をクリックします。

CLIでURLを指定しなかった場合と同じブラウザウインドウが表示されます。

ブラウザウインドウの操作は同じですが、スクリプトの出力先が異なります。
新しいソースコードが「tests」フォルダに生成され、そこにコードが出力されます。

VS Codeのサイドバーのフラスコアイコンを選択した後
「Record at cursor」をクリックすると
CLIでURLを指定しなかった場合と同じブラウザウインドウが表示されます。

「Record new」は新しいソースコードを生成していましたが
「Record at cursor」は現在のカーソル位置にコード追加できます。

テストファイルを予め作成し、途中までコードを書いたあと、続きのコードを生成して欲しいときに
その位置にカーソルを置いて起動して、続きのコードを生成するといった使い方ができます。

テストコード生成機能の起動方法を3種類紹介しました。

手っ取り早く使いたい方はCLI
すでに拡張機能をインストール済みの方はVS codeがおすすめです。
自身の環境や用途に応じて使ってみてください。