WSL2上にインストールしたPlaywrightを、Visual Studio Codeから動かしてみた

以前、E2Eテスト用のツールとしてSeleniumやRobot Frameworkをさわっていました。
Selenium カテゴリーの記事一覧 - メモ的な思考的な

 
そんな中、最近のメジャーなE2Eテスト用ツールは何だろうと思い調べてみたところ、CypressとPlaywrightがありました。

CypressとPlaywrightのどちらが自分に合っていそうかを調べたところ、以下の記事の比較表に出会いました。
E2Eテストフレームワークはどれを選べばいいんじゃい!

上記記事で記載されていた特徴のうち、気になったのは以下でした。

  • 自分のブラウザ操作を記録してコードを生成できるのが非常に魅力的
  • 試験的機能としてUIフレームワークコンポーネントをテストできる
  • 公式がVSCode拡張機能を出している
  • Microsoft製でゼロコストでTypeScript対応可能
  • プラグインなしでVisual Regression Test(以下VRT)が可能
  • テストが失敗したときにtraceファイルを出力でき、traceファイルには以下のデータが含まている

E2Eテストフレームワークはどれを選べばいいんじゃい!

 
Playwrightを試してみたくなりましたが、WSL2上にインストールしたPlaywrightが果たして動作するのか、公式ドキュメントには記載がありませんでした。

そこで、WSL2上で試してみたときのメモを残します。

 
目次

 

環境

 

セットアップ

インストール

Playwrightのドキュメントに従いインストールします。
Installation | Playwright

$ npm init playwright@latest
Need to install the following packages:
  create-playwright@1.17.124
Ok to proceed? (y) y
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'

 
途中で対話形式になります。今回は以下の通りの設定としました。

✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · e2e
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
✔ Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo npx playwright install-deps')? (y/N) · false

 
入力が終わると、インストールが継続・完了します。

Initializing NPM project (npm init -y)…
...
Inside that directory, you can run several commands:

  npx playwright test
    Runs the end-to-end tests.

  npx playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  npx playwright test example
    Runs the tests in a specific file.

  npx playwright test --debug
    Runs the tests in debug mode.

  npx playwright codegen
    Auto generate tests with Codegen.

We suggest that you begin by typing:

    npx playwright test

And check out the following files:
  - ./e2e/example.spec.ts - Example end-to-end test
  - ./tests-examples/demo-todo-app.spec.ts - Demo Todo App end-to-end tests
  - ./playwright.config.ts - Playwright Test configuration

Visit https://playwright.dev/docs/intro for more information. ✨

 

動作確認

インストールでは、Playwrightを動かすためのサンプルコードも作成されます。

インストール直後の状態で動作するか、動作を確認してみたところ、エラーで落ちました。

$ npx playwright test

Running 1 test using 1 worker
  1) [Google Chrome] › example.spec.ts:3:5 › homepage has title and links to intro page ============

    browserType.launch:
    ╔══════════════════════════════════════════════════════╗
    ║ Host system is missing dependencies to run browsers. ║
    ║ Please install them with the following command:      ║
    ║                                                      ║
    ║     sudo npx playwright install-deps                 ║
    ║                                                      ║
    ║ Alternatively, use apt:                              ║
    ║     sudo apt-get install libatk1.0-0\                ║
    ║         libatk-bridge2.0-0\                          ║
    ║         libcups2\                                    ║
    ║         libatspi2.0-0\                               ║
    ║         libxcomposite1\                              ║
    ║         libxdamage1\                                 ║
    ║         libxfixes3\                                  ║
    ║         libxrandr2\                                  ║
    ║         libgbm1\                                     ║
    ║         libxkbcommon0\                               ║
    ║         libpango-1.0-0\                              ║
    ║         libcairo2\                                   ║
    ║         libasound2                                   ║
    ║                                                      ║
    ║ <3 Playwright Team                                   ║
    ╚══════════════════════════════════════════════════════╝

 

不足しているパッケージの追加

エラーメッセージにあるように、パッケージが不足しているようです。

そのため、エラーメッセージのままのコマンドを実行すると、別のエラーになりました。

$ sudo npx playwright install-deps
sudo: npx: コマンドが見つかりません

 
issueの記載に従い --dry-run オプション付き・sudoなしで実行してみると、動作しました。
[BUG] Unable to run playwright scripts on Jenkins · Issue #12190 · microsoft/playwright

$ npx playwright install-deps --dry-run
sudo -- sh -c "apt-get update&& apt-get install -y --no-install-recommends libasound2 libatk-bridge2.0-0 libatk1.0-0 libatspi2.0-0 libcairo2 libcups2 libdbus-1-3 libdrm2 libgbm1 libglib2.0-0 libnspr4 libnss3 libpango-1.0-0 libwayland-client0 libx11-6 libxcb1 libxcomposite1 libxdamage1 libxext6 libxfixes3 libxkbcommon0 libxrandr2 xvfb fonts-noto-color-emoji fonts-unifont libfontconfig1 libfreetype6 xfonts-cyrillic xfonts-scalable fonts-liberation fonts-ipafont-gothic fonts-wqy-zenhei fonts-tlwg-loma-otf fonts-freefont-ttf ffmpeg libcairo-gobject2 libdbus-glib-1-2 libgdk-pixbuf-2.0-0 libgtk-3-0 libpangocairo-1.0-0 libx11-xcb1 libxcb-shm0 libxcursor1 libxi6 libxrender1 libxtst6 libenchant-2-2 gstreamer1.0-libav gstreamer1.0-plugins-bad gstreamer1.0-plugins-base gstreamer1.0-plugins-good libicu70 libegl1 libepoxy0 libevdev2 libffi7 libgles2 libglx0 libgstreamer-gl1.0-0 libgstreamer-plugins-base1.0-0 libgstreamer1.0-0 libgudev-1.0-0 libharfbuzz-icu0 libharfbuzz0b libhyphen0 libjpeg-turbo8 liblcms2-2 libmanette-0.2-0 libnotify4 libopengl0 libopenjp2-7 libopus0 libpng16-16 libproxy1v5 libsecret-1-0 libsoup2.4-1 libwayland-egl1 libwayland-server0 libwebpdemux2 libwoff1 libxml2 libxslt1.1 libx264-163 libatomic1 libevent-2.1-7"

 
sudoなしで動作しそうなので、試してみたところインストールができました。

$ npx playwright install-deps
...

 
なお、インストール中にサービスの再起動メッセージが表示されましたので、デフォルトで選択されている内容で 了解 としました。

┌────┤ Daemons using outdated libraries ├─────┐
│                                             │
│                                             │
│ Which services should be restarted?         │
│                                             │
│    [ ] ModemManager.service                 │
│    [ ] networkd-dispatcher.service          │
│    [*] packagekit.service                   │
│    [*] polkit.service                       │
│    [ ] unattended-upgrades.service          │
│                                             │
│                                             │
│          <了解>            <取消>

 

再度動作確認

不足していたパッケージの追加ができたため、再度動作確認したところ、テストがパスしました。

$ npx playwright test

Running 1 test using 1 worker

  1 passed (3s)

To open last HTML report run:

  npx playwright show-report

 

Visual Studio Code から Playwright を動かす

Playwright公式で、Visual Studio Code向けの拡張機能が提供されています。
Getting started - VS Code | Playwright

そこで、拡張機能の使い勝手を試してみることにしました。

 
まずは、拡張機能をインストールします。

次に、WSL2のターミナル上でインストール直後に自動生成されたディレクトリへ移動し、 code .Visual Studio Code を開きます。

すると、Windows側でVisual Studio Code が開きます。

 
拡張機能をインストールしていると Testing が追加されています。その Testing をクリックすると、テストコードが表示されます。

 
テストコードには実行ボタンやデバッグ実行ボタンが表示されています。

試しに、テストコード上にブレークポイントを置いて実行してみたところ、ブレークポイントのところで止まりました。

 
次に、左ペインの Show browser にチェックを入れてデバッグ実行してみます。

 
すると、ブラウザ (Chromium) が起動してテストが進み、ブレークポイントのところでブラウザの動作が停止しました。

 
以上より、WSL2上にPlaywrightをインストールしても、Visual Studio Code と組み合わせて動かすことができました。