Chapter 10 Testing HTML5 Web Applications

10.1 Automating the HTML5 video player

HTML5 defines a new element that specifies a standard way to embed a video or movie or movie clip on a web page using the <video> element. IE9+, Firefox, Opera, Chrome and Safari support the <video> element.
This automated testing provides a JavaScript interface with various methods and properties for automation.

self.videoPlayer = self.driver.find_element_by_tag_name("video")
# get the source of video that will be played
source = self.driver.execute_script("return arguments[0].currentSrc;",self.videoPlayer)
print(source)
# get the duration of video
duration = self.driver.execute_script("return arguments[0].duration;",self.videoPlayer)
print(str(duration))
# play the video
# there's exception in JS(play() method not permission) without click() method
# haven't figure out the reason~~~
self.videoPlayer.click()
self.videoPlayer.click()
self.driver.execute_script("return arguments[0].play();",self.videoPlayer)
time.sleep(5)
#self.videoPlayer.click()               
self.driver.execute_script("arguments[0].pause();",self.videoPlayer)
self.videoPlayer.screenshot("pause_play.png")

10.2 Automating interaction on the HTML5 canvas element

Web developers can now create cool drawing applications within web browsers using the new HTML5 <canvas> element. This element is used to build drawing and charting applications by using JavaScript. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
example canvas draw HTML5 web: https://www.html5tricks.com/demo/html5-canvas-web-draw/index.html

# Navigate to the application home page
driver.get("https://www.html5tricks.com/demo/html5-canvas-web-draw/index.html")

canvas = driver.find_element_by_id("canvas")
drawTool = driver.find_element_by_id("control")
pen = drawTool.find_element_by_class_name("small-brush")
pen.click()

# create an Action chain to draw a shape on Canvas
actions = ActionChains(driver)
actions.click_and_hold(canvas).move_by_offset(10,50).\
move_by_offset(50,10).move_by_offset(-10,-50).\
move_by_offset(-50,-10).release().perform()
canvas.screenshot("canvas.png")

# Close the browser window
driver.quit()

10.3 Web storage - testing local storage

HTML5 provides a localStorage interface through JavaScript that stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available all times. You can view this data in Google Chrome by clicking on the Inspect Element | Resources tab.

driver.get("https://www.jianshu.com")
local = driver.execute_script("return localStorage.read_mode;")
print(str(local))

10.4 Web storage - testing session storage

Similar to local storage, session storage stores the data for only one session.

button = driver.find_element_by_id("sign_in")
button.click()
clickCount = driver.execute_script("return sessionStorage.Hm_lpvt_0c0e9d9b1e7d617b3e6842e85b9fb068;")
print(str(clickCount))

10.5 Cleaning local and session storage

#driver.execute_script("localStorage.removeItem(lastname);")
#driver.execute_script("sessionStorage.removeItem(lastname);")
driver.execute_script("localStorage.clear();")
driver.execute_script("sessionStorage.clear();")