코드로 이해하는Page Object Model
페이지 객체 모델이란?(POM)
페이지 객체 모델(POM)은 테스트 자동화 스크립트 유지보수를 편리하게 하고자 테스트 자동화 분야에서 사용되는 디자인 패턴입니다. 웹 페이지에는 수많은 Element가 존재하는데요. 테스트 자동화를 하려면 우선 Element와의 상호작용이 필요합니다. 만약 서비스 중인 페이지의 UI가 변경되면 어떻게 해야 할까요? 변경된 UI의 Element와 계속해서 상호작용되어야 초기 작성된 스크립트가 의도한 방향대로 정상 동작할 수 있습니다. 페이지 객체 모델 디자인 패턴을 활용하면 UI가 변경되어도 테스트 로직 자체를 변경할 필요가 없어지고 페이지 객체가 저장된 파일만 관리하면 되므로 유지보수가 편리해집니다. 모든 Element의 변경 사항들은 하나의 파일(페이지 단위)에서 관리하게 되므로 서비스 규모가 커질수록 보다 효율적인 관리가 가능합니다.
페이지 객체 모델이 필요한 이유
서비스 규모가 커질수록 복잡해지는 테스트 자동화 스크립트
예를 들어 UI 변경 및 개편될 경우 특정 버튼이 다른 위치로 변경될 수 있습니다. 이로 인해 기존에 작성된 테스트 자동화 스크립트는 로케이터를 찾을 수 없기 때문에 실패하게 됩니다. 로케이터는 자동화 스크립트를 작성하기 위한 전제 조건입니다. 전제 조건이 변경되었으므로 로케이터 업데이트가 필요합니다. 이때 로케이터 업데이트를 위해 전체 코드를 살펴봐야 합니다. 만약 페이지 객체 모델로 관리하지 않을 경우 로케이터의 중복 사용으로 인해 로케이터 업데이트에만 많은 시간이 소요되고, 이는 서비스 규모가 커질수록 유지 관리가 힘들어집니다. 페이지 객체 모델로 관리했다면 Element 변경 사항들은 하나의 페이지 단위에서 전체 관리가 진행되므로 서비스 규모가 커질수록 보다 효율적인 관리가 가능합니다. 또한 페이지 객체 모델은 실제 테스트 로직과 로케이터를 별도로 구분하여 관리하므로 실제 테스트 로직이 담긴 코드의 가독성이 좋아질 뿐 아니라 규모가 커지더라도 보다 이해하기 쉬운 구조로 유지 관리 가능한 이점이 있습니다.
페이지 객체 모델 구조
test 폴더 아래에 pages와 specs 폴더를 생성했습니다. pages에는 로케이터를 class 형태로 관리하게 됩니다. specs은 실제로 테스트할 로직을 작성합니다.
페이지(login-page.js)
loginPage라는 클래스를 생성했습니다. 2번째 라인의 open은, wdio.conf.js의 baseUrl인 'https://www.classting.com/'을 실제 테스트 로직에서 loginPage.open() 형태로 사용하기 위해 baseUrl을 받아왔습니다. 이후 get login(), get tilte()와 같은 형태로 로그인 시나리오에 필요한 로케이터를 선별하여 작성했습니다. input 태그인 이메일과 패스워드는 "등록되지 않은 이메일입니다" 문구를 확인하기 위한 submitFailData 함수를 작성했고, 로그인 성공 확인을 위한 submitSuccessData 함수를 작성한 모습입니다. 두 함수 모두 email과 password를 인자로 받아서 get 형태로 생성해둔 inputEmail과 inputPassword 로케이터에 addValue 메서드를 사용하여 실제 테스트 로직에서 입력한 값을 input 필드에 추가하여 검증하도록 작성했습니다.
테스트(login.js)
작성해둔 loginPage를 import 했고 beforeEach를 사용하여 매 테스트가 끝날 때마다 loginPage.open()이 실행되어 메인 페이지가 열리도록 구성했습니다. 로그인 시나리오에 필요한 모든 로케이터는 loginPage에서 관리되므로 위와 같은 테스트 로직에서는 로케이터를 담기 위한 변수가 필요치 않습니다. 만약 loginPage 클래스가 없었더라면 Element 동작에 필요한 메서드를 사용하기 위해 로케이터를 담고 있는 변수를 테스트 로직 안에 생성해야 하므로 우측처럼 코드 가독성이 좋지 못합니다. 페이지 객체 모델을 활용하여 로케이터와 테스트 로직을 분리한다면 보다 실제 테스트 로직에 집중할 수 있도록 자동화 환경 구축이 가능해집니다.
마치며
페이지 객체 모델이 무엇인지, 왜 필요한지, 폴더 구조 및 실제 코드를 통해 페이지 객체 모델에 대해 알아보았습니다. 페이지 객체 모델(POM)은 테스트 자동화 스크립트 유지보수를 편리하게 하고자 테스트 자동화 분야에서 사용되는 디자인 패턴인 만큼, QA Engineer가 학습하고 갖춰야 할 역량 중 하나라 생각되는데요. 곧(?) 실무에 다시 복귀하길 기대하면서 실무 레벨에서 부딪히는 챌린지를 통해 Web/App 서비스에 대한 Automation DeepDive 가능한 순간이 찾아왔으면 좋겠습니다. 테스트 자동화 실무 경험을 쌓고 좀 더 풍부한 경험을 토대로 Test Automation 관련 학습 경험들을 계속해서 공유하도록 하겠습니다. 긴 글 읽어주셔서 고맙습니다.
