소개

파일 업로드 및 다운로드 처리는 엔드투엔드 테스트에서 일반적인 시나리오입니다. 이 게시물에서는 Cypress를 사용하여 파일 업로드와 다운로드를 모두 처리하는 방법을 살펴보겠습니다. Cypress에는 이러한 작업에 대한 기본 지원이 부족하지만 몇 가지 라이브러리와 Cypress의 강력한 명령 세트를 활용하여 이 기능을 달성할 수 있습니다.

이 가이드가 끝나면 다음 방법을 알게 됩니다.

• Cypress를 사용하여 파일을 업로드합니다.
• 성공적인 파일 업로드를 확인합니다.
• Cypress에서 파일을 다운로드하고 해당 콘텐츠의 유효성을 검사합니다.

전제 조건

예제를 따라가려면 Cypress가 설치 및 설정되어 있는지 확인하세요. Cypress v13.6.2를 사용하는 경우 이 게시물에 표시된 접근 방식과 호환됩니다.

Cypress의 파일 업로드

Cypress에서 파일을 업로드하기 위해 테스트 중에 파일 업로드 작업을 쉽게 시뮬레이션할 수 있는 방법을 제공하는 cypress-file-upload 플러그인을 사용하겠습니다.
1단계: cypress-file-upload 플러그인 설치
Cypress에서 파일 업로드를 처리하려면 먼저 cypress-file-upload 패키지를 설치해야 합니다.

npm install --save-dev cypress-file-upload

다음으로 Cypress 지원 폴더 내의 Commands.js 파일로 가져옵니다.

import 'cypress-file-upload';

2단계: 폴더 구조
테스트 파일을 저장하고 테스트 중에 업로드하려면 프로젝트에 다음 폴더 구조가 있는지 확인하세요.

cypress/
    fixtures/
        exampleFile.pdf  // Test file for uploading
    e2e/
        fileUploadTests.cy.js  // Test file to upload and validate

3단계: 파일 업로드
플러그인을 설치한 후에는 attachmentFile 명령을 사용하여 Fixtures 폴더에서 파일을 업로드할 수 있습니다.

파일을 업로드하는 방법은 다음과 같습니다.

describe('File Upload Test in Cypress', () => {
  it('should upload a file successfully', () => {
    // Visit the page with a file upload input
    cy.visit('/upload');

    // Select the file input element and upload a file from the fixtures folder
    cy.get('input[type="file"]').attachFile('exampleFile.pdf');

    // Validate that the file was uploaded (depends on your app's specific response)
    cy.get('.file-name').should('contain', 'exampleFile.pdf');
  });
});

이 테스트에서:

• 파일 입력이 존재하는 페이지를 방문합니다.
• attachFile()을 사용하여 조명기 폴더에서 파일 업로드를 시뮬레이션합니다.
• 어설션은 업로드된 파일 이름이 페이지에 올바르게 표시되는지 확인합니다.

파일 업로드 검증

파일 업로드 유효성을 검사하는 것은 업로드 후 파일 이름이나 경로가 웹페이지에 나타나는지 확인하는 것만큼 간단할 수 있습니다. 그러나 복잡한 시나리오(예: 파일 콘텐츠 또는 크기 확인)의 경우 서버 측 확인이나 스텁이 필요할 수 있습니다.

예: 추가 데이터로 파일 업로드 유효성 검사

describe('File Upload and Validation', () => {
  it('should upload a file and validate metadata', () => {
    cy.visit('/upload');

    cy.get('input[type="file"]').attachFile('exampleFile.pdf');

    // Assert that the file metadata like size is displayed correctly
    cy.get('.file-size').should('contain', 'Size: 1MB');
  });
});

Cypress의 파일 다운로드
Cypress는 파일 다운로드 확인에 대한 기본 지원을 제공하지 않습니다(브라우저는 Cypress의 제어 범위 밖에서 파일을 다운로드하므로). 그러나 로컬 파일 시스템에서 다운로드한 파일을 직접 확인하여 이 문제를 해결할 수 있습니다.

1단계: cypress-downloadfile 설치
Cypress에서 파일 다운로드의 유효성을 검사하려면 cypress-downloadfile 플러그인을 사용할 수 있습니다.

npm을 통해 설치하세요:

npm install --save-dev cypress-downloadfile

다음으로, Commands.js 파일에 플러그인을 추가하세요:

require('cypress-downloadfile/lib/downloadFileCommand');

2단계: 파일 다운로드 및 유효성 검사
이제 파일을 다운로드하고 해당 내용을 확인하는 테스트를 작성할 수 있습니다.

예: 파일 다운로드

describe('File Download Test in Cypress', () => {
  it('should download a file and validate its content', () => {
    cy.visit('/download');

    // Download the file and save it to a custom downloads folder
    cy.downloadFile('https://example.com/sample.pdf', 'cypress/downloads', 'sample.pdf');

    // Validate that the file exists in the specified location
    cy.readFile('cypress/downloads/sample.pdf').should('exist');
  });
});

이 테스트에서:

• cy.downloadFile()을 사용하여 URL에서 파일을 다운로드하고 cypress/downloads 폴더에 저장합니다.
• 다운로드 후 cy.readFile()을 사용하여 파일이 존재하는지 확인합니다.

3단계: 파일 콘텐츠 유효성 검사
다운로드가 성공했는지 확인하기 위해 다운로드한 파일의 내용을 확인할 수 있습니다. 텍스트 기반 파일(예: .txt, .csv)의 경우 Cypress의 cy.readFile()을 사용하여 파일 내용을 확인할 수 있습니다.

예: 다운로드한 파일 콘텐츠 유효성 검사

describe('Validate Downloaded File Content', () => {
  it('should download and check the content of a text file', () => {
    cy.visit('/download');

    // Download the text file
    cy.downloadFile('https://example.com/sample.txt', 'cypress/downloads', 'sample.txt');

    // Read the file and assert its content
    cy.readFile('cypress/downloads/sample.txt').then((fileContent) => {
      expect(fileContent).to.contain('This is a sample text file');
    });
  });
});

이 테스트는 .txt 파일을 다운로드하고 해당 파일에 예상 텍스트가 포함되어 있는지 확인합니다.

Cypress의 파일 업로드 및 다운로드 모범 사례

1. 업로드용 픽스처 사용: 테스트 데이터를 정리하고 액세스할 수 있도록 항상 픽스처 폴더에 업로드할 파일을 저장하세요.
2. 다운로드 폴더 정리: 새 테스트를 시작하기 전에 다운로드 폴더를 정리하여 이전 테스트 실행에서 남은 파일 문제를 방지하세요.
3. 서버 응답 확인: 파일 업로드의 경우 항상 UI 어설션 외에 서버 측 응답을 확인하여 파일이 제대로 처리되는지 확인하세요.
4. 다운로드용 임시 디렉터리 사용: 다운로드한 파일을 임시 디렉터리(cypress/downloads)에 저장하여 프로젝트 구조가 복잡해지지 않도록 하세요.
5. 모의 파일 업로드(선택 사항): 성능상의 이유로 파일 업로드를 모의하려는 시나리오에서는 스텁을 사용하여 실제 파일 업로드를 우회합니다.

결론

파일 업로드 및 다운로드는 웹 애플리케이션 테스트에서 중요한 작업이며 Cypress는 기본적으로 이러한 작업을 지원하지 않지만 cypress-file-upload 및 cypress-downloadfile 플러그인은 사용하기 쉬운 해결 방법을 제공합니다.

이 가이드에서는 다음 방법을 살펴보았습니다.

• Cypress의 cypress-file-upload 플러그인을 사용하여 파일을 업로드하세요.
• 파일 이름과 메타데이터를 확인하여 파일 업로드를 확인하세요.
• cypress-downloadfile 플러그인을 사용하여 파일을 다운로드하고 다운로드한 파일의 존재와 내용을 확인합니다.

이러한 도구와 기술을 사용하면 Cypress 엔드투엔드 테스트에서 파일 업로드 및 다운로드를 자신있게 처리할 수 있습니다!