WSL2에 Cypress 설치하기

E2E 테스트를 위해 WSL2에 Cypress를 설치하는 과정에서 벌어졌던 일

Mac 환경에서는 Cypress 설치 후에 yarn cyrpess open을 실행하면 Launchpad가 잘 실행되지만, WSL2 상에서 해당 명령어를 입력하면 Launchpad가 전혀 뜨지 않는다. 윈도우를 망치로 뿌술까 생각했지만, WSL2 상에서도 실행할 수 있는 방법을 찾아냈고, 해결하는 방법을 써보도록 하겠다.

cypress 설치

우선 공식문서에 나와있는대로 설치하고, 실행해본다.

yarn add cypress --dev
yarn cypress open

첫번째로, 다음과 같은 에러가 발생한다.

ERROR (1) Error: spawn Xvfb ENOENT

Your system is missing the dependency: Xvfb

Install Xvfb and run Cypress again.

Read our documentation on dependencies for more information:

https://on.cypress.io/required-dependencies

If you are using Docker, we provide containers with all required dependencies installed.

----------

Error: spawn Xvfb ENOENT

----------

Platform: linux-x64 (Ubuntu - 22.04)
Cypress Version: 12.4.1

해당 에러는 Xvfb가 설치되어 있지 않아 발생하는 문제인 듯 하다. 아래 명령어를 입력해주자.

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

그리고 다시 yarn cypress open을 실행하면 아래와 같은 오류가 발생하면서 Launchpad가 팝업되지 않는다.

ERROR (2) ERROR:gpu_memory_buffer_support_x11.cc dri3 extension not supported

해결 방법은 아래와 같다.

VcXsrv 설치

Linux 서브시스템에서 Launchpad와 같은 GUI를 표시하려면 X-server가 필요한 모양이다. 여기서 X-server란 로컬 또는 분산 네트워크에서 X Window 시스템에서 실행되는 X 터미널을 연결하는 서버 프로그램이라고 한다. 내가 찾은 솔루션에서는 VcXsrv를 설치해주었다.

위 링크에 들어가서 설치해준다. 세팅은 Multiple windows와 Start no client를 선택해주고, Extra settings에서 Disable access control을 체크해준다.

.zshrc(혹은 .bashrc)에서 환경변수 설정

wsl2 환경에 접속하여 .zshrc 파일에 아래와 같이 추가해준다.

vim ~/.zshrc

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

echo $DISPLAY를 터미널에 입력했을 때, 192.168.64.1:0.0와 같은 IP주소가 출력되면 환경변수가 잘 설정된 것이다.

그리고 .zshrc에 아래와 같이 한 줄 더 추가해준다.

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

방화벽 설정

윈도우에서 제어판 -> 시스템 및 보안 -> Windows Defender 방화벽으로 이동해 고급 설정에 들어간다. 거기서 인바운드 규칙을 클릭하고 새 규칙을 아래와 같이 만들어준다.

(1) 프로그램 선택

(2) vcxsrv.exe의 경로 넣어주기

(3) 연결허용 선택

(4) 도메인, 개인, 공용 모두 체크

(5) 이름은 본인이 알아볼 수 있게 정한다.

그리고 나서 WSL2에서 yarn cypress open을 입력하면 Launchpad가 아래와 같이 잘 뜨는 것을 확인할 수 있다.

참고

• https://shouv.medium.com/how-to-run-cypress-on-wsl2-989b83795fb6
• https://nickymeuleman.netlify.app/blog/gui-on-wsl2-cypress