Как синхронно тестировать сайт на нескольких браузерах и устройствах

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

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

Идея синхронизированного тестирования возникла, чтобы разрешить эту ситуацию и сделать рабочий процесс более упорядоченным. Существует плагин Grunt под названием BrowserSync чтобы выполнить это, и мы покажем вам, как развернуть его в своем проекте, в этом посте.

Рекомендуемое чтение: эмуляция области просмотра с метриками устройства Chrome

BrowserSync имеет открытый исходный код и активно развивается. Это кроссплатформенный. Вы можете использовать его в Windows, OS X и Linux. Ghostlab, с другой стороны, доступен только в OS X и Windows. BrowserSync бесплатен, что помогает, если у вас мало или совсем нет бюджета для работы.

Без дальнейших церемоний, давайте посмотрим, как работает BrowserSync.
Установка
Для начала мы собираемся использовать Grunt. Нам нужно убедиться, что установлен grunt-cli, а также плагин, Grunt BrowserSync, Этот плагин синхронизацияs ряд взаимодействий, которые происходят на веб-сайте, включая прокрутку страниц, заполнение полей формы и нажатие на ссылки.

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

npm установить grunt –save-dev
npm установить grunt-browser-sync –save-dev

конфигурация
После установки загрузите BrowserSync в Gruntfile.js следующим образом.

module.exports = function (grunt) {
    grunt.initConfig ({
        browserSync: {
            bsFiles: {
                источник: [ ‘index.html’, ‘./css/*.css’ ]
},
            режим призрака: {
                клики: правда,
                формы: правда,
                свиток: правда
            },
            опции: {
                сервер: {
                    baseDir: “./”
                }
            }
        }
    });

    // загружаем npm задачи
    grunt.loadNpmTasks (‘grunt-browser-sync’);

    // определить задачу по умолчанию
    grunt.registerTask (‘default’, [‘browserSync’] );
}

Эта конфигурация будет отслеживать style.css, а также index.html и автоматически обновлять браузер при обнаружении изменений в этих файлах. Мы также разрешаем ghostMode синхронизировать взаимодействия на веб-сайте, такие как прокрутка и нажатие.

Все готово. Теперь мы запускаем grunt для запуска задачи browserSync, которую мы уже установили в конфигурации.

хрюкать

В отличие от старой версии, новый BrowserSync теперь настроит все для использования, включая статический сервер, и предоставит URL-адреса, по которым он живет, для перезагрузки нашего сайта.
На следующем анимированном GIF-изображении видно, что все обновления, изменения и взаимодействия синхронизируются в реальном времени в браузере, как и изменения index.html и style.css.
Дополнительные ресурсы
Вот больше ресурсов, чтобы углубиться в Grunt и «Синхронное тестирование».