t.me/atinfo_chat Telegram группа по автоматизации тестирования

Возможно ли автоматизировать Canvas в HTML5 с Selenium?

selenium
webdriver
Теги: #<Tag:0x00007f9c4a54f928> #<Tag:0x00007f9c4a54f7e8>

(Taras) #1

И так столкнулся с проблемой.

Стартанул новый проэкт. Суть проэкта - это контролы сделаные с помощью html5 + CSS + JS + Web GL ;

<body>
        <div id="suiViewport">
              <canvas width="798" height="598"></canvas>
        </div>
</body>

На канвасе есть кнопки, контролы, которые как я понимаю управляються скриптом.
Кто то подскажет как это автоматизировать и реально ли это вообще ?)
Если нужно более детальное описание либо скрины канваса то скину, просто нужно концепцию автоматизации, и можно ли это сделать Селениумом любимым.
Спасибо.


(Mykhailo Poliarush) #2

тут я думаю, абстрактные ответы не подойдут

надо смотреть на код и пробовать, потому без каких-то сорсов не обойтись

делать ошибки и пробовать, что-то еще


(Taras) #3

так сорсы только на Java Script по ходу, так как html тот только что я скопировал више а css там ничего не показывает вообше конкретного)

кароче мне говорили девелоперы что там web GL как то с канвасом работает по координатах.


(Mykhailo Poliarush) #4

надо обращаться к javascript и через вызов методов, работать с канвасом
потому, тут надо видеть также javascript

почитай http://www.theautomatedtester.co.uk/blog/2011/selenium-advanced-user-interactions.html, но тут много не взять

вот еще пример был автоматизации игры http://arandomurl.com/2010/08/05/html5-helicopter.html

код для тестирования на python и java https://github.com/davehunt/selenicopterpilot/

import unittest
from selenium import webdriver
 
from base_page import BasePage
 
 
class CrashTests(unittest.TestCase):
 
    def setUp(self):
        self.driver = webdriver.Firefox()
 
    def testShouldCrashIntoCeiling(self):
        base_page = BasePage(self.driver)
        base_page.start_game()
        base_page.engage_thrusters()
        base_page.wait_until_crash()
        self.assertEquals(base_page.helicopter_altitude, 90)
 
    def testShouldCrashIntoFloor(self):
        base_page = BasePage(self.driver)
        base_page.start_game()
        base_page.wait_until_crash()
        self.assertEquals(base_page.helicopter_altitude, 14)
 
    def tearDown(self):
        self.driver.quit()
 
if __name__ == "__main__":
    unittest.main()
import time
 
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.common.exceptions import WebDriverException
 
 
class BasePage():
 
    _controls_locator = (By.ID, "helicopter")
 
    def __init__(self, driver):
        self.driver = driver
        driver.get("file:///Users/dave/workspace/selenicopter/with-obstacles/index.html")
 
    def _cache_debug(self):
        while True:
            try:
                self._debug = self.driver.execute_script("return myHelicopter.gameData()")
                break
            except WebDriverException:
                time.sleep(0.5)
 
    @property
    def game_state(self):
        self._cache_debug()
        return self._debug["state"]
 
    @property
    def helicopter_altitude(self):
        return self._debug["position"]
 
    def _wait_until_game_is_ready(self):
        while not self.game_state == 1:
            time.sleep(0.5)
 
    def wait_until_crash(self):
        while not self.game_state == 4:
            time.sleep(0.5)
 
    def start_game(self):
        self._wait_until_game_is_ready()
        controls = self._find_element(self._controls_locator)
        controls.send_keys(Keys.RETURN)
 
    def engage_thrusters(self):
        controls = self._find_element(self._controls_locator)
        controls.send_keys(Keys.RETURN)
 
    def _find_element(self, locator):
        return self.driver.find_element(locator[0], locator[1])

попрактиковаться можно попробовать на этих примерах http://www.canvasdemos.com/


WebDriver + Google Maps - Как заавтоматизировать ?
(Mykhailo Poliarush) #5

кстати для общего развития, есть вот такие вот слайды http://slides.html5rocks.com/#landing-slide которые очень хорошо описывают, что собой представляет html5

а попробовать canvas в действии можно тут http://www.w3schools.com/html5/html5_canvas.asp

 

в вашем случае надо понимать прикладную задачу, иначе тяжело разбираться.


(Mykhailo Poliarush) #6

как успехи с автоматизацией канваса?


(Taras) #7

там все заложено в JS, девелоперы сказали кинуться этого велосипеда)

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


(Mykhailo Poliarush) #8

понятно, ну хорошо, интересно посмотреть хотя бы на скриншот, что собственно на самой странице.

и если все в js заложено, то нужно тогда и с js работать, т.е. через вызов соответствующий функций

тут конечно, надо больше с разработчиками общаться, в плане, какие методы высокого уровня в js можно использовать. 


(Taras) #9

в том то и дело что у меня никакого доступа к сорсам нету )

на скрине написаный калькулятор на канвасе и он в 3D - так как WED GL еще используеться

скрин завтра докину может, когда на роботе буду