Введение

Обработка загрузки и скачивания файлов — распространенный сценарий сквозного тестирования. В этом посте мы рассмотрим, как обрабатывать загрузку и скачивание файлов с помощью 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

Затем импортируйте его в файл Commands.js в папке поддержки Cypress:

import 'cypress-file-upload';

Шаг 2. Структура папок
Убедитесь, что ваш проект имеет следующую структуру папок для хранения тестовых файлов и их загрузки во время тестов:

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

Шаг 3. Загрузка файла
После установки плагина вы можете использовать команду AttachFile для загрузки файла из папки светильников.

Вот как можно загрузить файл:

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. Проверка ответа сервера: при загрузке файлов всегда проверяйте ответы на стороне сервера в дополнение к утверждениям пользовательского интерфейса, чтобы убедиться, что файл обрабатывается правильно.
4. Используйте временные каталоги для загрузок: храните загруженные файлы во временных каталогах (кипарис/загрузки), чтобы не загромождать структуру вашего проекта.
5. Имитация загрузки файлов (необязательно): в сценариях, где вы хотите имитировать загрузку файлов из соображений производительности, используйте заглушки для обхода реальной загрузки файлов.

Заключение

Загрузка и загрузка файлов являются критически важными операциями при тестировании веб-приложений, и хотя Cypress не поддерживает эти операции изначально, плагины cypress-file-upload и cypress-downloadfile предоставляют простые в использовании обходные пути.

В этом руководстве мы узнали, как:

• Загружайте файлы с помощью плагина Cypress-file-upload от Cypress.
• Проверьте загрузку файлов, проверив имена файлов и метаданные.
• Загрузите файлы с помощью плагина cypress-downloadfile и проверьте существование и содержимое загруженных файлов.

С помощью этих инструментов и методов вы можете уверенно обрабатывать загрузку и скачивание файлов в ходе комплексных тестов Cypress!