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

В WebdriverIO тестирование загрузки файлов требует особого подхода, так как стандартные методы взаимодействия с элементами браузера (например, .click() или .setValue()) работают с DOM, но не имитируют работу системного диалога выбора файлов. Для автоматизации процесса загрузки используются встроенные возможности WebdriverIO, позволяющие напрямую устанавливать путь к файлу в <input type="file">.

Настройка проекта

Для работы с WebdriverIO и тестирования загрузки файлов требуется:

  1. Установленный WebdriverIO вместе с необходимыми пакетами, такими как @wdio/cli, @wdio/local-runner и @wdio/mocha-framework (или другой фреймворк тестирования).
  2. Node.js версии 18+ и менеджер пакетов npm или pnpm/yarn.
  3. Структура тестов, где тесты разделены по папкам tests и pageobjects.

Пример установки WebdriverIO:

npm init wdio .
npm install @wdio/local-runner @wdio/mocha-framework @wdio/spec-reporter @wdio/sync

Элемент загрузки файла

HTML-элемент для загрузки файлов выглядит так:

<input type="file" id="file-upload" />
<button id="upload-button">Загрузить</button>

В WebdriverIO для взаимодействия с этим элементом используется метод .setValue(), который устанавливает путь к файлу напрямую, минуя системный диалог:

const filePath = require('path').join(__dirname, 'resources', 'example.txt');
const remoteFilePath = browser.uploadFile(filePath);

const fileInput = $('#file-upload');
fileInput.setValue(remoteFilePath);

$('#upload-button').click();

Ключевые моменты:

  • browser.uploadFile() загружает локальный файл на удаленный сервер, если тест выполняется на удаленном WebDriver (например, Selenium Grid или Sauce Labs).
  • Метод .setValue() работает только с <input type="file">. Другие элементы (например, drag-and-drop зоны) требуют альтернативных решений.

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

Для тестирования множественной загрузки можно использовать массивы путей:

const files = ['example1.txt', 'example2.txt'].map(file =>
    browser.uploadFile(require('path').join(__dirname, 'resources', file))
);

const fileInput = $('#file-upload');
fileInput.setValue(files.join('\n')); // объединяем через перенос строки

Важно, чтобы элемент <input> поддерживал атрибут multiple, иначе загрузится только первый файл:

<input type="file" id="file-upload" multiple />

Проверка успешной загрузки

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

const uploadedFileName = $('#uploaded-file-name').getText();
expect(uploadedFileName).toBe('example.txt');

Если приложение использует асинхронную загрузку, следует дождаться завершения через waitUntil:

browser.waitUntil(() => {
    return $('#uploaded-file-name').getText() === 'example.txt';
}, {
    timeout: 5000,
    timeoutMsg: 'Файл не загрузился в течение 5 секунд'
});

Drag-and-drop загрузка файлов

Некоторые приложения используют drag-and-drop зоны для загрузки файлов. В WebdriverIO можно эмулировать это с помощью Jav * aScript:

const filePath = require('path').join(__dirname, 'resources', 'example.txt');
const remoteFilePath = browser.uploadFile(filePath);

const dataTransfer = new DataTransfer();
dataTransfer.items.add(new File([remoteFilePath], 'example.txt'));

const dropZone = $('#drop-zone');
browser.execute((dropZone, dataTransfer) => {
    const event = new DragEvent('drop', { dataTransfer });
    dropZone.dispatchEvent(event);
}, dropZone, dataTransfer);

Эта техника позволяет имитировать перетаскивание файла без использования системного окна выбора.

Особенности при работе с CI/CD

  1. Пути к файлам должны быть абсолютными, чтобы тесты корректно работали в среде сборки.
  2. Файлы ресурсов обычно помещают в отдельную папку tests/resources.
  3. Для удалённых браузеров browser.uploadFile() обязателен, иначе тест не сможет передать локальный файл на сервер.

Советы по надежной автоматизации загрузки

  • Использовать отдельные page objects для элементов загрузки файлов.
  • Всегда проверять атрибут multiple перед попыткой загрузить несколько файлов.
  • Дождаться визуального подтверждения загрузки файла на странице.
  • Для больших файлов использовать таймауты или проверку прогресса загрузки.

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

Оглавление