Frontory

코드 편집 · 실습 · 필기 열기 →

Playwright · 11 파일 업로드

시리즈 목차 · 전체 기술 지도

단계: 영속 데이터와 파일 왕복 · 외부 실행 예제 · 미리보기 안내 · 저장 ID: playwright-step-11

목표와 학습 후 역량

선수 지식

10단위 「다운로드 이벤트」의 이벤트 순서 및 파일 검증 실습 결과를 준비한다.

핵심 개념과 설명

파일 입력

setInputFiles는 input[type=file]에 파일을 설정한다. file chooser를 쓰면 대기는 클릭 전에 등록한다.

복원 결과

현재 Frontory v3 백업은 전체 644단위의 고유 ID와 draft를 포함해야 한다. 파일 선택 뒤 검증과 명시적인 복원 확인을 거쳐야 실제 저장소가 교체된다.

실습 준비

예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 모든 테스트는 별도 Node 프로젝트의 @playwright/test와 테스트 전용 로컬 origin에서 작성·실행한다. 기존 playwright-01·02·03 미리보기는 테스트 소스를 보여줄 뿐 iframe에서 Playwright를 실행하지 않는다. 새 테스트 파일은 과제에서 직접 작성하며 통과 여부는 실제 runner 출력으로만 판단한다. 사용자 profile·실사용 저장소를 사용하지 않고 CSP·격리를 유지한다.

연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.

실습 과제

  1. 테스트 전용 Frontory origin에서 JSON 내보내기로 전체 v3 백업을 준비한다. tests/day-11.spec.ts에서 units 배열 길이 644와 고유 ID 수 644를 확인하고, 모든 항목을 보존한 채 한 단위의 draft.notes만 바꾼 파일을 만든다.
  2. getByLabel의 학습 백업 JSON 파일 입력에 setInputFiles를 적용한다. 복원 확인 화면이 표시된 뒤에도 기존 필기가 유지되는지 검사한다. 전체 교체하여 복원 버튼을 명시적으로 클릭하고 완료 상태 및 해당 ID의 필기를 확인한 뒤 reload해서 다시 확인한다.
  3. 두 번째 독립 테스트에서는 전체 644항목을 유지하면서 서로 다른 세 단위의 draft.notes만 수정한다. 같은 파일 입력·확인 절차를 반복하고 세 ID의 필기 및 수정하지 않은 표본 ID의 값이 파일 내용과 일치하는지 기록한다. 한 항목만 들어 있는 v3 파일은 유효한 백업으로 사용하지 않는다.

관찰할 변수

변수기준 조건바꿀 조건예상할 변화·검증 가설
전체 백업 안에서 필기를 수정한 단위 수644항목을 모두 포함하고 1개 단위의 필기만 수정644항목을 모두 포함하고 3개 단위의 필기만 수정전체 항목 계약을 유지한 두 파일 모두 검증을 통과하고 명시적 확인 뒤 수정한 필기가 올바른 ID에 복원된다.

표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.

완료 조건

자가 점검

  1. v3 백업에서 필기가 있는 단위 수와 units 배열의 전체 항목 수는 왜 다른가?
  2. 파일 선택 직후와 전체 교체하여 복원 확인 뒤의 저장소 상태를 어떤 assertion으로 구분했는가?

공식 참고

연결된 예제와 실행 범위

예제 원본 · 실행 환경과 제한

Runnable standalone Playwright spec and HTTP fixture; preview does not run tests.

원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.

다음 학습

이전: 다운로드 이벤트 · 다음: 잘못된 파일과 보존

실험 기록 — 직접 작성

목표

핵심 개념

바꾼 변수와 예상

실제 결과

배운 점

남은 질문

코드 편집 · 실습 · 필기 열기 →