Html5 canvas + sikuli + selenium 2 web driver
-
date post
22-Oct-2014 -
Category
Documents
-
view
690 -
download
10
description
Transcript of Html5 canvas + sikuli + selenium 2 web driver
![Page 1: Html5 canvas + sikuli + selenium 2 web driver](https://reader033.fdocument.pub/reader033/viewer/2022061106/54473c9db1af9f1f098b45fd/html5/thumbnails/1.jpg)
Canvas c Тестируем Sikuli помощью Script и
Selenium WebDriver
![Page 2: Html5 canvas + sikuli + selenium 2 web driver](https://reader033.fdocument.pub/reader033/viewer/2022061106/54473c9db1af9f1f098b45fd/html5/thumbnails/2.jpg)
Что такое CanvasCanvas (англ. canvas — «холст») —
элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript.
![Page 3: Html5 canvas + sikuli + selenium 2 web driver](https://reader033.fdocument.pub/reader033/viewer/2022061106/54473c9db1af9f1f098b45fd/html5/thumbnails/3.jpg)
Слои Canvas элемента
![Page 4: Html5 canvas + sikuli + selenium 2 web driver](https://reader033.fdocument.pub/reader033/viewer/2022061106/54473c9db1af9f1f098b45fd/html5/thumbnails/4.jpg)
Что такое Sikuli
Sikuli — открытая кросс-платформенная визуальная среда создания сценариев-скриптов, которая ориентирована на программирование графического интерфейса при помощи изображений (скриншотов).
![Page 5: Html5 canvas + sikuli + selenium 2 web driver](https://reader033.fdocument.pub/reader033/viewer/2022061106/54473c9db1af9f1f098b45fd/html5/thumbnails/5.jpg)
Типы "изобразительного искусства" в автоматизации
canvas элемента при помощи selenium webdriver
Манипуляции вручную (если нужно нарисовать что-нибудь на canvas-е)
Графические объекты на canvas-е, которые генерируются кодом (графики, чарты, и тд).
![Page 6: Html5 canvas + sikuli + selenium 2 web driver](https://reader033.fdocument.pub/reader033/viewer/2022061106/54473c9db1af9f1f098b45fd/html5/thumbnails/6.jpg)
Манипуляции вручную (примеры)
Как нарисовать квадрат размером 3 на 3 пикселя:
drawActions.moveToElement(siculiDraw,1,1).clickAndHold().moveByOffset(3, 0) .moveByOffset(0, 3).moveByOffset(-3, 0).moveByOffset(0, -3).release().perform();
![Page 7: Html5 canvas + sikuli + selenium 2 web driver](https://reader033.fdocument.pub/reader033/viewer/2022061106/54473c9db1af9f1f098b45fd/html5/thumbnails/7.jpg)
Графические объекты на canvas-е
Ключевые этапы: нарезать эталонных картинок; найти эталонные картинки на экране с
помощью Sikuli Script; получить координаты картинки с
помощью Sikuli Script; выполнить необходимые действия с
помощью Selenium Web Driver;
![Page 8: Html5 canvas + sikuli + selenium 2 web driver](https://reader033.fdocument.pub/reader033/viewer/2022061106/54473c9db1af9f1f098b45fd/html5/thumbnails/8.jpg)
Работа с изображением на экране с помощью
Sikuli ScriptУбедиться, что изображение есть на экране:
Получить центр изображения:
![Page 9: Html5 canvas + sikuli + selenium 2 web driver](https://reader033.fdocument.pub/reader033/viewer/2022061106/54473c9db1af9f1f098b45fd/html5/thumbnails/9.jpg)
Больше примеров тестирующих различные сценарии с Canvas картами и графиками можно найти на нашем TFS сервере 192.168.100.9 по линку:
$/CSI - Training Center/Clients/Automation/Clients/Logi Analytics/Test projects/LogiAnalyticsCanvasElementsTest
![Page 10: Html5 canvas + sikuli + selenium 2 web driver](https://reader033.fdocument.pub/reader033/viewer/2022061106/54473c9db1af9f1f098b45fd/html5/thumbnails/10.jpg)
Автор:
Эльдар Гусейновопыт в IT более 5 лет, работает в компании ISSoft,
специализируется в разработке (TSQL Developer) и автоматизированном тестировании програмного обеспечения (Web, Desktop, Mobile).
![Page 11: Html5 canvas + sikuli + selenium 2 web driver](https://reader033.fdocument.pub/reader033/viewer/2022061106/54473c9db1af9f1f098b45fd/html5/thumbnails/11.jpg)