Введение
Если вы веб-разработчик, ориентированный на работу в сети с несколькими устройствами, вам, вероятно, придется тестировать свои сайты и веб-приложения на различных устройствах и конфигурациях. В этом может помочь синхронное тестирование, которое является эффективным способом автоматического выполнения одного и того же взаимодействия на нескольких устройствах и браузерах одновременно.
Синхронное тестирование может помочь решить две особенно трудоемкие проблемы:
- Синхронизация всех ваших устройств с URL-адресом, который вы хотите протестировать. Загрузка их вручную на каждое устройство — это вчерашний день, занимает больше времени и позволяет пропустить регрессии.
- Синхронизация взаимодействия. Возможность загрузки страницы отлично подходит для визуального тестирования, но для тестирования взаимодействия в идеале также желательно иметь возможность синхронизировать прокрутку, клики и другие действия.
К счастью, если у вас есть доступ к некоторым из ваших целевых устройств, существует ряд инструментов, направленных на улучшение потока данных с вашего настольного компьютера на мобильные устройства. В этой статье мы рассмотрим Ghostlab, Remote Preview, Adobe Edge Inspect и Grunt.
Инструменты
GhostLab (Mac)
Ghostlab — это коммерческое приложение для Mac (49 долларов США), предназначенное для синхронизации тестирования сайтов и веб-приложений на нескольких устройствах. При минимальной настройке он позволяет одновременно синхронизировать:
- Клики
- Навигация
- Свитки
- Ввод формы (например, формы входа, регистрации)
Это делает тестирование пользовательского опыта вашего сайта на нескольких устройствах очень простым. После того как вы открыли свою страницу в браузере на своих устройствах, любые изменения в навигации (включая обновления) приводят к мгновенному обновлению любых других подключенных устройств. Ghostlab поддерживает просмотр локальных каталогов, поэтому это обновление также происходит, когда вы сохраняете изменения в локальных файлах, обеспечивая постоянную синхронизацию всего!
Я нашел настройку Ghostlab безболезненным процессом. Для начала загрузите, установите и запустите пробную версию (или полную версию, если вы настроены покупать). Затем вам нужно будет подключить свой Mac и устройства, которые вы хотите протестировать, к одной и той же сети Wi-Fi, чтобы их можно было обнаружить.
После запуска Ghostlab вы можете либо нажать «+», чтобы добавить URL-адрес для тестирования, либо просто перетащить его из адресной строки браузера. Альтернативно, перетащите локальную папку, которую вы хотите протестировать, в главное окно, и будет создана новая запись на сайте. Для этой статьи я тестирую действующую версию http://html5rocks.com . Нахально, да? ; )
Затем вы можете запустить новый сервер Ghostlab, нажав кнопку воспроизведения «>» рядом с названием вашего сайта. При этом запускается новый сервер, доступный по IP-адресу, специфичному для вашей сети (например, http://192.168.21.43:8080 ).
Здесь я подключил Nexus 4 и указал Chrome для Android на IP-адрес, который мне дал Ghostlab. Это все, что мне нужно сделать. Ghostlab не требует установки специального клиента для каждого устройства, как некоторые другие решения, и это означает, что вы можете начать тестирование еще быстрее.
Любое устройство, которое вы подключаете к URL-адресу Ghostlab, будет добавлено в список подключенных клиентов на боковой панели справа от главного окна Ghostlab. Двойной щелчок по имени устройства отображает дополнительные сведения, такие как размер экрана, ОС и т. д. Теперь вы сможете протестировать навигацию и синхронизацию кликов! Ура.
Ghostlab также может отображать некоторые статистические данные о подключенных устройствах, такие как строка UA, ширина и высота области просмотра, плотность пикселей устройства, соотношение сторон и многое другое. В любой момент вы можете вручную изменить проверяемый базовый URL-адрес, щелкнув шестеренку настроек рядом с записью. Откроется окно конфигурации, которое выглядит следующим образом:
Теперь я могу выбрать одно из других подключенных устройств, нажимать на различные ссылки вокруг HTML5Rocks, и навигация синхронизируется как на моем настольном Chrome (где я ввел тот же URL-адрес Ghostlab), так и на всех моих устройствах.
Что еще лучше, у Ghostlab есть опция, позволяющая вам проксировать все ссылки, проходящие через сеть, чтобы вместо щелчка по http://192.168.21.43:8080/www.html5rocks.com переходить на www.html5rocks.com/en. / Performance (например), что может нарушить автоматическое обновление между устройствами, используемое другими решениями, можно просто перевести эту ссылку в http://192.168.21.43/www.htm5rocks.com/en/ Performance, чтобы навигация была полностью без проблем на всех моих устройствах.
Чтобы включить, установите флажок «Загружать весь контент через Ghostlab» на вкладке «Загрузка контента».
Увидев это в действии:
Ghostlab способен загружать любое количество сайтов или окон в любом поддерживаемом браузере. Это позволит вам протестировать не только ваш сайт в разных разрешениях, но и то, как ваш код ведет себя в разных браузерах и платформах. Ура!
Ghostlab позволяет вам настроить параметры рабочей области проекта, которую вы просматриваете, и указать, хотите ли вы, чтобы изменения в каталоге отслеживались и обновлялись при обнаружении. Это означает, что изменения приводят к обновлению всех подключенных клиентов. Больше никаких ручных обновлений!
Возможно, вам интересно, чем еще может помочь Ghostlab. Хотя это, конечно, не швейцарский нож, он также поддерживает удаленную проверку кода на подключенных устройствах. В главном интерфейсе двойной щелчок по имени любого устройства должен вызвать опцию «отладки», которая запустит версию Chrome DevTools , с которой вы сможете поиграть.
Ghostlab делает это возможным с помощью встроенного удаленного веб-инспектора Weinre , который позволяет отлаживать сценарии и настраивать стили на подключенных устройствах. Подобно удаленной отладке , доступной для Chrome для Android, вы можете выбирать элементы, запускать некоторые профили производительности и сценарии отладки.
В целом я был впечатлен тем, как быстро мне удалось использовать Ghostlab для повседневного тестирования на разных устройствах. Если вы фрилансер, стоимость коммерческой лицензии может показаться вам немного высокой (дополнительные варианты см. ниже). Однако в противном случае я рад порекомендовать Ghostlab.
Adobe Edge Inspect CC (Mac, Windows)
Adobe Edge Inspect входит в пакет подписки Adobe Creative Cloud, но также доступен в виде бесплатной пробной версии. Он позволяет вам управлять несколькими устройствами iOS и Android с помощью Chrome (через расширение Chrome Edge Inspector), поэтому, если вы перейдете по определенному URL-адресу, все ваши подключенные устройства останутся синхронизированными.
Чтобы начать настройку, сначала зарегистрируйте учетную запись Adobe Creative Cloud или войдите в существующую учетную запись, если она у вас уже есть. Затем загрузите и установите Edge Inspect с сайта Adobe.com (в настоящее время доступно для Mac и Windows, но не для Linux — извините!). Обратите внимание, что документацию Edge Inspect полезно держать под рукой.
После установки вам понадобится расширение Edge Inspect для Chrome, чтобы вы могли синхронизировать просмотр между подключенными устройствами.
Вам также потребуется установить клиент Edge Inspect на каждое устройство, с которым вы хотите синхронизировать действия. К счастью, клиенты доступны для iOS , Android и Kindle .
Процесс установки позади, и теперь мы можем приступить к проверке наших страниц. Чтобы это работало, вам необходимо убедиться, что все ваши устройства подключены к одной сети.
Запустите Edge Inspect на рабочем столе, расширение Edge Inspect в Chrome, а затем приложение на своих устройствах (см. ниже):
Теперь мы можем перейти на такой сайт, как HTML5Rocks.com, на настольном компьютере, и наше мобильное устройство автоматически перейдет на ту же страницу.
В расширении вы также увидите свое устройство в списке с символом <> рядом с ним, как на снимке экрана ниже. Нажав на эту кнопку, вы запустите экземпляр Weinre, который позволит вам проверить и отладить вашу страницу.
Weinre — это средство просмотра и консоль DOM, в котором отсутствуют функции Chrome DevTools, такие как отладка JavaScript, профилирование и сетевой водопад. Хотя это минимум инструментов разработчика, он полезен для проверки работоспособности DOM и состояния JavaScript.
Расширение Edge Inspect также поддерживает легкое создание снимков экрана с подключенных устройств. Полезно для тестирования макета или просто для получения снимков вашей страницы, чтобы поделиться ими с другими.
Edge Inspect — отличное решение для разработчиков, которые уже платят за CC. Однако у него есть несколько предостережений, например, для каждого устройства требуется установка выделенного клиента и небольшая дополнительная работа по настройке, которую вы можете не найти в альтернативе, такой как Ghostlab.
Удаленный предварительный просмотр (Mac, Windows, Linux)
Remote Preview — это инструмент с открытым исходным кодом, в котором вы размещаете HTML-страницы и контент, который можно отображать на нескольких устройствах.
Удаленный предварительный просмотр выполняет вызов XHR с интервалом каждые 1100 мс, чтобы проверить, изменился ли URL-адрес в файле конфигурации. Если обнаруживает, что это так, сценарий обновляет атрибут src iframe, загруженного на страницу, для каждого устройства, загружая в него страницу. Если изменений не обнаружено, сценарий продолжит опрос до тех пор, пока не будут внесены изменения.
Это отлично подходит для объединения устройств и легкого изменения URL-адресов для всех из них. Для начала:
- Загрузите Remote Preview и переместите все файлы для него на локально доступный сервер. Это может быть Dropbox, сервер разработки или что-то еще.
- Загрузите файл index.html из этой загрузки на все ваши целевые устройства. Эта страница будет использоваться в качестве драйвера и загрузит страницу, которую вы хотите протестировать, с помощью iframe.
- Отредактируйте «url.txt» (включенный в загрузку и теперь обслуживаемый на вашем сервере), указав URL-адрес, который вы хотите просмотреть. Сохраните этот файл.
- Удаленный предварительный просмотр заметит, что файл url.txt изменился, и обновит все подключенные устройства, чтобы загрузить ваш URL-адрес.
Несмотря на то, что Remote Preview является низкокачественным решением, он бесплатен и работает.
Grunt + Live-Reload (Mac, Windows, Linux)
Grunt (и Yeoman ) — это инструменты командной строки, используемые для разработки и создания проектов на стороне интерфейса. Если вы уже используете эти инструменты и у вас есть настройка перезагрузки в реальном времени, вы можете легко обновить свой рабочий процесс, чтобы включить тестирование на нескольких устройствах, при котором каждое изменение, внесенное вами в редакторе, вызывает перезагрузку на любом из устройств, которые вы открыли в своем локальном приложении. приложение включено.
Вы, вероятно, привыкли использовать grunt server . При запуске из корневого каталога вашего проекта он отслеживает любые изменения в исходных файлах и автоматически обновляет окно браузера. Это благодаря задаче grunt-contrib-watch, которую мы запускаем как часть сервера.
Если вы использовали Yeoman для создания своего проекта, он создаст Gruntfile со всем, что вам нужно для работы перезагрузки в реальном времени на вашем рабочем столе. Чтобы он работал на разных устройствах, вам просто нужно изменить одно свойство — hostname (на рабочем столе). Он должен быть указан в разделе connect . Если вы заметили, что для hostname установлено значение localhost просто измените его на 0.0.0.0. Затем запустите grunt server , и, как обычно, должно открыться новое окно с предварительным просмотром вашей страницы. URL-адрес, вероятно, будет выглядеть так : http://localhost:9000 (9000 — это порт).
Откройте новую вкладку или терминал и используйте ipconfig | grep inet , чтобы узнать внутренний IP-адрес вашей системы. Это может выглядеть как 192.168.32.20 . Последний шаг — открыть браузер, например Chrome, на устройстве, с которым вы хотите синхронизировать загрузку в реальном времени, и ввести этот IP-адрес, а затем номер порта, указанный ранее. т.е. 192.169.32.20:9000 .
Вот и все! Live-перезагрузка теперь должна вызывать любые изменения, которые вы вносите в исходные файлы на рабочем столе, инициировать перезагрузку как в браузере вашего настольного компьютера , так и в браузере вашего мобильного устройства. Потрясающий!
У Yeoman также есть мобильный генератор , который упрощает настройку этого рабочего процесса.
Эммет LiveStyle
Emmet LiveStyle — это плагин для браузера и редактора, который позволяет редактировать CSS в реальном времени в вашем рабочем процессе разработки. В настоящее время он доступен для Chrome, Safari и Sublime Text и поддерживает двунаправленное редактирование (из редактора в браузер и наоборот).
Emmet LiveStyle не требует принудительного полного обновления браузера при внесении изменений, а вместо этого передает изменения CSS через протокол удаленной отладки DevTools. Это означает, что вы можете видеть изменения, внесенные в редакторе вашего рабочего стола, в любой подключенной версии Chrome, будь то настольный Chrome или Chrome для Android.
LiveStyle имеет так называемый «режим нескольких представлений», который идеально подходит для тестирования и настройки адаптивного дизайна для разных окон и устройств. В режиме нескольких представлений все обновления редактора применяются ко всем окнам, как и обновления DevTools для одной и той же страницы.
Установив пакет LiveStyle, чтобы приступить к редактированию CSS в реальном времени:
- Запустите Sublime Text и откройте файл CSS в проекте.
- Запустите Chrome и перейдите на страницу с CSS, который вы хотите отредактировать.
- Откройте DevTools и перейдите на панель LiveStyle. Установите флажок «Включить LiveStyle». Примечание. Инструменты разработчика должны быть открыты во время сеанса редактирования в реальном времени для каждого окна, чтобы можно было применить обновления стилей.
- Когда эта опция включена, список таблиц стилей будет отображаться слева, а список файлов вашего редактора — справа. Выберите файл редактора, который будет связан с браузером. Вот и все! Бум.
Теперь список файлов редактора будет автоматически обновляться при редактировании, создании, открытии или закрытии файлов.
Выводы
Кросс-девайсное тестирование по-прежнему является новой и быстро развивающейся областью, в разработке которой находится множество новых претендентов. К счастью, существует ряд бесплатных и коммерческих инструментов для обеспечения совместимости и тестирования на большом количестве наборов устройств.
Тем не менее, в этой области еще есть большой потенциал для улучшения, и мы рекомендуем вам подумать о том, как можно еще больше улучшить инструменты для тестирования на разных устройствах. Все, что сокращает время настройки и улучшает рабочий процесс между устройствами, является победой.
Проблемы
Возможно, самая большая проблема, с которой я столкнулся во время тестирования с помощью этих инструментов, заключалась в регулярном переходе устройств в спящий режим. Это не является препятствием для сделки, но через некоторое время начинает раздражать. Там, где это возможно, в качестве обходного пути рекомендуется отключить спящий режим ваших устройств, однако имейте в виду, что это может привести к разрядке аккумулятора, если вы не всегда подключены к сети.
Лично я не столкнулся с какими-либо серьезными проблемами с GhostLab. Цена в 49 долларов некоторым может показаться немного завышенной; однако имейте в виду, что если вы используете его регулярно, он более или менее окупается. Одним из самых приятных моментов в настройке было отсутствие необходимости беспокоиться об установке и управлении клиентом для каждого целевого устройства. Один и тот же URL работал везде.
При использовании Adobe Edge Inspect необходимость устанавливать и использовать определенные клиенты на каждом устройстве оказалась немного утомительной. Я также обнаружил, что он не обновляет последовательно все подключенные клиенты, поэтому мне пришлось делать это самому из расширения Chrome. Для этого также требуется подписка на Creative Cloud и ограничивается загрузкой сайтов в клиенте, а не в выбранном браузере на ваших устройствах. Это может ограничить ваши возможности точного тестирования.
Удаленный предварительный просмотр работал так, как рекламируется, но он чрезвычайно легок. Это означает, что для чего-то большего, чем просто обновление вашего сайта на разных устройствах, вам понадобится более продвинутый инструментарий. Например, он не будет синхронизировать клики или прокрутки.
Рекомендации
Если вы ищете бесплатное кроссплатформенное решение для начала работы, я рекомендую использовать Remote Preview. По моему опыту, для тех, кто работает в компании и ищет платное решение, GhostLab неизменно превосходен, но доступен только для Mac. Для пользователей Windows Adobe Edge Inspect — лучший вариант, и, за исключением некоторых особенностей, он обычно выполняет свою работу.
Grunt и LiveStyle также отлично подходят для расширения вашей интерактивной итерации во время разработки.