Работа с HTML5 Video

Веб-приложения, использующие видеоконтент, становятся всё более популярными. С появлением HTML5 видео, работа с мультимедийными элементами на веб-страницах значительно упростилась. В тестировании веб-приложений с использованием WebDriverIO необходимо понимать, как правильно взаимодействовать с элементами видеоплеера, особенно если требуется проверка воспроизведения видео или управление его параметрами.

Определение видеоплеера на странице

HTML5 <video> элемент поддерживает атрибуты для управления воспроизведением видео, такие как controls, autoplay, loop, и другие. Для работы с этим элементом через WebDriverIO, необходимо сначала найти его на странице. В большинстве случаев это можно сделать с помощью CSS-селекторов, XPath или других стратегий поиска элементов.

Пример использования CSS-селектора для нахождения видеоплеера:

const videoElement = await $('#videoPlayer');

Также возможно использование XPath, если требуется более сложная логика поиска:

const videoElement = await $('//video[@id="videoPlayer"]');

Взаимодействие с видеоэлементом

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

Запуск воспроизведения видео:

Чтобы воспроизвести видео, можно использовать метод play(). Для этого нужно получить доступ к элементу и вызвать на нём метод play() через execute:

await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  video.play();
});

Пауза видео:

Для того чтобы поставить видео на паузу, можно использовать аналогичный подход с методом pause():

await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  video.pause();
});

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

При тестировании видеоконтента может быть полезно проверить, воспроизводится ли видео в данный момент. Для этого можно получить текущий статус с помощью метода paused, который возвращает true, если видео на паузе, и false, если оно воспроизводится.

const isPaused = await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  return video.paused;
});

Если необходимо проверить, завершено ли воспроизведение видео, можно использовать свойство ended, которое будет равно true, если видео закончилось.

const isEnded = await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  return video.ended;
});

Управление громкостью

Для тестирования видео может понадобиться проверить или изменить уровень громкости. HTML5 элемент <video> поддерживает атрибут volume, который позволяет устанавливать уровень громкости от 0 до 1.

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

const volume = await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  return video.volume;
});

Чтобы установить уровень громкости, достаточно выполнить:

await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  video.volume = 0.5; // Устанавливаем громкость на 50%
});

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

Для тестирования функционала перемотки видео можно использовать метод currentTime, который позволяет установить или получить текущее время воспроизведения видео.

Пример получения текущего времени:

const currentTime = await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  return video.currentTime;
});

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

await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  video.currentTime = 30; // Перемотка на 30 секунд
});

Проверка длительности видео

Чтобы проверить длительность видео, используется атрибут duration. Он возвращает продолжительность видео в секундах.

const duration = await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  return video.duration;
});

Знание длительности видео полезно для реализации тестов, например, для проверки, что видео не завершилось раньше времени, если на странице его продолжительность явно указана.

Работа с полноэкранным режимом

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

Для выполнения операции перехода в полноэкранный режим через WebDriverIO можно использовать следующий код:

await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  const requestFullscreen = video.requestFullscreen || video.mozRequestFullScreen || video.webkitRequestFullScreen;
  if (requestFullscreen) requestFullscreen.call(video);
});

Управление субтитрами

Веб-сайты могут использовать встроенные субтитры для видео с помощью элемента <track>. Для тестирования субтитров можно проверить, отображаются ли они, а также активированы ли соответствующие настройки.

Чтобы включить субтитры, можно использовать следующие шаги:

  1. Найти элемент <track> в видеоплеере.
  2. Проверить, доступны ли субтитры и активированы ли они.

Пример:

const subtitlesEnabled = await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  const track = video.querySelector('track');
  return track && track.mode === 'showing';
});

Для изменения режима отображения субтитров:

await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  const track = video.querySelector('track');
  if (track) {
    track.mode = 'showing'; // Включаем субтитры
  }
});

Обработка ошибок при загрузке видео

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

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

await browser.execute(() => {
  const video = document.querySelector('#videoPlayer');
  video.addEventListener('error', () => {
    console.log('Ошибка при загрузке видео');
  });
});

Взаимодействие с элементами управления

Если на веб-странице имеется кастомный видеоплеер с кнопками управления (например, для паузы, воспроизведения, перемотки), можно взаимодействовать с ними, используя WebDriverIO для кликов по кнопкам или ввода текста в элементы управления.

Пример клика по кнопке воспроизведения:

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

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

Заключение

Работа с HTML5 Video через WebDriverIO позволяет тестировать широкий спектр возможностей видеоплееров, включая управление воспроизведением, проверку состояния, работу с громкостью, субтитрами и другими элементами управления. Знание методов работы с видеоконтентом позволяет эффективно автоматизировать тестирование и убедиться в корректности отображения и функциональности видеоматериалов на веб-странице.

Оглавление