Protractor API로 DragEvent 생성하기
Angular 애플리케이션이나 일반 HTML 페이지에서 DragEvent를 프로그래밍 방식으로 생성해야 한다면, Protractor API를 활용하는 것이 가장 간편한 방법입니다. Protractor는 Angular 전용 엔드투엔드(E2E) 테스트 프레임워크로, 실제 브라우저에서 발생하는 사용자 동작을 시뮬레이션하는 다양한 기능을 제공합니다.
공식 문서의 주요 안내 사항
Protractor 공식 문서에 따르면 browser.get 메서드는 지정된 페이지를 로드합니다. 이때 Protractor는 해당 페이지에 Angular가 존재한다고 가정하기 때문에, 로드하려는 페이지에 Angular 라이브러리가 포함되어 있지 않으면 오류를 발생시킵니다.
browser.get 메서드는 페이지를 로드합니다. Protractor는 페이지에 Angular가 존재한다고 가정하므로, 로드하려는 페이지에 Angular 라이브러리가 없으면 오류를 던집니다. (비(非)Angular 페이지와 상호작용해야 하는 경우에는 browser.driver를 통해 감싸진 웹 드라이버 인스턴스에 직접 접근할 수 있습니다.)
dragAndDrop 메서드 활용 예제
드래그 앤 드롭 동작을 시뮬레이션하려면 아래 패턴처럼 actions()와 dragAndDrop() 메서드를 조합하여 사용하면 됩니다:
browser
.actions()
.dragAndDrop(myEle, {x: 100, y: 100})
.perform();
myEle는 드래그할 대상 요소이며, 두 번째 인자인 좌표 객체는 요소를 놓을 위치를 나타냅니다. 반드시 마지막에 perform()을 호출해야 정의된 액션 체인이 실제로 실행됩니다.
참고 사항
- 테스트 대상 페이지가 Angular 기반이 아니라면
browser.driver를 사용해 순수 WebDriver API에 직접 접근하세요. - 좌표 값은 대상 요소를 기준으로 한 상대적인 픽셀 오프셋으로 지정됩니다.
- Protractor는 현재 공식적으로 유지보수가 중단된 상태이므로, 신규 프로젝트에서는 Cypress나 Playwright 같은 대체 E2E 테스트 도구도 함께 검토해볼 것을 권장합니다.