드래그앤드롭 배치

Automation상호작용중급

HTML5 드래그앤드롭으로 위젯을 드롭존에 배치하는 동작을 검증하는 테스트를 작성하세요.

요구사항

  1. 드롭 전 상태를 검증한다: 드래그 항목이 존재하고 배치 결과 메시지는 아직 없는지 확인한다.
  2. 드롭존에 정확히 배치하면 완료 메시지가 노출되고 드래그 항목이 사라지는지 검증한다.
  3. 드롭존이 아닌 영역에 놓으면 배치가 일어나지 않고 상태가 그대로인지 검증한다.

Selector reference

셀렉터 타입을 선택하면 같은 요소의 data-testid, id, class 값을 확인할 수 있습니다. 선택한 값은 page.locator(...), 접근성 locator, 또는 Page Object 필드에서 사용하세요.

드래그 항목
drag-item끌 수 있는 위젯
드롭존
drop-zone놓는 영역
배치 결과
drop-result배치 완료 시 노출
연습 대상 열기 ↗
에디터를 불러오는 중...
qaground grade
채점하면 실행 결과가 여기에 표시됩니다.