Если вы работаете 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