Загрузка файлов через input

Загрузка файлов через input в Playwright

Playwright предоставляет мощные инструменты для автоматизации браузера, включая работу с элементами формы, такими как input[type="file"], которые используются для загрузки файлов. Важно отметить, что загрузка файлов через этот элемент имеет свои особенности и требует определенной настройки для правильного взаимодействия.

Элемент input[type="file"] предоставляет пользователю интерфейс для выбора файлов с локального устройства. При автоматизации тестов через Playwright важно учесть, что такие элементы не могут быть напрямую заполнены значениями, как обычные текстовые поля. Вместо этого необходимо использовать метод, который симулирует процесс выбора файла.

Загрузка файла с использованием метода setInputFiles

Для загрузки файла через элемент input в Playwright используется метод setInputFiles, который позволяет задать путь к файлу или массив файлов, которые должны быть загружены в поле ввода. Этот метод работает как для обычных файлов, так и для файлов, связанных с несколькими input элементами.

Пример загрузки одного файла:

const { test, expect } = require('@playwright/test');

test('Загрузка файла через input', async ({ page }) => {
  await page.goto('https://example.com'); // URL страницы с input[type="file"]

  const inputFile = await page.locator('input[type="file"]');
  
  // Указываем путь к файлу для загрузки
  await inputFile.setInputFiles('path/to/your/file.txt');

  // Проверяем, что файл загружен
  const files = await inputFile.inputFiles();
  expect(files[0]).toContain('file.txt');
});

В этом примере используется метод setInputFiles, который позволяет передать путь к файлу на локальной машине. Важно помнить, что путь должен быть абсолютным и доступным из окружения, где выполняется тест.

Загрузка нескольких файлов

Playwright поддерживает загрузку нескольких файлов одновременно. Для этого необходимо передать массив путей к файлам в метод setInputFiles. Это позволяет тестировать сценарии, когда пользователь загружает несколько файлов одновременно.

Пример загрузки нескольких файлов:

test('Загрузка нескольких файлов', async ({ page }) => {
  await page.goto('https://example.com'); // URL страницы с input[type="file"]

  const inputFile = await page.locator('input[type="file"]');
  
  // Указываем массив путей к файлам
  await inputFile.setInputFiles([
    'path/to/first_file.txt',
    'path/to/second_file.txt'
  ]);

  // Проверяем, что оба файла были загружены
  const files = await inputFile.inputFiles();
  expect(files).toEqual([
    expect.stringContaining('first_file.txt'),
    expect.stringContaining('second_file.txt')
  ]);
});

При использовании этого подхода важно также проверить, что на стороне веб-страницы корректно обрабатывается загрузка нескольких файлов.

Загрузка файлов через drag-and-drop

В Playwright есть возможность моделировать действия перетаскивания файлов с локального устройства в браузер. Этот сценарий часто используется на страницах, которые поддерживают перетаскивание файлов в поле загрузки.

Для этого можно использовать метод locator.dispatchEvent, чтобы вручную сгенерировать события перетаскивания.

Пример имитации drag-and-drop:

test('Загрузка файла через drag-and-drop', async ({ page }) => {
  await page.goto('https://example.com'); // URL страницы с drag-and-drop

  const dropZone = await page.locator('#drop-zone'); // Элемент, куда происходит перетаскивание

  // Имитируем событие drag-and-drop
  await dropZone.dispatchEvent('drop', {
    dataTransfer: {
      files: [new File(['file contents'], 'file.txt')]
    }
  });

  // Проверяем, что файл был загружен
  const uploadedFile = await page.locator('#uploaded-file');
  expect(await uploadedFile.textContent()).toContain('file.txt');
});

Этот пример демонстрирует использование событий для имитации действий drag-and-drop, что позволяет тестировать сценарии, где пользователь перетаскивает файлы для загрузки.

Обработка ошибок при загрузке файлов

При работе с загрузкой файлов важно также учитывать обработку ошибок, таких как неверный формат файла или превышение максимального размера. Playwright предоставляет возможность симулировать такие ошибки с помощью различных настроек в тестах.

Пример тестирования ошибки при загрузке файла с неподдерживаемым форматом:

test('Ошибка при загрузке неподдерживаемого файла', async ({ page }) => {
  await page.goto('https://example.com'); // URL страницы с input[type="file"]

  const inputFile = await page.locator('input[type="file"]');
  
  // Загружаем неподдерживаемый файл
  await inputFile.setInputFiles('path/to/unsupported_file.exe');

  // Проверяем сообщение об ошибке
  const errorMessage = await page.locator('#error-message');
  expect(await errorMessage.textContent()).toContain('Неподдерживаемый формат файла');
});

В этом примере тестируется ситуация, когда загружается файл неподдерживаемого формата, и проверяется наличие соответствующего сообщения об ошибке.

Взаимодействие с элементами, скрытыми для пользователя

Зачастую элемент input[type="file"] может быть скрыт для пользователя с помощью CSS (например, display: none или visibility: hidden). В таких случаях Playwright позволяет взаимодействовать с этими элементами, даже если они не отображаются на странице.

Чтобы загрузить файл через скрытое поле ввода, нужно использовать методы, которые позволяют работать с элементами вне видимой области страницы.

Пример взаимодействия с скрытым элементом:

test('Загрузка файла через скрытое input', async ({ page }) => {
  await page.goto('https://example.com'); // URL страницы с скрытым input[type="file"]

  const inputFile = await page.locator('input[type="file"]');
  
  // Устанавливаем файл для скрытого поля
  await inputFile.setInputFiles('path/to/hidden_file.txt');

  // Проверяем, что файл был загружен
  const files = await inputFile.inputFiles();
  expect(files[0]).toContain('hidden_file.txt');
});

Здесь используется стандартный метод setInputFiles, и скрытое поле успешно обрабатывается без необходимости делать его видимым на странице.

Установка и тестирование различных атрибутов поля input

Поле input[type="file"] может содержать различные атрибуты, такие как accept, multiple, disabled и другие. Playwright предоставляет возможность тестировать поведение этих атрибутов, что важно для проверки различных сценариев использования формы.

Пример использования атрибута accept для ограничения типов файлов:

test('Загрузка файла с ограничением типа', async ({ page }) => {
  await page.goto('https://example.com'); // URL страницы с input[type="file"]

  const inputFile = await page.locator('input[type="file"][accept=".txt"]');
  
  // Загружаем неподдерживаемый файл
  await inputFile.setInputFiles('path/to/image.png');

  // Проверяем, что файл не загружается
  const files = await inputFile.inputFiles();
  expect(files).toHaveLength(0);
});

Этот пример проверяет, что поле ввода ограничивает выбор файлов только по расширению, указанному в атрибуте accept.

Заключение

Загрузка файлов через элемент input[type="file"] в Playwright требует понимания различных аспектов взаимодействия с этим элементом, включая работу с атрибутами, загрузку нескольких файлов, обработку ошибок и работу с скрытыми элементами. Правильное использование методов, таких как setInputFiles, и дополнительных проверок позволяет эффективно тестировать процессы загрузки файлов, которые часто встречаются на веб-страницах.