playwright ui 모드 분석 - 1. 개요

🦍 개요

사내에서 playwright를 도입해 e2e 테스트 자동화 시스템을 성공적으로 구축했습니다. 특히 playwright에서 제공하는 UI 모드를 주로 활용하여 테스트 케이스를 실행하고, 검증하고 실제로 발생한 버그들을 찾아낼 수 있었습니다. 하지만, UI모드와 관련돼 아쉬운 부분 또한 존재했습니다.

"UI 모드에서 여러 테스트 케이스를 선택해서 한 번에 실행할 수는 없을까?"

 

모든 테스트 케이스를 일괄로 실행시켜 품질을 점검할 수 있으나, 때때로는 일부 테스트 케이스만 선택해 실행시킬 필요가 있습니다. 하지만 playwright에서 제공하는 UI모드는 아직 이 기능을 지원하지 않고 있습니다. 이에 따른 불편함을 해소하고자 직접 기능을 분석하고, 필요한 기능을 더해보고자 하는 시도를 하게 됐습니다.

---

🐈 문제

 

UI 모드에서는 트리 구조로 테스트 케이스들이 표시되고, 각각의 테스트가 모여있는 폴더, 파일, describe 및 test 블록의 실행버튼을 클릭해 테스트를 실행할 수 있습니다.

 

다만, 위와 같이 동떨어져 있는 테스트 케이스를 일괄적으로 실행하려면 어떻게 해야할까요?

아쉽게도 현재 지원되는 ui 모드에서는 일부 테스트 케이스를 선택해서 실행하는 기능이 없습니다.

 

- 떨어져 있는 여러 테스트를 선택해서 한 번에 실행하는 기능은 없다.

- 그렇다고 테스트 케이스 실행기를 직접 처음부터 제작하자니, 테스트 진행상황을 알리는 traceview 등 구현이 까다로워 보이는 부분이 있어 공수가 클 것 같다

- 그럼, 직접 구현하기보다 제공되는 playwright ui모드를 분석하고, 커스터마이징 하는 쪽이 더 좋을 것 같다.

---

🎈 개선안

1. 상태 관리

1. 트리에서 항목 클릭 시 selected 상태 부여/해제
2. 자식 노드가 모두 선택되면 부모도 선택되고, 부모 선택 시 자식 노드도 선택되어야 한다.
3. Shift + 클릭으로 구간 선택 가능

2. 실행 관련

1. 전체 실행, 중지 버튼 사이에 "선택 실행" 버튼 추가
2. 아무 테스트 케이스도 선택되지 않은 상태면 버튼 비활성화
3. 클릭 시, 선택된 테스트만 기존 실행 방식을 활용해 실행

막연히 생각나는 부분들을 위와 같이 나열해 봤습니다. 결국 핵심은, 개별 테스트 케이스의 선택 기능과 선택된 테스트 케이스의 실행 기능을 필요로 함을 알 수 있습니다.

 

다음 게시글에서는 이와 같은 요구사항을 만족하는 기능 개발을 위해, playwright ui 모드에서는 어떤 방식으로 테스트 케이스를 실행시키는지 분석해 보도록 하겠습니다.

---

🐖 마무리

평소 오픈소스를 분석해보고 싶긴 했으나, 어떤 오픈소스를 분석해야 할지, 어디서부터 어떻게 분석해야할지 너무 막연했습니다. 관심을 가지던 테스트 분야에서 실무 경험을 쌓고, 기능 고도화를 위해 고민하다보니 자연스레 어떤 오픈소스를 분석할지, 어떻게 분석해야할지 갈피를 잡게 된 좋은 계기가 될 것 같습니다.