PO(PageObject) Generator 개발기

안녕하세요,
오늘은 제가 최근에 개발한
'PO(PageObject Generator)'라는 도구에 대해
이야기해보려고 합니다.

이 도구가
어떻게 웹 테스트 모니터링 작업을 바꿔놓았는지,
그리고 글을 읽고 계시는 QA 분들의 자동화 작업도
어떻게 바꿀 수 있는지 함께 알아보겠습니다!

 

기존 방식의 고통

웹 UI 테스트 자동화를 해보셨다면 공감하실 것입니다.

기존에 PageObject 함수를 작성하거나

UI 테스트 모니터링 자동화 작업시에

레코딩 방식을 주로 사용했습니다.

 

이 과정이 얼마나 지루하고 번거로웠는지 모릅니다.

 

웹페이지의 모든 버튼, 입력 필드, 체크박스를

일일이 개발자 도구를 통해 요소를 추출하거나,

동선을 레코딩해야 했고 우선순위 + 시간 제약 때문에

결국 '주요 동선'만 테스트하게 되었습니다.

-> 로그인 → 메인 페이지 → 특정 기능 1~2개 정도만 확인

-> 서버가 잘 돌아가는지, 핵심 기능이 작동하는지만 확인

 

하지만 문제는 그 외의 수많은 UI 요소들은 어떻게 되고 있는지

알 수 없다는 점이었습니다.

 

어쩌면 사용자들이 자주 사용하는 기능이 깨져 있을지도 모르는데 말입니다! 

 

아이디어 구체화

그러던 중 문득 이런 생각이 들었습니다.

 

"웹페이지의 모든 상호작용 요소를

자동으로 추출해서 테스트 코드를 만들 수 있다면 얼마나 좋을까?"

 

그렇게 'PO Generator'를 개발했습니다.

URL 하나만 넣으면 웹페이지의

모든 버튼, 입력 필드, 체크박스 등을 자동으로 찾아내고,

그에 맞는 Selenium 페이지 오브젝트 패턴 코드를

생성해주는 도구입니다.

 

PO Generator의 과정

기존에는 이런 과정이었습니다:

1. 웹페이지 열기
2. 레코딩 시작
3. 모든 버튼 일일이 클릭하며 레코딩 (너무 많아서 대부분 스킵)
4. 주요 동선만 확인
5. 다른 요소들은... (그냥 작동하길 기도)

하지만 PO Generator를 사용하면:

1. 웹페이지 URL 입력
2. 잠시 기다리기
3. 모든 요소에 대한 테스트 코드 자동 생성 완료

이제 모든 버튼, 모든 입력 필드, 모든 상호작용 요소가 제대로 렌더링되고

작동하는지 철저하게 모니터링할 수 있게 되었습니다.

짧은 시간에 웹페이지의 상태를 전체적으로 확인할 수 있게 된 것입니다.

 

어떻게 작동하는가?

PO Generator는 Python / Selenium / Google OCR 로 개발했으며,

다음과 같이 동작합니다:

1. Selenium WebDriver로 웹페이지 방문
2. 버튼, 입력 필드, 체크박스 등 모든 상호작용 요소 자동 탐색
3. 요소마다 최적의 로케이터 전략 결정 (ID, XPath, CSS 선택자 등)
4. 텍스트가 없는 이미지 버튼은 Google Cloud Vision OCR로 인식
5. 한글 요소는 자동으로 영문 함수명으로 변환 (예: '로그인' → 'login')
6. 각 요소에 대한 메서드 자동 생성 (클릭, 텍스트 입력, 선택 등)
7. 완성된 페이지 오브젝트 클래스 코드 생성

 

실제 활용 사례

이 도구를 사용하면서 가장 임팩트가 있었던 부분은

서비스의 모니터링을 설정할 때였습니다.

 

기존에는 모니터링 시에 주요 동선 노출정도만 확인했는데,

PO Generator로 생성한 코드로 테스트해보니

결제 프로세스 중간에 있는 '특정 쿠폰 적용' 버튼이

나오지 않는 문제를 발견했습니다.

 

서버 헬스체크는 정상, 주요 동선 테스트도 통과했지만,

실제 사용자 경험에 중요한 UI 요소가 문제가 있었던 것입니다.

 

이전 방식으로는 발견할 수 없었을 문제였습니다.

이 외에도:

• CSS 변경 후 의도치 않게 가려진 버튼 발견
• 특정 브라우저에서만 나타나는 입력 필드 검증 문제 포착

 

코드 맛보기

생성되는 코드는 이런 형태입니다:

 

python

def click_login_button(self):
    """
    '로그인' 버튼 클릭
    """
    WebDriverWait(self.driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//button[normalize-space(.)='로그인']")))
    return self

def enter_username(self, text):
    """
    '아이디' 필드에 텍스트 입력
    """
    element = WebDriverWait(self.driver, 10).until(EC.presence_of_element_located((By.ID, "username")))
    element.clear()
    element.send_keys(text)
    return self

이렇게 메소드 체이닝 방식으로 쉽게 테스트 코드를 작성할 수 있습니다.

-> 효과적인 사용을 위해 Google OCR API 를 사용하시는 것을 권장합니다. (키 발급 필요)
    (readme.md 파일을 참고해주세요!)

 

 

시작하기

사용법도 정말 간단합니다:

 

bash

python src/main.py --url https://example.com

URL 하나만 넣어주면 끝! 물론 더 세부적인 옵션도 있습니다:

 

bash

# 버튼만 추출하고 싶을 때
python src/main.py --url https://example.com --buttons-only

# OCR 기능 없이 사용하고 싶을 때
python src/main.py --url https://example.com --no-ocr

# 디버그 모드로 실행
python src/main.py --url https://example.com --debug

 

마치며

PO Generator는 웹 테스트 코드 작업 방식을 바꿔놓았습니다.

 

"주요 동선만 확인하고 나머지는 운에 맡긴다"는 방식이 아니라,

웹페이지의 모든 구성 요소를 철저하게 검증할 수 있게 되었습니다.

 

혹시 여러분도 웹 테스트 자동화에 어려움을 겪고 계신다면,

PO Generator를 한번 시도해보셔도 좋을 듯합니다.

 

귀찮은 웹페이지 요소를 따거나 혹은 레코딩 작업에서 벗어나

모든 UI 요소를 꼼꼼하게 확인할 수 있는 강점이 있습니다.

 

오픈 소스로 공개했으니 많은 피드백과 기여 부탁드립니다.

함께 더 좋은 도구로 발전시켜 나갔으면 합니다.

 

여러분의 테스트 자동화 여정에 PO Generator가 작은 도움이 되길 바랍니다.

궁금한 점이나 의견이 있으시면 댓글로 남겨주시기 바랍니다.

 

https://github.com/taeshkim/po_generator