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

こんにちは!林です。

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のテストコードが作成できました!
実プロジェクトへの導入はまだですが、取り入れていきたいと思いました。

About ryoko hayashi

Javaや.NETのWebシステム開発に長く携わってきたのですが、 最近はPythonがほとんど。 数年前にデビューしたC言語はすっかり化石となりました。