1. Тестируем Canvas c помощью
Sikuli Script и
Selenium WebDriver

2. Что такое Canvas
Canvas (англ. canvas — «холст») —
элемент HTML 5, который предназначен
для создания растрового изображения при
помощи JavaScript.

3. Слои Canvas элемента

4. Что такое Sikuli
Sikuli — открытая кросс-платформенная
визуальная среда создания сценариевскриптов, которая ориентирована на
программирование графического
интерфейса при помощи изображений
(скриншотов).

5. Типы "изобразительного
искусства" в автоматизации
canvas элемента при помощи
selenium webdriver


Манипуляции вручную (если нужно
нарисовать что-нибудь на canvas-е)
Графические объекты на canvas-е,
которые генерируются кодом (графики,
чарты, и тд).

6. Манипуляции вручную
(примеры)
Как нарисовать квадрат размером 3 на 3
пикселя:
drawActions
.moveToElement(siculiDraw,1,1)
.clickAndHold()
.moveByOffset(3, 0)
.moveByOffset(0, 3)
.moveByOffset(-3, 0)
.moveByOffset(0, -3)
.release()
.perform();

7. Графические объекты на
canvas-е
Ключевые этапы:




нарезать эталонных картинок;
найти эталонные картинки на экране с
помощью Sikuli Script;
получить координаты картинки с
помощью Sikuli Script;
выполнить необходимые действия с
помощью Selenium Web Driver;

8. Работа с изображением
на экране с помощью
Sikuli Script
Убедиться, что изображение есть на
экране:
Получить центр изображения:

9. Больше
примеров
тестирующих
различные сценарии с Canvas картами и
графиками можно найти на нашем TFS
сервере 192.168.100.9 по линку:
$/CSI - Training Center/Clients/Automation/Clients/Logi
Analytics/Test projects/LogiAnalyticsCanvasElementsTest

10. Автор:
Эльдар Гусейнов
опыт в IT более 5 лет, работает в компании ISSoft,
специализируется в разработке (TSQL Developer) и
автоматизированном тестировании програмного
обеспечения (Web, Desktop, Mobile).