피드로 돌아가기
UI 테스트 자동화 구조
올리브영 테크블로그올리브영 테크블로그
Backend

UI 테스트 자동화 구조

올리브영 QA팀이 Page Object Model(POM) 패턴을 도입해 UI 테스트 자동화 스크립트의 요소 변경 시 단일 지점만 수정하는 구조 구축

2023년 11월 11일9intermediate

Context

UI 테스트 자동화 스크립트가 수십 개 이상 증가하면서 동일한 UI 요소가 여러 스크립트에 중복으로 하드코딩되었다. UI 요소가 변경될 때마다 모든 관련 스크립트를 수동으로 찾아 수정해야 하므로 유지보수 시간이 증가하고 오류 발생 가능성이 높아졌다.

Technical Solution

  • Page Object Model(POM) 패턴 도입: 각 웹 페이지의 UI 요소와 동작을 별도 클래스(예: MyPage.py)에 캡슐화
  • 요소 선택자를 클래스 변수로 정의: 로그인 아이디 입력창, 비밀번호 입력창, 로그인 버튼 등을 클래스 레벨에서 XPath로 선언
  • 메서드 기반 상호작용 추상화: tap_mypage_button(), input_id(), input_password(), tap_login_button() 등의 메서드로 테스트 로직 단순화
  • BasePage 상속을 통한 공통 기능 재사용: tap(), input(), clear(), wait_element() 같은 기본 동작을 부모 클래스에서 제공
  • pytest fixture를 통한 드라이버 생명주기 관리: conftest.py에서 웹 드라이버 초기화를 선언하고 모든 테스트에서 재사용
  • 민감 정보 외부화: 로그인 정보(아이디/비밀번호)를 config.py에 별도 보관하고 .gitignore로 git 업로드 제외

Key Takeaway

UI 요소 선택자를 테스트 로직과 분리하면 UI 변경 시 페이지 객체 클래스 내 선택자만 수정하면 되므로, 테스트 코드 자체는 건드리지 않고도 새로운 UI에 대응할 수 있다.


Selenium을 사용한 자동화 테스트를 작성하는 팀에서 Page Object Model을 도입하면, 단일 UI 요소 변경(예: XPath "//input[@id='loginId']" → "//input[@id='loginID']")이 해당 선택자를 사용하는 모든 테스트에 자동으로 반영되어 유지보수 지점을 1개로 통합할 수 있다.

원문 읽기