Zenn
🔖

WSL2でCypressを動かす

2022/08/15に公開
WSL 2
Cypress
tech

はじめに

WSL2でCypressを立ち上げたときのメモ。環境は以下。

  • Ubuntu20.04
  • Windows11
  • nodejs@v16.6.0
  • npm@v7.19.1
  • cypress@10.4.0

なお、2022/8/15時点の最新のWSL2でLinuxGUIアプリケーションをネイティブでサポートされるようになったようなので、この記事の対応をしなくてもWSLをインストールし直せばWSLからCypressを実行できる可能性がある。

WSL で Linux GUI アプリを実行する | Microsoft Docs

インストール

WSL2上にCypressの依存ライブラリが不足していたので追加してからインストールする。

# dependencies
apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
npm install -D cypress

Introduction | Cypress Documentation

WSL2でcypressを開けるようにする

WSL2はLinuxのGUIアプリケーションを開けないのでXサーバによって開けるようにする必要がある。

VcXsrvをインストール

下記からインストールしてexeファイルを実行
https://sourceforge.net/projects/vcxsrv/

VcXrsvを実行できるように設定

~/.bashrcの先頭に下記を追記

# set DISPLAY variable to the IP automatically assigned to WSL2
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0

下記を実行

source ~/.bashrc
sudo /etc/init.d/dbus start &> /dev/null

Windowsの検索からXLaunchを起動。
Display settings, Client startupはデフォルトのまま進む。
Extra settingsはDisable access controlにチェックを入れて進む。
Windowsセキュリティアラートが出るが、パブリック/プライベートネットワークどちらも許可。

Cypressを実行

npx cypress open

Opening the App | Cypress Documentation

WSL2にGoogleChromeを追加する（おまけ）

WSL2にChromeがインストールされていない場合はCypressのE2EテストでChromeを使用できないため入れる。

sudo apt update && sudo apt -y upgrade && sudo apt -y autoremove
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt -y install ./google-chrome-stable_current_amd64.deb

# WSL上にChromeがインストールされたか確認
google-chrome --version

参考

Setting up the Cypress GUI in WSL2 Ubuntu for Windows 10 | Wilco van Esch
Use Google Chrome in Ubuntu on Windows Subsystem Linux · Scott Spence

GitHubで編集を提案

Discussion