Цель этой статьи – рассмотреть, как мы можем интегрировать платформу Applitools для добавления AI/ML в наши существующие функциональные тесты веб-интерфейса.
Введение в Applitools
Applitools – это “еще один” инструмент, который вы можете использовать в сочетании с Selenium для обработки сложных визуальных типов тестирования, которые вам необходимо выполнить, и оставьте тестирование более функционального типа инструментам, которые предназначены для этого, таким как Selenium. Applitools предоставляет простую в использовании платформу для просмотра визуальных различий между экранами, которые могут обрабатывать различные конфигурации, которые мы рассмотрим позже (например, порт просмотра, типы устройств и т.д.). Он обеспечивает интеграцию с несколькими тестовыми фреймворками и языками программирования, чтобы любая команда могла адаптироваться к своим потребностям.
Интеграция Applitools с тестовыми фреймворками
Существует множество SDK для большинства языков программирования, которые позволяют вам делать снимки и загружать их для визуальной проверки в Applitools. Мы рассмотрим, как начать с интеграции в тестовый проект на базе Java.
Зависимости и SDK
В разделе управления зависимостями maven добавьте следующие зависимости:
com.applitools eyes-selenium-java3 ${eyes-java3.version} com.applitools eyes-images-java3 ${eyes-java3.version}
Перед началом выполнения любого теста selenium нам необходимо инициализировать объекты Eyes и Eyes Runner, чтобы получать изображения в рамках наших тестов.
Пример инициализации бегуна:
EyesRunner runner;
if (visualGrid) {
LOG.info("Applitools: Running on Visual Grid");
runner = new VisualGridRunner(concurrency);
} else {
LOG.info("Applitools: Running on Classic Runner");
runner = new ClassicRunner();
}
Configuration config = new Configuration();
config.addBrowser(1920, 1080, BrowserType.CHROME)
.addBrowser(1920, 1080, BrowserType.FIREFOX)
.addDeviceEmulation(DeviceName.iPhone_X, ScreenOrientation.PORTRAIT)
.setApiKey(apiKey)
.setBatch(batch)
.setMatchLevel(!matchLevel.isEmpty() ? MatchLevel.valueOf(matchLevel) : MatchLevel.LAYOUT);
Давайте рассмотрим аргументы приведенного выше примера. Сначала нам нужно установить тип бегуна, и в настоящее время Applitools поддерживает два варианта:
- Classic Runner : Applitools обработает изображения, сделанные в вашем локальном исполняемом браузере/устройстве
- Visual Grid Runner : Applitools дает вам возможность отправлять изображения и обрабатывать их в различных типах конфигураций (браузеры/устройства), масштабируя ваши тесты на разных платформах, охватывая больше визуальных контрольных точек. Далее у нас есть Ключ API , который предоставляется пользователем-администратором платформы. Пакет можно использовать для установки имени пакета, которое будет использоваться для хранения тестов для этого бегуна, и, наконец, Уровня соответствия , который является типом проверок, которые будут использоваться для сравнения контрольных точек.
Applitools Eyes может протестировать пользовательский интерфейс на 4 различных уровнях сравнения: Точный (Уровень Соответствия.ТОЧНОЕ) – сравнение пикселей с пикселями, не рекомендуется.
Строгий (Уровень Соответствия. STRICT) – Strict сравнивает все, включая содержимое (текст), шрифты, макет, цвета и положение каждого из элементов. Строгий знает, что нужно игнорировать изменения рендеринга, которые не видны человеку. Строгий – рекомендуемый уровень соответствия при выполнении регрессионных тестов в одном браузере/операционной системе (strict не предназначен для кроссбраузерного сравнения).
Содержание (Уровень Соответствия. CONTENT) – Content работает аналогично Strict, за исключением того факта, что он игнорирует цвета.
Макет (Соответствует Уровню. LAYOUT) – Layout, как следует из его названия, сравнивает макеты (т.е. структуру) базового и фактического изображений. Он проверяет выравнивание и относительное положение всех элементов на странице, таких как: кнопки, меню, текстовые области, абзацы, изображения и столбцы. Он игнорирует изменения содержимого, цвета и других стилей между страницами.
Теперь давайте посмотрим, как инициализировать экземпляр Eyes
Eyes eyes = new Eyes(runner);
eyes.setConfiguration(config);
eyes.setForceFullPageScreenshot(true);
eyes.setStitchMode(StitchMode.CSS);
eyes.setWaitBeforeScreenshots(2000);
eyes.setLogHandler(new FileLogger("target/eyes.log", true, true));
Теперь, когда мы инициализировали наши глаза перед нашим тестом, мы действительно можем перейти на страницу с selenium, взять базовое изображение со страницы и отправить его в Applitools.
log.info("Start Visual Check From Applitools");
int matchTimeout = 10000;// in milli seconds
if (!eyes.getIsOpen()) {
eyes.open(driver, "VisualTest","TestName");
}
eyes.checkWindow(matchTimeout, "ScreenshotName");
}
С помощью приведенных выше команд мы создаем новый тест и отправляем изображение страницы в Applitools для визуального сравнения.
Получение результатов от Applitools
Сначала нам нужно закрыть экземпляр eyes после завершения выполнения теста с помощью
boolean testFailed = result.getStatus() == ITestResult.FAILURE;
if (!testFailed) {
eyes.closeAsync();
} else {
eyes.abortAsync();
}
}
Это завершает последовательность контрольных точек, а затем асинхронно ожидает результатов тестирования.
Теперь мы можем получить результаты, позвонив:
TestResultsSummary allTestResults = runner.getAllTestResults(false);
for (TestResultContainer result1 : allTestResults) {
Throwable ex = result1.getException();
TestResults result = result1.getTestResults();
if (result == null) {
LOG.info("No test results information available\n");
} else {
String resultReport = String.format("URL = %s, AppName = %s, testname = %s, Browser = %s,OS = %s, viewport = %dx%d, matched = %d,mismatched = %d, missing = %d,aborted = %s\n", result.getUrl(),
result.getAppName(),
result.getName(),
result.getHostApp(),
result.getHostOS(),
result.getHostDisplaySize().getWidth(),
result.getHostDisplaySize().getHeight(),
result.getMatches(),
result.getMismatches(),
result.getMissing(),
(result.isAborted() ? "aborted" : "no"));
LOG.info("Applitools Results: " + resultReport);
}
Таким образом, таким образом, мы можем получать результаты и публиковать их на наших платформах отчетов о тестировании.
Интеграция Applitools CI/CD
Чтобы просмотреть результаты тестирования непосредственно на вашем сервере Jenkins CI, вам сначала необходимо установить плагин Applitools Jenkins.
Затем нам нужно добавить следующий раздел в ваш этап конвейера Дженкинса для запуска визуальных тестов:
node {
stage('Visual Tests') {
Applitools() {
sh 'mvn clean test'
}
}
}
После этого результаты будут доступны во встроенном iframe в Jenkins:
Оригинал: “https://dev.to/giannispapadakis/visual-automation-with-applitools-2b6n”