Skip to content

Latest commit

 

History

History
167 lines (112 loc) · 8.17 KB

README.ru.md

File metadata and controls

167 lines (112 loc) · 8.17 KB

Введение в работу с Gemini

Gemini – это утилита для регрессионного тестирования отображения веб-страниц.

Ключевые возможности:

  • Работа в различных браузерах;
  • Тестирование фрагментов веб-страниц;
  • Учет свойств box-shadow и outline при вычислении позиции и размера элемента;
  • Игнорирование не ошибочных различий между изображениями (артефакты рендеринга, текстовая каретка);
  • Сбор статистики покрытия CSS-кода тестами.

Gemini создан в Яндексе и используется разработчиками библиотек блоков.

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

Установка стороннего ПО

Перед началом работы с Gemini необходимо установить следующее программное обеспечение:

  1. Selenium Server – для тестирования в различных браузерах.
  2. PhantomJS – консольный аналог WebKit-браузера.

Установка Gemini

Глобальная установка

Для установки утилиты используется команда install пакетного менеджера npm:

    npm install -g gemini

Глобальная инсталляция будет использоваться для запуска команд.

Локальная установка

Для написания тестов нам также понадобится локальная инсталляция Gemini. В папке проекта выполните команду:

npm install gemini

Настройка

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

Использование в связке с PhantomJS

Наиболее простой вариант настройки предполагает использование только локально установленного PhantomJS. В этом случае, достаточно указать параметр rootUrl – корневой URL нашего сайта. Например,

rootUrl: http://yandex.com

Также, в этом случае необходимо вручную запустить PhantomJS в режиме WebDriver:

phantomjs --webdriver=4444

Использование в связке с Selenium

Для тестирования в различных браузерах необходимо использовать Selenium. Вы можете воспользоваться удаленным Selenium Grid, облачным провайдером (таким как SauceLabs или BrowserStack) или запустить сервер локально:

java -jar selenium-server-standalone.jar

В конфигурационном файле следует дополнительно указать адрес Selenium-сервера и список браузеров для тестирования:

rootUrl: http://yandex.com
gridUrl: http://localhost:4444/wd/hub

browsers:
  chrome:
    browserName: chrome
    version: "37.0"

  firefox:
    browserName: firefox
    version: "31.0"

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

Другие варианты настройки

Подробнее о структуре конфигурационного файла.

Создание тестов

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

Для примера, напишем тест для поискового блока на yandex.com:

var gemini = require('gemini');

gemini.suite('yandex-search', function(suite) {
    suite.setUrl('/')
        .setCaptureElements('.main-table')
        .capture('plain')
        .capture('with text', function(actions, find) {
            actions.sendKeys(find('.input__control'), 'hello gemini');
        });
});

Мы создаем новый тестовый набор yandex-search и говорим, что будем снимать элемент .main-table c корневого URL http://yandex.com. При этом у блока есть два состояния:

  • plain – сразу после загрузки страницы;
  • with text - c введенным в элемент .input__control текстом hello gemini.

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

Подробнее о методах создания тестов.

Использование CLI

Для завершения создания теста необходимо сделать эталонные снимки используя команду

gemini gather [путь к файлам тестов]

Для запуска тестов используется команда сравнения текущего состояния блока с эталонным снимком:

gemini test [путь к файлам тестов]

Чтобы наглядно увидеть разницу между текущим изображением и эталоном (diff), можно использовать функцию HTML-отчёта:

gemini test --reporter html [путь к файлам тестов]

или получить консольный и HTML отчёты одновременно:

gemini test --reporter html --reporter flat [путь к файлам с тестами]

Подробнее о работе с командной строкой и доступных аргументах.

GUI

Вместо командной строки можно использовать графический интерфейс Gemini. Соответствующий пакет gemini-gui устанавливается отдельно:

npm install -g gemini-gui

Преимущества GUI:

  • Удобный просмотр эталонных изображений;
  • Наглядная демонстрация различий между эталоном и текущим состоянием в реальном времени;
  • Возможность лёгкого обновления эталонных изображений.

Gemini API

Программный интерфейс Gemini позволяет использовать утилиту в качестве инструмента тестирования в скриптах и инструментах сборки.

Подробнее о Gemini API.