Cypress 파일 업로드테스트

진행하는 프로젝트에 텍스트 에디터가 있어 파일 업로드를 테스트가 필요햇는데

하단의 에러 메세지와 같이 유저가 직접 진행하는 게 아니기때문에 파일 업로드 버튼을 클릭하는 이벤트는 진행이 불가능 했다.

File chooser dialog can only be shown with a user activation.

하지만 그럴리가 없다. 방법을 찾아보자

https://www.cypress.io/blog/2022/01/19/uploading-files-with-selectfile/

역시 구글 최고다

1. 우선 파일을 cypress프로젝트 내에 넣어주어야하므로 이미지 파일을 해당 경로에 넣어주자
   cypress/fixtures/ (경로는 다른곳으로해도 크게 상관은 없겠지만..!)
2. readFile로 파일을 읽는다
3. selectFile로 input 해당 파일을 입력
   force:true 필수!!!
4. 끝!

const sample_img = 'cypress/fixtures/sample_1.jpeg’

describe('Image upload Test', () => {

  it('upload jpeg', () => {

   ...
   
    // 해당 파일을 먼저 읽는다 
	cy.readFile(sample_img) 
    //해당 input을 hidden처리했으므로 {force:true} 를 작성해주어야한다
    cy.get('#image-selector').selectFile(sample_img, {force:true})
	 
   ...

  })

})

 

1. Cypress로 e2e 테스트 코드 작성하기 - 시작하기 바로가기