Продолжаем тему качества веб-разработки.

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

Серверную сторону проверяют unit-тесты, пользовательские сценарии — Selenium-тесты, Zabbix проверит как справляется ваш сервер и хватает ли ресурсов.

Все эти проверки мы собираем в автоматическую систему контроля качества (continuous integration).

Но есть одна штука на сайте, которую так не проверишь: внешний вид, верстка.

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

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

Это — проблема, и ее надо решать.

Чип и Дейл Отдел сопровождения сайтов ИНТЕРВОЛГИ спешит на помощь и решает этот вопрос.

Представляем вам методику Screenshot-Driven Testing :-)

Кому нужно тестировать верстку?

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

Но если у вас:

  • сложный фронтенд — адаптив, много эффектов, сложная логика в разных браузерах;
  • часто меняются html, стили и клиентские скрипты;
  • несколько разработчиков;
  • применяются визуальные wysiwyg-редакторы, позволяющие менять стили на странице;
  • business-critical сценарии зависятот верстки (например, оформление заказа на мобильных сделано так сложно, что от каждого чиха рассыпается),

то без контроля верстки вы обречены на проблемы.

Как можно контролировать верстку?

Способ первый: никак, клиенты расскажут или сами случайно заметим.

Минусы очевидны: несвоевременная реакция, потери заказов.

Способ второй: специально обученные люди.

Плюс: есть шанс что человек увидит проблему.

Минусы: есть риск, что человек НЕ увидит проблему. Глаза замыливаются. Да и долго очень.

Способ третий: автоматизация.

Автоматизация рулит. Расскажем как это работает.

Screenshot-driven testing

Идея:

  1. Берем элементы сайта, которые мы хотим проверять на стабильность.
  2. Получаем “эталонный внешний вид”.
  3. Отслеживаем состояние этих элементов во всех браузеров.
  4. При “ненормальных” отклонениях бьем тревогу.

Это тестирование, основанное на скриншотах.

Сказать легко, сделать сложнее.

Выбираем софт, автоматизируем процесс контроля верстки

Что должен уметь софт, который нам нужен?

Например, видеть css-регрессии (это когда в одном месте поправили, а в другом уехало)

Регрессия

Вот это микроскопическое смещение человек мог и пропустить.

Есть средства, которые это умеют. Кандидаты:

  1. Автоматизация на Selenium
  2. BackstopJS
  3. Gemini
  4. Ручной BrowserStack

Мы системно подошли к исследованию, вот результат:


Selenuim

BackstopJS

Gemini

BrowserStack

Поддержка браузеров

Практически любой браузер

PhantomJS (Webkit), SlimerJS (Gecko)

Может использовать браузеры selenium’а и BrowserStack’а

Большинство используемых браузеров и устройств

Настраиваемость: фрагменты, точность,

Долго если первый раз

Просто и быстро

Долго если первый раз

Просто и быстро

Простота работы

Написание тестов занимает достаточно большое время

Просто

Сложность работы с инструментом зависит от качества и сложности верстки

Просто

Недостатки

Сложно отследить положение и вид элементов на странице. Легко проверить что элемент есть и он работает.

Не все браузеры

Высокий барьер входа, некоторые глюки

Денег стоит :-)

Стоимость

Бесплатно

Бесплатно

Бесплатно

99$ в месяц за неограниченное количество тестов


Проблема scroll’а при автотестах верстки

Как выяснилось, в gemini нельзя принудительно проскролить страницу, а это нужно для тестирования многих сценариев и эффектов.

На решение проблемы ушло больше 2 рабочих дней нашего техлида Александра Михайлова, и в итоге было найдено простое и изящное решение.

Проблему мы локализовали и устранили, а строку кода покажем тем, кто поделится в соцсетях нашей статьей :-)

Результат: Screenshot-driven testing (Gemini+BrowserStack) на службе народного хозяйства

На базе Gemini+BrowserStack построена система, которая умеет отлавливать отклонения верстки.

схема системы отслеживания отклонения верстки



Примеры автоматического тестирования фронтенда и верстки

Попроще

На тестировании увидели что НЕМНОЖКО съехали пункты меню и кнопки соцсетей Пример: съехали пункты меню и кнопки соцсетей

После обновления БЭМ пропали пунктирные подчеркивания в меню Пример: после обновления БЭМ пропали пунктирные подчеркивания в меню

Пропало меню на посадочной.

Пример: пропало меню на посадочной

Посложнее

Интернет-магазин путешествий на круизных лайнерах.

На мобильных при оформлении заказа планки с ценой и кнопкой “continue” должны “прилипать” к верху и низу страницы.
ИНОГДА они не прилипают. Этот “шрединбаг” стоил много литров крови, и только автотесты верстки улучшили ситуацию.

мобильная версия исправлены отклонения верстки

Сколько стоит автоматическое тестирование верстки?

Мы предоставляем этот вид автоматического тестирования в комплекте с другими видами тестирования. Цены на автоматическое тестирование и функциональный мониторинг сайта 24х7:
 

Тариф

Попробовать

Втянулся

Плотно сижу

Бекап, храним 2 проверенных

1 в неделю

2 в неделю

5 в неделю

Время реакции робота

24х7

Время реакции человека

8х5, 8ч

8х5, 4ч.

8х5, 2ч

Количество тестов

3

3 + 1

3 + 5

Прогонов в сутки

6

12

24

Время восстановления*

до 2 раб. дней

Оплата восстановления*

почасовая

0

0

Цена

10 000 ₽ в месяц

90 000 ₽ в квартал

180 000 ₽  в квартал

Заказчикам: оставляйте заявку на подключение системы автоматического мониторинга стабильности вашего сайта 24х7
Инженерам: делитесь статьей в соцсетях, пришлем информацию о том что и как нужно дописать в gemini для стабильности работы.
Сэкономим вам 2 рабочих дня.
Оцените статью
22.08.2016
Понравилась статья?
Поделитесь ссылкой с друзьями и коллегами!

Статьи по теме

Как b2b-платформа передает в 1С данные по новым контрагентам В этой статье мы расскажем, что происходит после того, как клиент зарегистрировал в б2б-кабинете новое юридическое лицо и сделал заказ, а также покажем, как...
Автоматизация и оптимизация бизнес-процессов — лонгрид, чтобы не запутаться Статья будет полезна всем, кто хочет улучшить эффективность своего бизнеса или узнать больше о возможностях автоматизации бизнес-процессов для повышения ко...
10 обязательных задач поддержки сайта на БитриксСтатья посвящена организации поддержки сайтов на Битрикс. Здесь не только про решение технических проблем и устранение багов. Здесь про развитие живых проектов...
B2B-SaaS или B2B-система (платформа+CRM) на вашем сервере: плюс и минусы, что выбрать? Введение Эта статья для коммерческих директоров, руководителей отделов продаж производственных и оптово-торговых компаний, которые ищут инструменты для ро...
Обзор международных исследований о тенденциях развития B2B-сегмента Важность темы — рост B2B-продаж в онлайне В современном бизнесе наблюдается стремительный переход в online оптовых продаж. Это стало одной из ключевых тен...
Несколько способов сделать оптовый заказ на портале — Обновление B2B-платформы (v2.0) Коллеги, спешим поделиться важной новостью! Мы обновили один из наших флагманских продуктов — готовую платформу оптовых продаж. B2B-платформа v2.0 сочетает...
Мы работаем по одному из двух форматов:
  • аренда команды (от 2 человек, не менее 3 месяцев);
  • итерации с фиксированной ценой (1-3 месяца длительностью).
ИНТЕРВОЛГА предоставляет:
  • регулярные онлайн-планерки с заказчиком;
  • квалифицированных специалистов;
  • организованную команду (находятся в одном помещении, что упрощает решение рабочих вопросов);
  • полную прозрачность и регулярность отчетов о результатах.
Ключевые услуги:
  • нагруженный интернет-магазин;
  • личный кабинет;
  • оптовые продажи — B2B-платформа;
  • маркетплейс;
  • технический аудит сайта;
  • Битрикс24 — корпоративные HR-порталы;
  • Битрикс24 — построение CRM-системы;
  • Битрикс24 — личные кабинеты сотрудников;
  • Битрикс24 — аудит портала;
  • 1С — интеграция с другими системами;
  • 1С — доработка системы;
  • маркетинг — комплексное интернет-продвижение;
  • маркетинг — продвижение для B2B.
Хотите получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишитесь на рассылку — спамить не будем