WSL에서 GUI 프로그램 실행하는 방법 - WSL에서 Playwright Headed 모드를 너무 사용하고 싶었습니다 ㅠㅜ
안녕하세요. 요즘 테스트 자동화 툴 도입을 진행하면서 Playwright 를 쓰고 있습니다.
회사에서는 ubuntu를 사용하면서 별 문제 없었지만
집에 와서 WSL에서 Playwright를 사용하니 Headed 모드(브라우저가 실행되는) 실행되지 않더라고요 ㅜㅠ
구글을 뒤져보니 영어로 정리된 자료는 있는데 한국어로 정리된 자료가 없어서 이참에 정리해봤습니다.
TL-DR
- WSL2 최신 버전을 사용하면 추가적인 조치 없이 GUI 프로그램 사용할 수 있음!
0. Headed 모드, Headless 모드가 뭐에요?
Headed 모드는 브라우저의 UI가 실행되는 모드이고, Headless 모드는 UI가 실행되지 않는 모드입니다.
혹시 Headless 모드를 사용하는 이유가 궁금하실까요?
UI가 실행되지 않는 Headless 모드를 사용하는 이유는 바로 속도와 효율성 때문입니다.
UI가 실행되지 않기 때문에 실행 속도가 빨라지고, CPU와 메모리도 적게 사용해서 테스트에 사용하기 적합합니다.
그렇다고 Headless 모드가 장점만 있는 것은 아닙니다.
1) Headed 모드와 다르게 동작할 수 있기 때문에 개발자가 직접 검증해봐야 한다는 것과 2) 디버깅이 어려워진다는 단점이 있습니다.
그래서 저는 처음에 테스트 케이스를 작성할 때에는 Headed 모드를 사용하고, 테스트 케이스가 올바르게 동작하는 것을 확인하고 Headless 모드를 사용합니다.
Playwright로 테스트 케이스를 실행할 때 다음과 같이 headed 플래그를 추가해주면 Headed 모드로 실행할 수 있습니다.
- npx playwright test --headed
1. WSL2로 업데이트 하기
윈도우에서 cmd를 열고 다음 명령어들을 입력하여 WSL2로 업데이트 합니다.
wsl --update
wsl --shutdown
WSL의 업데이트가 완료되고 종료되었다면 시작 프로그램에서 사용할 WSL 배포판을 다시 실행시켜줍니다.
- 저는 ubuntu 20.04를 사용하고 있어서 다시 실행시켜줬습니다.
- WSL을 최신 버전으로 사용하지 않을 때
1. WSL에서 Headed 모드가 실행되지 않는 이유가 뭘까요?
리눅스에서 사용자에게 GUI를 보여주기 위해서는 시스템에 window manager와 display server가 실행되고 있어야 합니다.
그리고 나서 GUI 프로그램이 이들과 통신하면서 어떤 요소를 화면에 그릴지 요청합니다.
그런데 모든 GUI 프로그램들이 시스템의 window manager와 display server와 통신해야 한다면 프로그램을 개발하기 너무 어렵겠죠?
이를 해결하기 위해서 정의된 프로토콜을 display server communication protocol이라고 합니다.
대표적인 예시로 X11, Wayland, Mir 프로토콜이 있습니다. 각각의 프로토콜을 구현한 서버, 클라이언트 시스템이 있습니다.
(저는 X11만 사용해봤습니다 ㅎㅎ)
- 참고하면 좋은 링크: https://en.wikipedia.org/wiki/Windowing_system
여기까지 오면 WSL에서 Headed 모드가 실행되지 않은 이유를 유추할 수 있습니다.
WSL에 window manager와 display server가 없다.
=> 설치하면 되는 거 아닌가? 왜 기본으로 설치가 안되어 있지?
=> WSL은 window manager와 display server를 지원하지 않는다.
그러면 어떻게 해야할까요?
WSL이 실행되고 있는 윈도우에 window manager와 display server가 있으면 됩니다!
- 윈도우에 windowing system을 설치하고
- WSL의 GUI 프로그램이 윈도우에 설치된 windowing system으로 연결하도록 설정하면 되는 것이죠
2. 윈도우에 windowing system을 어떻게 설치하죠?
윈도우 windowing system으로 X11을 지원하는 VcXsrv가 있습니다.
https://sourceforge.net/projects/vcxsrv/ 에서 설치 파일을 다운로드 받아서 VcXsrv를 설치해줍니다.
VcXsrv가 설치된 경로에서 xlaunch.exe를 실행해서 다음 설정을 마쳐줍니다.
- 별다른 설정을 하지 않았다면 C:\Program Files\VcXsrv 에 설치되었을 거에요!
1. Multiple windows를 선택하고 다음 버튼을 클릭합니다.
2. Start no client를 선택하고 다음 버튼을 클릭합니다.
3. Disable access control을 추가로 선택하고 다음 버튼을 클릭합니다.
4. 마침 버튼을 클릭해줍니다.
5. 마지막으로 방화벽 설정에서 "홈 네트워크, 회사 네트워크 등의 개인 네트워크"을 추가로 선택하고 액세스 허용 버튼을 클릭해줍니다.
3. 윈도우의 windowing system과 WSL을 연결하는 방법 알려주세요!
3.1. 필요한 패키지 설치
다음 명령어를 이용해서 필요한 패키지들을 설치합니다.
sudo apt install dialog apt-utils libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libgstreamer-plugins-bad1.0-0 gstreamer1.0-libav libenchant1c2a -y
이제 WSL에서 실행되는 GUI 프로그램들이 윈도우에 설치된 VcXsrv로 연결되게 설정해줘야 합니다.
3.2. WSL 설정
WSL에서 bash를 사용하신다면 .bashrc에, zsh을 사용한다면 .zshrc에 다음 명령어들을 추가해줍니다.
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0
sudo /etc/init.d/dbus start &> /dev/null
저는 zsh을 사용해서 .zshrc에 추가했습니다.
sudo 명령어가 있는데 이를 권한 검사 없이 실행하면 nano 편집기가 열립니다.
sudo visudo -f /etc/sudoers.d/dbus
nano 편집기에서 다음 문구를 추가해줍니다.
<your_username> ALL = (root) NOPASSWD: /etc/init.d/dbus
저는 계정명이 ahn이어서 다음과 같이 작성했습니다.
작성을 마쳤으면 Ctrl+X를 누르고, Y를 눌러서 변경사항을 저장합니다.
다음 명령어로 추가한 설정을 적용시켜주면 끝!
source ~/.bashrc # 혹은 source ~/.zshrc
드디어 브라우저가 실행됩니다 ㅜㅠ
playwright를 wsl에서 사용하는 방법을 간단하게 정리해봤습니다 ㅎㅎ
다음에는 이번에 테스트 자동화 툴들을 조사한 내용들을 정리해보겠습니다!