Если вы работаете QA в компании, предоставляющей видеоконтент, вы, должно быть, тестировали воспроизведение видео во многих браузерах и операционных системах, чтобы обеспечить наилучшие впечатления. Таким образом, вы, скорее всего, знаете, насколько утомительным может быть такое тестирование. Особенно, если вам нужно повторить все эти тесты перед развертыванием в рабочей среде в рамках регрессионного тестирования. Рано или поздно вы захотите автоматизировать эти проверки, чтобы оставаться в здравом уме. Или, может быть, вы хотите, чтобы проверка воспроизведения видео была частью вашей инфраструктуры мониторинга e2e.

Одним из подходов будет проверка изменений в селекторах css игрока. Поэтому, когда пользователь нажимает кнопку воспроизведения, какой-то класс изменится на «isPlaying». Но я хотел бы продемонстрировать другой подход — сравнение изображений. Как это работает? Когда тестовый скрипт «нажимает» play, он делает скриншот, а через некоторое время делает еще один. А в конце теста эти два изображения сравниваются и проверяются, отличаются ли они.

В мире JavaScript есть различные библиотеки, которые могут помочь нам в этом. Для этой демонстрации я выбрал модификацию Resemble.js под названием Похожие узлы. Установка довольно проста с npm:

npm install node-resemble-js --save

Затем мы импортируем его и создаем метод compareImages в объекте страницы:

const resemble = require('node-resemble-js')
compareImages (image1, image2, percentage) {
  return new Promise(function (resolve, reject) {
    resemble(image1)
      .compareTo(image2)
      .onComplete(function (data) {     
        data.getDiffImage().pack()
         .pipe(fs.createWriteStream('./reports/' + Date.now()))
        if (data.misMatchPercentage > percentage) {
          resolve(true)
        } else {
          reject()
        }
      })
  })
}

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

И тогда метод isPlaying, который вызовет метод compareImages, может выглядеть так. Использование browser.call() будет ожидать разрешения compareImages:

isPlaying() {
  let screen1 = browser.saveScreenshot()
  browser.pause(5000)
  let screen2 = browser.saveScreenshot()
  return browser.call(this.compareImages(screen1, screen2, 0.1))
}

Мы можем легко настроить процент несоответствия в соответствии с нашими потребностями. Например, мы увеличиваем процент, если мы хотим быть уверены, что не получим ложного срабатывания из-за исчезновения/появления кнопок управления.

И, наконец, добавим утверждение:

const chai = require('chai')
const expect = chai.expect
expect(YourPageObject.isPlaying()).to.be.true