Playwrightのコード自動生成を試してみる

ryoko hayashi/ 2024年 7月 24日/ 技術 Playwright Python

こんにちは！林です。

Playwrightでテストを自動化するのは、一度作ってしまえばとても楽ですが、
コードを起こすのにはそれなりの工数が必要となります。

今まで使用したことは無かったのですが、
コードの自動生成機能があるようなので、試してみました！

コードの自動生成

Playwrightのコード自動生成機能は、以下のコマンドでブラウザを起動することで実施できます。

npx playwright codegen "http://localhost:8000/"

「Playwright Inspector」とChromiumで開いた上記URLのページが表示されるので、
あとはChromium上で操作をして行くだけです。

以下の操作を実施してみます。

1. ユーザ名とパスワードを入力して、「ログイン」押下
2. 「メニュー1」を開く
3. 「日付項目2」のカレンダーアイコンをクリック
4. 表示されたカレンダーの「27」日をクリック
5. 「リスト3」のドロップダウンリストを開き、項目を選択
6. 「チェック4」のチェックボックスをクリックし、チェックON

Playwright Inspectorにこのようなコードが出力されました。

出力されたコードは、コピーボタンでクリップボードにコピーすることができたり、
「Target」を変更すれば、以下のコードに変換することが可能です。

• Node.js
• Java
• Python
• .NET C#

おわりに

コードの自動生成機能をつかえば、項目名などを調べながら実装するよりも、
かなり早くPlaywrightのテストコードが作成できました！
実プロジェクトへの導入はまだですが、取り入れていきたいと思いました。