HTML5 представляет отличный новый элемент, который можно использовать для рисования произвольного содержимого на панели: элемент canvas . То, что на протяжении десятилетий было стандартной функцией для толстых клиентских приложений, теперь представлено в мире веб-приложений. Веб-разработчикам больше не нужно использовать собственные плагины для рисования изображений или диаграмм в своих приложениях.
Но когда дело доходит до тестирования, эта новая функция ставит новые задачи перед сообществом веб-разработчиков. Как проверить, что элемент canvas находится в соответствующем состоянии в определенный момент времени? Стандартные технологии, такие как селен, фокусируются на разметке, генерируемой веб-сервером, а не на пикселях, нарисованных на холсте.
Более перспективными в этой области являются технологии, использующие обработку изображений для проверки правильности отображения данных приложением. Одним из таких рамок является Sikuli . Sikuli — это исследовательский проект с открытым исходным кодом, который был начат в Массачусетском технологическом институте и сейчас поддерживается Раймундом Хокком .
Чтобы дать более практическое введение, давайте предположим, что у нас есть простое веб-приложение, которое использует элемент холста HTML5 для реализации некоторых простых функций обработки изображений, таких как оттенки серого, фильтр яркости и порогового значения, а также кнопка отмены (код для этого приложения можно найти как обычно на github ):
Установка sikuli (конечно) зависит от платформы. Установщик, который можно загрузить со страницы загрузки sikuli , представляет собой приложение Java Swing, которое запрашивает у вас типичный шаблон использования. Поскольку мы не хотим использовать Python IDE, мы выбираем вариант 4 из списка вариантов. Затем файл jar загружается и готовится для нашей ОС. После того, как процесс установки завершен, мы находим зависимый от ОС файл JAR в каталоге установки. Поскольку наш пример проекта использует maven в качестве системы сборки, мы должны ввести зависимость от области видимости системы после того, как мы скопировали библиотеку в папку lib:
|
1
2
3
4
5
6
7
|
<dependency> <groupId>org.sikuli</groupId> <artifactId>sikuli</artifactId> <version>1.0</version> <scope>system</scope> <systemPath>${basedir}/lib/sikuli-java.jar</systemPath></dependency> |
Когда sikuli используется впервые, он извлекает некоторые нативные библиотеки в новую папку, здесь, в нашем примере, в $ {basedir} / lib / libs. Эта папка должна быть добавлена в переменную окружения пути пользователя.
Теперь, когда мы установили sikuli, давайте настроим arquillian, чтобы мы могли написать наш первый модульный тест. Как настроить arquillian описано, например, здесь . Поскольку я не хочу повторять все, в следующем вы найдете только класс модульного тестирования:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
@RunWith(Arquillian.class)public class FilterTest { public static final String WEBAPP_SRC = "src/main/webapp"; @ArquillianResource URL deploymentURL; private Screen screen; @Before public void before() throws URISyntaxException, IOException { screen = new Screen(); if (Desktop.isDesktopSupported()) { Desktop.getDesktop().browse(deploymentURL.toURI()); } else { fail(); } } @Deployment public static WebArchive createDeployment() { return ShrinkWrap.create(WebArchive.class, "html5-sikuli-webapp.war") .addClasses(HomeBackingBean.class) .addAsWebResource(new File(WEBAPP_SRC, "home.xhtml")) .addAsWebResource(new File(WEBAPP_SRC, "resources/css/style.css"), "resources/css/style.css") .addAsWebResource(new File(WEBAPP_SRC, "resources/images/rom.jpg"), "resources/images/rom.jpg") .addAsWebResource(new File(WEBAPP_SRC, "resources/js/html5Sikuli.js"), "resources/js/html5Sikuli.js") .addAsWebResource(new File(WEBAPP_SRC, "resources/js/jquery-2.0.3.js"), "resources/js/jquery-2.0.3.js") .addAsWebInfResource(EmptyAsset.INSTANCE, "beans.xml") .setWebXML(new File(WEBAPP_SRC, "WEB-INF/web.xml")); } |
Метод createDeployment () устанавливает военный архив, который развертывается arquillian в JBoss AS 7.1.1.Final (см. Файл arquillian.xml). В нашем методе @Before мы используем класс SDK Desktop, чтобы открыть браузер по умолчанию и указать ему URL-адрес развертывания. Здесь мы также создаем экземпляр класса Screen sikuli. Этот класс предоставляет все методы, необходимые для взаимодействия с нашим приложением. Давайте посмотрим на это более подробно:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
@Test@RunAsClientpublic void testGrayScale() throws FindFailed { screen.wait(getFullPath("originalImage.png")); screen.find(getFullPath("btnUndo_disabled.png")); screen.click(getFullPath("btnGrayscale.png")); screen.find(getPattern("grayscaleImage.png", 0.9f)); screen.click(getFullPath("btnUndo_enabled.png")); screen.click(getPattern("originalImage.png", 0.9f));}private Pattern getPattern(String path, float similarity) { Pattern p = new Pattern(getFullPath(path)); return p.similar(similarity);}private String getFullPath(String path) { return "src/test/resources/img/" + path;} |
Так как sikuli основан на обработке изображений, мы можем определить, куда нажимать и что проверять с помощью сделанных нами снимков экрана. В этом простом примере я сохранил все скриншоты в виде файлов png в папке src / test / resources / img нашего проекта. Для более сложных проектов может потребоваться более сложная иерархия папок. Как видите, мы сначала ждем появления приложения. Как только Sikuli нашел первый снимок экрана, мы проверяем, что кнопка «Отменить» отключена. Это делается путем вызова метода find () с изображением отключенной кнопки. Теперь мы можем нажать на кнопку «Оттенки серого» (опять-таки указанную изображением кнопки) и затем убедиться, что на экране обнаружена версия изображения в градациях серого.
Sikuli сравнивает не только оба изображения попиксельно, но, если вам нравится, вычисляет сходство найденной области экрана с запрошенной областью. Это помогает, когда вам нужно быть более терпимым (например, если вы хотите протестировать приложение в разных браузерах, а кнопки немного отличаются). Значение по умолчанию для атрибута подобия равно 0,7f, но если вы увеличите его до 1,0f, у вас будет простое попиксельное сравнение.
Но это еще не все. С помощью sikuli вы можете делать практически все, что вы могли бы делать в качестве человека-интерактора:
- Введите символы с помощью screen.type ()
- Двойной щелчок с помощью screen.doubleClick ()
- Выполните операции перетаскивания с помощью screen.dragDrop ()
- Используйте колесо мыши
- …
Вывод
Sikuli — это мощный и простой в использовании инструмент для выполнения интеграционных тестов для веб-приложений, которые в значительной степени зависят от объекта canvas в HTML5. То же самое, конечно, верно для стандартных приложений толстого клиента (Swing, JavaFX). Вместе с Arquillian вы можете настроить комплексные тестовые наборы, которые охватывают множество «реальных» вариантов использования.