Playwrightのインストール
Published:
本記事は「 Playwrightのあるきかた ～ゼロから始めるE2Eテスト～」第2章を加筆修正したものになります。
ネイティブ環境で使用する場合
ネイティブ環境では前提条件として、Node.jsバージョン18以上のインストールが必要です。Node.jsがインストールされていれば、npm initコマンドでPlaywrightのインストールができます。
npm init playwright@latest
インストール中いくつかのオプションを聞かれます。
インストールオプション
Do you want to use TypeScript or JavaScript?
TypeScriptとJavaScriptのどちらを使うか。デフォルトはTypeScriptです。
Where to put your end-to-end tests?
E2Eテストのプログラムを保存するディレクトリ名。デフォルトはtests、すでにtestsがある場合はe2eになります。
Add a GitHub Actions workflow?
GitHub Actionsワークフローを追加するか。デフォルトは追加しません。
Install Playwright browsers?
Playwrightが使うウェブブラウザをインストールするか。デフォルトはインストールします。
あとからインストールするには、installコマンドを使用します。
npx playwright install
ウェブブラウザのインストール先
| プラットフォーム | インストール先 |
|---|---|
| Windows | %USERPROFILE%\AppData\Local\ms-playwright |
| MacOS | ~/Library/Caches/ms-playwright |
| Linux | ~/.cache/ms-playwright |
Install Playwright operating system dependencies?
システム依存関係をインストールするか。デフォルトはインストールしません。
パッケージマネージャーを使用して画像や動画などのマルチメディア関連のライブラリ、フォントライブラリなどがインストールされます。そのためroot権限が必要です。
参考までに真っさらなUbuntu 20.04.6 LTS環境で実行した場合、以下の208パッケージがインストールされました。
The following NEW packages will be installed:
adwaita-icon-theme dictionaries-common emacsen-common ffmpeg fontconfig fontconfig-config fonts-ipafont-gothic fonts-liberation fonts-noto-color-emoji
fonts-tlwg-loma-otf fonts-ubuntu fonts-wqy-zenhei gtk-update-icon-cache hicolor-icon-theme humanity-icon-theme hunspell-en-us libaom0 libaspell15 libass9 libasyncns0
libatk-bridge2.0-0 libatk1.0-0 libatk1.0-data libatomic1 libatspi2.0-0 libavahi-client3 libavahi-common-data libavahi-common3 libavc1394-0 libavcodec58 libavdevice58
libavfilter7 libavformat58 libavresample4 libavutil56 libbluray2 libbs2b0 libcaca0 libcairo-gobject2 libcairo2 libcdio-cdda2 libcdio-paranoia2 libcdio18
libchromaprint1 libcodec2-0.9 libcolord2 libcups2 libdatrie1 libdbus-glib-1-2 libdc1394-22 libdrm-amdgpu1 libdrm-intel1 libdrm-nouveau2 libdrm-radeon1 libegl-mesa0
libegl1 libenchant-2-2 libenchant1c2a libepoxy0 libevdev2 libfftw3-double3 libflac8 libflite1 libfontconfig1 libfontenc1 libgbm1 libgdk-pixbuf2.0-0
libgdk-pixbuf2.0-common libgl1 libgl1-mesa-dri libglapi-mesa libgles2 libglvnd0 libglx-mesa0 libglx0 libgme0 libgomp1 libgraphite2-3 libgsm1 libgtk-3-0
libgtk-3-common libharfbuzz-icu0 libharfbuzz0b libhunspell-1.7-0 libhyphen0 libice6 libiec61883-0 libjack-jackd2-0 libjbig0 libjpeg-turbo8 libjpeg8 liblcms2-2
liblilv-0-0 libllvm12 libmp3lame0 libmpg123-0 libmysofa1 libnorm1 libnotify4 libopenal-data libopenal1 libopengl0 libopenjp2-7 libopenmpt0 libopus0 libpango-1.0-0
libpangocairo-1.0-0 libpangoft2-1.0-0 libpciaccess0 libpgm-5.2-0 libpixman-1-0 libpostproc55 libpulse0 libraw1394-11 librest-0.7-0 librsvg2-2 librsvg2-common
librubberband2 libsamplerate0 libsdl2-2.0-0 libsecret-1-0 libsecret-common libsensors-config libsensors5 libserd-0-0 libshine3 libsm6 libsnappy1v5 libsndfile1
libsndio7.0 libsord-0-0 libsoup-gnome2.4-1 libsoxr0 libspeex1 libsratom-0-0 libssh-gcrypt-4 libswresample3 libswscale5 libthai-data libthai0 libtheora0 libtiff5
libtwolame0 libva-drm2 libva-x11-2 libva2 libvdpau1 libvidstab1.1 libvorbisenc2 libvpx6 libvulkan1 libwavpack1 libwayland-client0 libwayland-cursor0 libwayland-egl1
libwayland-server0 libwebp6 libwebpdemux2 libwebpmux3 libwoff1 libx11-xcb1 libx264-155 libx265-179 libxaw7 libxcb-dri2-0 libxcb-dri3-0 libxcb-glx0 libxcb-present0
libxcb-render0 libxcb-shape0 libxcb-shm0 libxcb-sync1 libxcb-xfixes0 libxcomposite1 libxcursor1 libxdamage1 libxfixes3 libxfont2 libxi6 libxinerama1 libxkbcommon0
libxkbfile1 libxmu6 libxpm4 libxrandr2 libxrender1 libxshmfence1 libxss1 libxt6 libxtst6 libxv1 libxvidcore4 libxxf86vm1 libzmq5 libzvbi-common libzvbi0
ocl-icd-libopencl1 ttf-ubuntu-font-family ttf-unifont ubuntu-mono x11-common x11-xkb-utils xfonts-cyrillic xfonts-encodings xfonts-scalable xfonts-utils
xserver-common xvfb
0 upgraded, 208 newly installed, 0 to remove and 0 not upgraded.
あとからインストールするには、install-depsコマンドを使用します。
sudo npx playwright install-deps
インストール時に作成されるファイル
- playwright.config.js
- テスト構成ファイル
- tests/example.spec.js
- テストサンプルコード
- tests-examples/demo-todo-app.spec.js
- ToDoアプリを想定した、より具体的なテストサンプルコード
Docker環境で使用する場合
公式Dockerイメージは、 Microsoft Artifact Registryに公開されています。このイメージにはウェブブラウザと、システム依存関係が含まれています。
docker pullコマンドでイメージをpullします。
docker pull mcr.microsoft.com/playwright:latest
Playwright本体は含まれていないため、「2.1 ネイティブ環境で使用する場合」を参考に別途インストールしてください。ウェブブラウザとシステム依存関係はイメージに含まれているので、インストールする必要はありません。
準備が整ったら、docker runコマンドで実行できます。
docker run -it --rm --ipc=host -v ${PWD}:/app mcr.microsoft.com/playwright:latest node app/test.js
Playwrightのアップデート
Playwright本体のアップデートは、次のコマンドになります。
npm install -D @playwright/test@latest
ウェブブラウザとシステム依存関係のアップデートは、次のコマンドになります。
sudo npx playwright install --with-deps