Papio 프레임워크 제너레이터

Source: Dev.to

테스트 자동화에 시간을 보냈다면, 셀렉터 문제를 잘 알 것입니다. DevTools를 열고 요소를 검사한 뒤, 다음과 같은 코드를 직접 작성하곤 합니다:

@class='container']//button[contains(text(),'Submit')]

두 스프린트가 지나 UI가 바뀝니다. 클래스가 사라지고, 테스트가 깨집니다. 이를 고치고, 이 과정이 무한히 반복됩니다.

Toyota Connected, Caesars Digital, 그리고 대기업 Fortune 500 환경에서 20년 이상 QA 자동화에 몸담으며—나는 언제나 존재했으면 하는 도구, Papio Selector를 만들기로 결심했습니다.

핵심 문제: 프레임워크 파편화

각 프레임워크마다 자체적인 셀렉터 API가 있습니다. 모든 프레임워크에서 일관성을 수동으로 유지하는 것은 오류가 발생하기 쉽고 시간도 많이 소요됩니다. Papio는 단일 검사를 통해 모든 프레임워크에 맞는 관용적인 코드를 자동으로 생성합니다.

Shadow DOM — 방 안의 코끼리

Papio는 Shadow DOM 요소를 자동으로 처리하여, 컴포넌트가 캡슐화돼 있더라도 셀렉터가 정상적으로 동작하도록 보장합니다.

셀렉터 우선순위 알고리즘

Papio는 가장 안정적인 셀렉터를 생성하기 위해 다음과 같은 우선순위 방식을 따릅니다:

1. data-testid / data-cy 속성 (가장 안정적)
2. ARIA 역할 및 라벨
3. ID 속성
4. 고유한 CSS 클래스 조합
5. 구조/위치 기반 셀렉터 (최후의 수단)

즉, Papio가 생성한 셀렉터는 수동으로 만든 셀렉터보다 UI 변경에 훨씬 강인합니다.

설치 및 사용해 보기

Papio Test Framework Generator – Chrome Web Store