以前、E2Eテスト用のツールとしてSeleniumやRobot Frameworkをさわっていました。
Selenium カテゴリーの記事一覧 - メモ的な思考的な
そんな中、最近のメジャーなE2Eテスト用ツールは何だろうと思い調べてみたところ、CypressとPlaywrightがありました。
CypressとPlaywrightのどちらが自分に合っていそうかを調べたところ、以下の記事の比較表に出会いました。
E2Eテストフレームワークはどれを選べばいいんじゃい!
上記記事で記載されていた特徴のうち、気になったのは以下でした。
Playwrightを試してみたくなりましたが、WSL2上にインストールしたPlaywrightが果たして動作するのか、公式ドキュメントには記載がありませんでした。
そこで、WSL2上で試してみたときのメモを残します。
目次
環境
- WSL2上のUbuntu 22.04.1に入れるもの
- Node.js 18.12.1
- Playwright 1.29.1
- Playwright用のコードは、今回はTypeScriptで書く
- 公式ではTypeScript/JavaScriptの他、Python・Java・.NETがサポートされている
- awesome-playwrightによると、RubyやGo・Rustなども非公式ながらサポートされている模様
- Playwright用のコードは、今回はTypeScriptで書く
- Windows11に入れるもの
- Visual Studio Code 1.74.2
セットアップ
インストール
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 と組み合わせて動かすことができました。