할 일 관리(Todo) CRUD

Automation상호작용입문

할 일 관리 위젯의 기본 동작을 검증하는 자동화 테스트를 작성하라. 추가·완료·수정·삭제·필터·남은 개수가 명세대로 동작하는지 직접 케이스를 설계해야 한다. [명세] 입력 후 추가하면 목록에 생기고 입력창이 비워진다(공백만이면 추가 안 됨). 체크박스로 완료/미완료를 전환한다(완료는 취소선). 수정→저장으로 텍스트를 바꾸고, 삭제로 항목을 제거한다. 필터는 전체/미완료/완료이며, 남은 일 개수는 미완료 항목 수다.

요구사항

  1. 할 일을 입력해 추가하면 목록에 나타나고 입력창이 비워진다. 공백만 입력하면 추가되지 않는다.
  2. 체크박스로 완료/미완료를 토글하면 표시와 남은 개수가 갱신된다.
  3. 항목을 수정·저장하면 텍스트가 바뀌고, 삭제하면 목록에서 사라진다.
  4. 필터(전체/미완료/완료)에 따라 보이는 항목이 달라진다.

Selector reference

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

입력
todo-input할 일 입력
추가
todo-add할 일 추가
항목
todo-item할 일 항목
완료 토글
todo-toggle완료 체크박스
텍스트
todo-text할 일 텍스트
수정
todo-edit수정 시작
수정 입력
todo-edit-input수정 입력창
저장
todo-save수정 저장
삭제
todo-delete할 일 삭제
필터-전체
filter-all전체 보기
필터-미완료
filter-active미완료만
필터-완료
filter-done완료만
남은 개수
remaining-count남은(미완료) 개수
연습 대상 열기 ↗
에디터를 불러오는 중...
qaground grade
채점하면 실행 결과가 여기에 표시됩니다.