🪟

WindowsでPlaywrightが動作する環境を整える

に公開

Windows環境に対して、Playwrightを利用するためのインストール手順を備忘録としてここに残します。

WSL2のインストール

本記事では、WSL2を利用して、WindowsにLinuxをインストールさせ、Linux上にPlaywrightが動作する環境を構築していきます。
まずは、Microsoft公式サイトを参考に、WSL2をインストールします。
https://learn.microsoft.com/ja-jp/windows/wsl/install

最初に、Powershellを管理者権限で実行し、以下のコマンドでWSLをインストールします。

wsl --install

そして、WSLを反映させるため、PCを再起動します。

Linuxのインストール

Linuxディストリビューションのインストール

次に、Linuxのインストールですが、事前に以下のコマンドで、インストール可能なディストリビューションを確認します。

wsl -l -o

インストール可能なディストリビューションを確認できたら、以下のコマンドで希望のディストリビューションをインストールします。
ここでは例として、「Ubuntu」を選択します。

wsl --install Ubuntu

ネットワークの設定

ネットワークが初期値のままでは、速度が遅いこともあるので、DNSサーバーを変更します。

WSL設定ファイルの変更

まず、/etc/wsl.confファイルに、以下の内容を追記します。

[network]
generateResolvConf = false

名前解決設定ファイルの変更

次に、名前解決設定ファイルのシンボリックリンクを解除します。

ls -al /etc/resolv.conf
sudo unlink /etc/resolv.conf
ls -al /etc/resolv.conf

そして、以下の内容を記載した、/etc/resolv.confファイルを作成します。

nameserver 8.8.8.8
nameserver 8.8.4.4
# ネットワーク状況によって、必要があれば他のDNSサーバーのIPを追記する

最後に、以下のコマンドでLinuxを再起動し、設定を反映させます。

wsl --shutdown

Node.jsのインストール

そしてMicrosoft公式サイトを参考に、Playwright実行に欠かせない、Node.jsをインストールします。
https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl

Node.jsのバージョン管理ライブラリのインストール

Linuxを再度起動したら、以下のコマンドでNode.jsのバージョン管理ライブラリをインストールします。

sudo apt-get install curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
# nvmがインストールされたかを確認します
command -v nvm

もし、nvmの文言が表示されない場合には、Linuxを再起動して、再度nvmがインストールされているかを確認します。

Node本体のインストール

次に、Node本体をインストールします。

nvm install --lts
nvm install node
nvm ls
node --version
npm --version

Playwrightのインストール

続いて、Playwrightをインストールします。
Linux環境では、Mac環境と違って、インストールに足りないモジュールがいくつかあるので、依存パッケージを解決しながらインストール作業を行います。

npx playwright install-deps --dry-run
npx playwright install-deps
npx playwright install

最後に、Playwrightの動作確認を行い、インストール作業は完了です。

# ブラウザを起動して、動作検証を行います
npx playwright test --quiet --headed

以上、Windows環境へのPlaywrightのインストール手順でした。

Discussion