Работа с медиа элементами

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

Protractor предоставляет возможности для автоматизации тестирования веб-приложений на базе Angular, но его функции также позволяют работать с обычными HTML-элементами, включая аудио и видео. Медиа элементы в DOM представлены тегами <audio> и <video>, которые обладают набором стандартных свойств и методов для управления воспроизведением, громкостью и временем.

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

  • currentTime — текущее время воспроизведения в секундах.
  • duration — общая продолжительность медиа в секундах.
  • paused — логическое значение, указывающее, поставлено ли воспроизведение на паузу.
  • volume — уровень громкости (от 0.0 до 1.0).
  • muted — логическое значение, включена ли бесшумность.

Основные методы:

  • play() — запуск воспроизведения.
  • pause() — приостановка воспроизведения.
  • load() — перезагрузка медиа файла.

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

Для работы с медиа элементами используется стандартный синтаксис Protractor через element и локаторы:

const videoElement = element(by.css('video#sampleVideo'));
const audioElement = element(by.css('audio#backgroundMusic'));

Для выполнения действий с элементами можно использовать методы getWebElement() и executeScript(), так как стандартные Protractor действия (click, sendKeys) не всегда подходят для медиа управления.

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

browser.executeScript('arguments[0].play()', videoElement.getWebElement());
browser.sleep(2000); // ожидание 2 секунды для прогрева видео

const isPaused = browser.executeScript('return arguments[0].paused', videoElement.getWebElement());
isPaused.then(paused => {
    console.log('Видео на паузе:', paused);
});

Управление временем воспроизведения

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

// Перемотка видео на 10 секунд
browser.executeScript('arguments[0].currentTime = 10', videoElement.getWebElement());

// Продвинуть аудио на 5 секунд от текущей позиции
browser.executeScript('arguments[0].currentTime += 5', audioElement.getWebElement());

Проверка текущего времени:

const currentTime = browser.executeScript('return arguments[0].currentTime', videoElement.getWebElement());
currentTime.then(time => {
    console.log('Текущее время воспроизведения:', time);
});

Настройка громкости и режима без звука

Protractor позволяет изменять уровень громкости и переключать mute напрямую через Jav * aScript:

// Установить громкость видео на 50%
browser.executeScript('arguments[0].volume = 0.5', videoElement.getWebElement());

// Включить беззвучный режим
browser.executeScript('arguments[0].muted = true', videoElement.getWebElement());

Проверка состояния mute:

const isMuted = browser.executeScript('return arguments[0].muted', videoElement.getWebElement());
isMuted.then(muted => console.log('Видео без звука:', muted));

События медиа элементов

Медиа элементы поддерживают стандартные события браузера, которые можно отслеживать через executeScript или при помощи слушателей в тестах. Основные события:

  • play — воспроизведение началось.
  • pause — воспроизведение приостановлено.
  • ended — воспроизведение завершено.
  • timeupdate — обновление текущего времени воспроизведения.
  • volumechange — изменение громкости или mute.

Пример отслеживания окончания видео:

browser.executeScript(`
    arguments[0].addEventListener('ended', function() {
        window.videoEnded = true;
    });
`, videoElement.getWebElement());

// Позднее проверка состояния
browser.executeScript('return window.videoEnded').then(ended => {
    console.log('Видео завершено:', ended);
});

Проверка готовности медиа

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

  • 0 (HAVE_NOTHING) — данные о медиа отсутствуют.
  • 1 (HAVE_METADATA) — доступны метаданные (длительность, размеры).
  • 2 (HAVE_CURRENT_DATA) — текущее фрейм/сегмент доступен.
  • 3 (HAVE_FUTURE_DATA) — можно воспроизводить хотя бы часть медиа.
  • 4 (HAVE_ENOUGH_DATA) — достаточно данных для воспроизведения всего файла.

Пример ожидания готовности видео:

browser.wait(() => {
    return browser.executeScript('return arguments[0].readyState === 4', videoElement.getWebElement());
}, 5000, 'Видео не готово к воспроизведению');

Особенности тестирования медиа в Protractor

  • Синхронизация: медиа элементы могут загружаться асинхронно, поэтому важно использовать browser.wait и проверки состояния readyState.
  • Платформенные ограничения: воспроизведение медиа в headless-браузерах может требовать дополнительных флагов (например, для Chrome: --autoplay-policy=no-user-gesture-required).
  • Тестирование звука: прямое измерение громкости или воспроизведения звука в автоматических тестах невозможно, проверяется только состояние свойств (paused, muted, volume).

Практические сценарии

  1. Автоматическая пауза видео через заданное время:
browser.executeScript('arguments[0].play()', videoElement.getWebElement());
browser.sleep(3000); // воспроизведение 3 секунды
browser.executeScript('arguments[0].pause()', videoElement.getWebElement());
  1. Проверка завершения аудио:
browser.executeScript(`
    arguments[0].addEventListener('ended', function() {
        window.audioEnded = true;
    });
`, audioElement.getWebElement());

browser.wait(() => {
    return browser.executeScript('return window.audioEnded === true');
}, 10000, 'Аудио не закончилось вовремя');
  1. Перемотка видео в конец и воспроизведение последнего кадра:
browser.executeScript('arguments[0].currentTime = arguments[0].duration', videoElement.getWebElement());

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

Оглавление