Zenn
🎭

Playwrightの環境をVS codeで作成する

2022/04/17に公開
Playwright
E2E
testing
tech

▮Playwright

E2Eのテストフレームワークである。
https://playwright.dev/

▮前提条件

環境

  • VS code： 1.66.2 (user setup)
  • Node.js: 16.13.0
  • OS: Windows_NT x64 10.0.18363

インストールするバージョン

  • Playwright： Version: 1.21
  • Playwright Test for VSCode： v0.2.3

▮1. VS codeに"Playwright Test for VSCode"をインストールする

操作

  1. [VS code]拡張機能 > "Playwright"で検索 > "Playwright Test for VSCode" を選択 > インストール でインストールする。

※ https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright よりインストールも可能である。

確認

  1. [VS code]アンインストール となってることを確認する。

▮2. Playwright用のフォルダを作成する

  1. [OS]C:\ に"Playwright_sample"というディレクトリを作成する。
  2. [VS Code]ファイル > フォルダーを開く > "Playwright_sample"を選択 > フォルダーの選択をする。

確認

  1. "Playwright_sample"のフォルダが表示を確認する。

▮3. Playwrightをインストールする。

操作

  1. 表示 > コマンドパレット > "Install Playwright"を検索 > Install Playwrightを選択 > OKをクリックする。

確認

  1. [ターミナル]npm init playwright@latest -- --quiet --browser=chromium --browser=firefox --browser=webkitのコマンドが自動で実行されて、以下の出力を確認する。
PS C:\Playwright_sample> npm init playwright@latest -- --quiet --browser=chromium --browser=firefox --browser=webkit
...
✔ Success! Created a Playwright Test project at C:\Playwright_sample
Inside that directory, you can run several commands:
...
Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! �
PS C:\Playwright_sample>

※途中は省略する。

以下のWARNが表示されても問題はない。

npm WARN Playwright_sample@1.0.0 No description
npm WARN Playwright_sample@1.0.0 No repository field.

▮4. サンプルのテストを実行する

操作

  1. [ターミナル]以下のコマンドを実行する。
npx playwright test

確認

  1. [ターミナル]以下の出力を確認する。
PS C:\Playwright_sample> npx playwright test

Running 75 tests using 3 workers
  Slow test file: [webkit] › example.spec.ts (2m)
  Slow test file: [firefox] › example.spec.ts (1m)
  Slow test file: [chromium] › example.spec.ts (46s)
  Consider splitting slow test files to speed up parallel execution

  75 passed (2m)

To open last HTML report run:

  npx playwright show-report

PS C:\Playwright_sample>

▮5. テスト結果（レポート）を確認する

操作

  1. [ターミナル]以下のコマンドを実行する。
npx playwright show-report

※ playwright-report\index.htmlをOpen With Live Server（Alt+L）でも可能である。

確認

  1. [ブラウザ]ブラウザが起動して、テスト結果の表示を確認する。

▮6. テスト結果を表示するサーバーを停止する

操作

  1. [ターミナル]以下の出力を確認する。
PS C:\Playwright_sample> npx playwright show-report

  Serving HTML report at http://127.0.0.1:9323. Press Ctrl+C to quit.

  1. [ターミナル]Cntl+Cのキーを押下する。

  2. [ターミナル]以下の出力を確認する。

^Cバッチ ジョブを終了しますか (Y/N)?
  1. [ターミナル]yを入力する。

確認

  1. [ターミナル]以下の出力を確認する。
  Serving HTML report at http://127.0.0.1:9323. Press Ctrl+C to quit.
^Cバッチ ジョブを終了しますか (Y/N)? y
PS C:\Playwright_sample>

今回のPlaywrightインストール後のファイル構成

C:\Playwright_sample
│  .gitignore
│  package-lock.json
│  package.json
│  playwright.config.ts
├─node_modules
│     ...   
├─playwright-report
│      index.html
│      
└─tests
        example.spec.ts

※node_modulesは多いので省略する。

Discussion