Контролируем стабильность верстки. Screenshot-Driven Testing

Степан Овчинников
Александр М.
Подписаться
Продолжаем тему качества веб-разработки.

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

Серверную сторону проверяют 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
Понравилась статья?
Поделитесь ссылкой с друзьями и коллегами!

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

20.01.2021
Как увеличить продажи оптово-розничных компаний с помощью автоматизации? Заказчики приходят в ИНТЕРВОЛГУ за решением бизнес-задач: повышения продаж, ускорения доставки, упрощения процессов. Обычно это e-commerce и автоматизация. ...
23.04.2020
ТОП проблем сайтов на Битриксе из аудитов ИНТЕРВОЛГИ В статье расскажем о наиболее частых ошибках разработки проектов на 1С-Битрикс. Мы выявили их в ходе 10+ последних аудитов производительности и качества код...
16.04.2020
Запускаем бесконтактную доставку в интернет-магазине на БитриксСегодня, как никогда, магазины стремятся перенести продажи в онлайн. Это не просто тренд – это необходимость. Но если у вас уже есть интернет-магазин, это не зн...
24.09.2019
Foodtech-разработка: интерфейсы для касс MYBOXРабота в сфере Foodtech — одно из ключевых направлений ИНТЕРВОЛГИ. Чтобы разобраться с задачей переработки дизайна кассового ПО MYBOX нам пришлось выезжать ...
09.07.2019
Решение типовых ошибок при организации продаж через интернет-магазин в разные регионы Как сделать свой сайт удобным для пользователей, оперативным в обновлении актуальных остатков, цен, скидок для товаров в их регионе? Счастливые облад...
21.05.2019
Модуль Инструменты SEO специалиста. База знаний В статье найдете ответы на часто задаваемые вопросы по модулю Инструменты SEO-специалиста. Модуль развивается, количество пользователей и соответстве...

Мы работаем по одному из двух форматов:

  • аренда команды (от 2 человек, не менее 3 месяцев);
  • итерации с фиксированной ценой (1-3 месяца длительностью).

ИНТЕРВОЛГА предоставляет:

  • регулярные онлайн-планерки с заказчиком;
  • квалифицированных специалистов;
  • организованную команду (находятся в одном помещении, что упрощает решение рабочих вопросов);
  • полную прозрачность и регулярность отчетов о результатах.

Для доработок и развития мы предлагаем формат 100 часов в месяц. Что можно сделать за это время:

  • новые нетиповые страницы или раздел;
  • 2 отчета с индивидуальными настройками;
  • 3-5 веб-сервисов интеграции;
  • замудренный калькулятор и т.п.

Поддержка «чтобы все работало как часы» стоит 45 тысяч рублей в месяц и описана тут.

Хочешь получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишись на рассылку — спамить не будем