HTML5 Audio тестирование

HTML5 предоставил возможность работы с аудио и видео прямо в браузере с использованием встроенных тегов <audio> и <video>. Для автоматизации тестирования функциональности, связанной с воспроизведением и управлением мультимедийными файлами, часто используется WebdriverIO. Этот инструмент позволяет взаимодействовать с элементами страницы и проверять их поведение. В контексте тестирования аудио-элементов важно учитывать не только базовые действия, такие как воспроизведение или пауза, но и более сложные аспекты: корректное отображение, настройка параметров, обработка ошибок и проверка доступности.

Подготовка среды для тестирования

Прежде чем приступить к автоматизированным тестам, необходимо настроить WebdriverIO. Установка WebdriverIO с соответствующими плагинами для работы с браузером (например, ChromeDriver) должна быть выполнена через Node.js, использовав команду:

npm install --save-dev webdriverio

Дополнительно нужно установить WebDriver:

npm install --save-dev @wdio/cli

Для взаимодействия с мультимедийными элементами страницы WebdriverIO использует стандартные методы, такие как click, setValue, и getText, а также специальные команды, если необходимо проверять аудио/видео файлы. Важно настроить тесты таким образом, чтобы они могли корректно работать с аудио в различных браузерах и устройствах.

Основные действия с элементами audio

Тег <audio> может содержать различные атрибуты, такие как controls, autoplay, loop и другие. Эти атрибуты могут влиять на поведение элемента и должны быть протестированы.

Проверка наличия элемента на странице

Одним из первых шагов в тестировании аудио является проверка наличия элемента <audio> на странице:

const audioElement = await $('audio');
expect(audioElement).toBeDisplayed();

Этот тест удостоверяется, что аудио-элемент присутствует и видим на странице.

Тестирование воспроизведения

Для проверки того, что аудио начинается воспроизводиться при нажатии на кнопку воспроизведения или автоматически, можно использовать следующий подход. В случае, если на странице имеется кнопка для старта воспроизведения, можно протестировать её с помощью WebdriverIO:

const playButton = await $('#playButton');
await playButton.click();

// Проверка, что аудио начал воспроизведение
const audioElement = await $('audio');
const isPlaying = await audioElement.getAttribute('paused'); // paused = true, если не воспроизводится
expect(isPlaying).toBe('false');

Этот код выполняет клик по кнопке воспроизведения и проверяет, что атрибут paused элемента <audio> изменился на false, что свидетельствует о начале воспроизведения.

Пауза и возобновление воспроизведения

После проверки начала воспроизведения, нужно удостовериться, что функционал паузы работает корректно:

const pauseButton = await $('#pauseButton');
await pauseButton.click();

// Проверка, что аудио приостановилось
const isPaused = await audioElement.getAttribute('paused'); // paused = true, если приостановлено
expect(isPaused).toBe('true');

Этот тест проверяет, что при нажатии на кнопку паузы воспроизведение останавливается.

Перемотка аудио

Для тестирования перемотки аудио-элемента необходимо убедиться, что можно изменять текущую позицию воспроизведения. Это может быть выполнено с использованием атрибута currentTime:

// Установка времени воспроизведения на 30 секунд
await audioElement.setValue('currentTime', 30);

// Проверка, что время изменилось
const currentTime = await audioElement.getAttribute('currentTime');
expect(parseFloat(currentTime)).toBeGreaterThan(29);

Здесь происходит установка времени воспроизведения и проверка, что оно обновилось.

Тестирование атрибутов аудио

Многие аудио-элементы содержат атрибуты, которые могут изменять их поведение. Например, атрибут loop заставляет аудио повторяться. Можно проверить его поведение следующим образом:

const audioElement = await $('audio');
await audioElement.setAttribute('loop', 'true');

// Проверка, что атрибут loop был применён
const loopAttribute = await audioElement.getAttribute('loop');
expect(loopAttribute).toBe('true');

Этот тест гарантирует, что элемент будет зациклён.

Обработка ошибок и событий

Тег <audio> может воспроизводить различные ошибки, такие как невозможность загрузки файла или проблемы с форматом. Для тестирования ошибок важно проверять события error и ended, которые генерируются при возникновении проблем или завершении воспроизведения.

Обработка события error

Можно протестировать обработку ошибок с помощью события error:

const audioElement = await $('audio');
audioElement.addEventListener('error', () => {
    console.log('Ошибка воспроизведения');
});

// Принудительно вызвать ошибку
await audioElement.setAttribute('src', 'invalid_file.mp3');

// Проверка, что ошибка была зафиксирована
const errorOccurred = await audioElement.isExisting(); // Проверка, что элемент по-прежнему существует
expect(errorOccurred).toBe(false);

Обработка события завершения воспроизведения

Тестирование события завершения воспроизведения (ended) позволяет убедиться, что аудио завершает проигрывание как положено:

const audioElement = await $('audio');

// Слушаем событие завершения
audioElement.addEventListener('ended', () => {
    console.log('Аудио завершено');
});

// Принудительно воспроизводим аудио до конца
await audioElement.play();

// Проверка, что событие ended было вызвано
const isEnded = await audioElement.getAttribute('ended');
expect(isEnded).toBe('true');

Проверка доступности аудио

Для того чтобы аудио-элементы были доступными для пользователей с ограниченными возможностями, следует протестировать наличие текстовых подсказок. Использование атрибута aria-label и проверка доступности кнопок управления (например, паузы и воспроизведения) — важный аспект тестирования. Например:

const playButton = await $('#playButton');
const ariaLabel = await playButton.getAttribute('aria-label');
expect(ariaLabel).toBe('Play audio');

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

Проверка взаимодействия с мультимедийным плеером

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

const volumeSlider = await $('#volumeSlider');
await volumeSlider.setValue(0.5); // Устанавливаем громкость на 50%

// Проверка текущей громкости
const volume = await volumeSlider.getValue();
expect(parseFloat(volume)).toBeCloseTo(0.5, 2);

Этот тест проверяет, что ползунок громкости работает должным образом.

Тестирование с использованием различных форматов

HTML5 <audio> поддерживает различные форматы аудио файлов, такие как MP3, OGG и WAV. Важно проверять, что плеер корректно работает с каждым из этих форматов. Для этого можно создать тесты для каждого формата, проверяя, что аудио элемент может корректно загружать и воспроизводить файл.

const mp3Audio = await $('audio');
await mp3Audio.setAttribute('src', 'audio.mp3');
await mp3Audio.play();
expect(await mp3Audio.getAttribute('paused')).toBe('false');

const oggAudio = await $('audio');
await oggAudio.setAttribute('src', 'audio.ogg');
await oggAudio.play();
expect(await oggAudio.getAttribute('paused')).toBe('false');

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

Заключение

Тестирование HTML5 аудио элементов с использованием WebdriverIO требует внимания к деталям: от базовых операций воспроизведения до сложных проверок на доступность и обработку ошибок. Важно, чтобы тесты покрывали не только взаимодействие с элементами, но и проверку поведения на различных устройствах и браузерах. Это обеспечит надёжность и корректность работы мультимедийных функций на веб-странице.