Как выполнить синхронизированное тестирование с помощью Ghostlab

В предыдущем посте мы показали, как выполнять синхронизированное тестирование с использованием Синхронизация браузера, Если вы следили за публикацией, вы увидите, что «синхронизированное тестирование» ускорит рабочий процесс разработки с точки зрения тестирования оптимизированного для мобильных устройств веб-сайта одновременно на нескольких браузерах и устройствах.

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

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

Начиная

Стоимость Ghostlab составляет 49 долларов США за одну лицензию, которую можно использовать на двух компьютерах. Он также предоставляет пробную версию со всеми имеющимися функциями, так что вы можете изучить ее, прежде чем принять решение о покупке.

Он доступен для Windows и OS X. Возьми это здесь, Установите его в соответствии с процедурой вашей ОС, затем запустите.

Мы готовы использовать Ghostlab.
Конфигурация проекта
Первое, что нам нужно сделать, это добавить наши проекты в Ghostlab. Есть два варианта: мы можем перетащить каталог проекта в окно приложения или скопировать и вставить URL-адрес проекта, вот так.

Ghostlab регистрирует все добавленные проекты следующим образом

Мы также можем перетаскивать список проектов, чтобы переключать их позиции.

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

На этих вкладках мы можем включить или выключить сервер Ghostlab, выбрать браузер для просмотра проекта, изменить заголовок или URL-адрес проекта и т. Д.

Включение сервера
Как мы упоминали выше, Ghostlab оснащен встроенным сервером, который работает как со статическими сайтами (только HTML и CSS), так и с динамическими сайтами, созданными с помощью PHP, Ruby и т. Д. После настройки всех конфигураций мы можем перейти на включение сервера. Для этого вы можете просто щелкнуть значок стрелки в списке проектов.

Когда сервер включен, вы увидите уведомление с URL-адресом сервера и портом в левом нижнем углу окна приложения. Нажмите на значок ракеты, чтобы запустить проект в браузере по умолчанию, или нажмите значок браузера под ракетой, чтобы выбрать другие браузеры. Вам не нужно копировать и вставлять URL.

Примечание. Сервер применим только для одного проекта за раз. Если вы включите сервер в другом проекте, он отключится для более старого проекта и включится для вновь открытого.
Подключение устройств
Когда мы запускаем проект в любом браузере, Ghostlab зарегистрирует его на правой боковой панели.

Мы можем отладить проект на каждом из этих подключенных браузеров / устройств, используя встроенную Ghostlab инспектор кода, Нажать на < >и инспектор кода (что похоже на Chrome) появится.

Когда мы просматриваем дерево DOM, соответствующие элементы в браузере подсвечиваются.

И в конечном итоге вы также можете выполнить «синхронизированное тестирование», аналогично Browser Sync. Он будет автоматически обновлять все подключенные браузеры при каждом изменении. Взаимодействия с пользователем, такие как прокрутка, нажатие и заполнение форм, также отражаются одновременно.

Последняя мысль

Мы показали вам, как выполнять «синхронизированное тестирование» с использованием инструмента командной строки Browser Sync и приложения с графическим интерфейсом. И то, и другое очень хорошо работает. Моя единственная жалоба с Ghostlab заключается в том, что пользовательский интерфейс кажется немного неуместным в OS X; Я уверен, что в Windows все выглядит хорошо.

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