【Playwright】E2EツールのPlaywrightについて～入門編～
では、「座学編」に続いて、入門編ということで、実際Playwrightのインストールからレポートの表示までを実践していきます！
公式にも書いてありますが、めちゃくちゃ簡単なのです（笑
あと、Playwrightの便利機能を紹介していきますので、コーディングできない or 苦手な方も実践してみてくださいね！
環境
- Windows(10)
- Nodejs(v20.14.0)
- npm(10.7.0)
事前準備
- Nodejsのインストール
- インストール手順
手順
作業フォルダの作成
コマンドプロンプトを開いて、以下のコマンドを実行して、作業フォルダを作成してください。
mkdir playwright_sample
cd playwright_sample
Playwrightのインストール
以下のコマンドを実行してPlaywrightをインストールします。
※今回はnpmで実行していますが、yarn・pnpmでも実行できます
npm init playwright@latest
コマンドを実行すると、↓を聞かれるので任意で設定していきます。
- 使用する言語はTS or JS？
- 本記事では、TypeScript
? Do you want to use TypeScript or JavaScript? ...
> TypeScript
JavaScript
- testシナリオを配置するフォルダは？
- 本記事では、デフォルト
? Where to put your end-to-end tests? » tests
- Github Actionsのワークフローは追加する？
- 本記事では、デフォルト
? Add a GitHub Actions workflow? (y/N) » false
- Playwrightブラウザをインストールする？
- 本記事では、デフォルト
? Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) » true
インストールが終わるまでしばし待つ・・・・。
フォルダ構成
インストールが完了すると以下のようなファイルが配置されます。
playwright.config.ts
package.json
package-lock.json
tests/
example.spec.ts
tests-examples/
demo-todo-app.spec.ts
Playwrightの実行
インストール後にサンプルコードも生成されるので、以下のコマンドを実行してテストを動かします。
※npxになっていることに注意
npx playwright test
実行結果の表示
テストが環境したら、以下のコマンドを実行してレポートを表示できます。
また、テストが失敗した場合は自動でレポートが表示されます。
npx playwright show-report
↓こんな形でレポートが出力されます。
Playwrightの便利機能
以下の機能を利用することで、コーディングできない or 苦手な方もとっつきやすくなると思います！（笑）
レコーディング機能
Playwrightは基本的にTypeScriptでコードを記載していくことになりますが・・・。
以下のコマンドを実行することで、操作を記録しコードに起こしてくれる機能があります。
npx playwright codegen {url}
※「{url}」の部分は任意で、入力がないとブランクでブラウザが起動します
↓のような画面たちが起動して、操作をするとコードが蓄えられます。
意味ないクリックとかも記録しちゃうので、最終的に調整が必要です・・・。
Playwrightブラウザ
Playwrightのブラウザが立ち上がり、その中で「テスト実行」や「画面要素の確認」などが行えます。
Chromeの開発者モードに近い機能がある印象です。
npx playwright test --ui
↓のような画面が起動します。
あとがき
Playwrightは公式の情報も手厚くてよいですねぇ。
英語ですけど・・・サンプルも多いので、翻訳でなんとかなるところも多いかもです。
次はちょっと踏み込んで、よく使いそうな関数の紹介をしようと考えています！
関連記事
- 【Playwright】E2EツールのPlaywrightについて～座学編～
- 【Playwright】E2EツールのPlaywrightについて～関数編～
- 【Playwright】E2EツールのPlaywrightについて～関数編２～
Github
記事に合わせたサンプルコード
Discussion