Метод пристального взгляда
Wish list
- Полуавтоматический инструмент предрелизной проверки
- Возможность проверить перед пушем, что ничего не сломалось
- TeamCity, агенты, сломанные тесты…
- …
- Релиз близко!
WebDiff
WebDiff
WebDiff
De facto
- Поддержка Firefox, Chrome
- Скриншоты страницы целиком (вертикальный скроллинг)
- Изменение размеров окна и эмуляция мобильных устройств
- Ожидание загрузки динамического контента
- Cookies, подключение произвольных CSS / JS [WebExtension]
- Просмотр/модификация HTTP-заголовков [WebExtension]
- Формирование HTML-отчета для артефактов TeamCity
Links
Gemini
Обо мне
- Фронтендер в Контур.Гособлако
- Не люблю рутину
- Пишу тесты
- SPA приложение
- Много редакторов форм
- Кастомизация под заказчика
- Хостится у заказчика
- Заказчик — Государство
Сегодня у нас
- 50+ реквизитов
- 5 типов редакторов реквизитов
- 10 типов редакторов полей
- 10 параметров отображения поля
Проблемы
- Бэкенд генерирует формы
- Изменяя один редактор можно поломать остальные
- Соответствие прототипам после рефакторинга
- После обновления retail-ui быть спокойнее
Стильно.
Модно.
Молодежно.
Используем песочницу Storybook
- Позволяет разрабатывать компоненты в «вакууме»
- Упрощает тестирование
- Отладка компонентов становится проще
- Storybook ❤ Gemini
Тестируем верстку скриншотами
- Делаем скриншоты компонентов в разных состояниях
- Сравниваем между собой автоматически
- Храним эталоны в репозитории
Gemini
Плюсы
- Умеет делать скриншоты любой части страницы
- Есть API для взаимодействовия с UI
- Запуск тестов в разных браузерах
- Эталоны в репозитории
Минусы
- Поддержка инфраструктуры (selenium)
- Нужно писать тесты
Бонусы
- Возможность игнорировать лишнее
- Подробный HTML отчёт
- Есть GUI
- Полезные плагины (teamcity, react, webpack)
Пример теста
gemini.suite('RequisiteHistoryEditor', suite => {
suite.setUrl(url)
.setCaptureElements(selectors)
.capture('clicked', function (actions, find) {
actions.click(find(rowSelector));
});
});
Пример теста
gemini.suite('RequisiteHistoryEditor', suite => {
suite.setUrl(url)
.setCaptureElements(selectors)
.capture('clicked', function (actions, find) {
actions.click(find(rowSelector))
});
});
Пример теста
gemini.suite('RequisiteHistoryEditor', suite => {
suite.setUrl(url)
.setCaptureElements(selectors)
.capture('clicked', function (actions, find) {
actions.click(find(rowSelector);
});
});
Пример теста
gemini.suite('RequisiteHistoryEditor', suite => {
suite.setUrl(url)
.setCaptureElements(selectors)
.capture('clicked', function (actions, find) {
actions.click(find(rowSelector));
});
});
Пример теста
gemini.suite('RequisiteHistoryEditor', suite => {
suite.setUrl(url)
.setCaptureElements(selectors)
.capture('clicked', function (actions, find) {
actions.click(find(rowSelector));
});
});
Пример теста множеста страниц
const urls = [ "/", "/products", "/support" ];
urls.forEach((url, i) =>
gemini.suite(`suite-${i}`, suite =>
suite.setUrl(url)
.setCaptureElements("#root")
.capture('plain')
)
)
Пример теста множеста страниц
const urls = [ "/", "/products", "/support" ];
urls.forEach((url, i) =>
gemini.suite(`suite-${i}`, suite =>
suite.setUrl(url)
.setCaptureElements("#root")
.capture('plain')
)
)
Пример теста множеста страниц
const urls = [ "/", "/products", "/support" ];
urls.forEach((url, i) =>
gemini.suite(`suite-${i}`, suite =>
suite.setUrl(url)
.setCaptureElements("#root")
.capture('plain')
)
)
Профит использования css/style тестирования
- Меньше боли при рефакторинге
- Оперативно видим что сломалось
- Больше времени на разработку*
Скриншотное тестирование в Контуре
- Скриншотят 6 команд
- Gemini используют 2 команды
Call to action
- Используйте песочницу компонентов
- Попробуйте написать скриншотный тест
Вопросы?
Как настроить git lfs
- >$ git lfs install
- >$ git lfs track "gemini/screens/**/*"
