快速网站搭建/谷歌推广运营

　　10.1控制HTML5语言实现的视频播放器

　　目的：能够获取html5语言实现的视频播放器视频文件的地址、时长、控制进行播放暂停

　　被测网页的网址：

　　http://www.w3school.com.cn/tiy/t.asp?f=html5_video_all

　　Java语言版本的API实例代码

package cn.html5;import org.testng.annotations.Test;
import org.testng.annotations.BeforeMethod;import java.io.File;
import java.io.IOException;import org.apache.commons.io.FileUtils;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.AfterMethod;public class TestHtml5VideoPlayer {WebDriver driver;String url = "http://www.w3school.com.cn/tiy/t.asp?f=html5_video_all";@Testpublic void testVideoPlayer() throws InterruptedException, IOException {//定义页面截图对象File captureScreenFile = null;//打印页面源码
      System.out.println(driver.getPageSource());//进入视频所在的framedriver.switchTo().frame("i");//获取页面video对象WebElement videoPlayer = driver.findElement(By.tagName("video"));//声明javascriptExecutor对象JavascriptExecutor javascriptExecutor = (JavascriptExecutor)driver;//获取视频文件的网络地址String videoSrc = (String) javascriptExecutor.executeScript("return arguments[0].currentSrc;",videoPlayer);//输出视频存储地址
      System.out.println(videoSrc);//断言判断视频存储地址是否正确Assert.assertEquals("http://www.w3school.com.cn/i/movie.ogg",videoSrc);//duration获取视频的时长Double videoDuration = (Double)javascriptExecutor.executeScript("return arguments[0].duration;", videoPlayer);//输出视频时长
      System.out.println(videoDuration.intValue());//等待5秒Thread.sleep(5000);//执行javascript，通过内部的函数play（）来播放影片javascriptExecutor.executeScript("return arguments[0].play();", videoPlayer);Thread.sleep(2000);//执行javascript语句，通过内部的函数pause（）来暂停影片javascriptExecutor.executeScript("return arguments[0].pause();", videoPlayer);Thread.sleep(3000);//对暂停的视频进行截图captureScreenFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);//将截图的图片命名并保存在E盘上FileUtils.copyFile(captureScreenFile, new File("e:\\videoPaly_pause.jpg"));}@BeforeMethodpublic void beforeMethod() {System.setProperty("webdriver.chrome.driver", "D:\\WebDriver\\chromedriver_win32\\chromedriver.exe");driver = new ChromeDriver();driver.manage().window().maximize();driver.get(url);}@AfterMethodpublic void afterMethod() {driver.quit();}}

   代码解释：

　控制视频播放器的原理均需使用JavaScript语句调用视频播放器内部的属性和接口来实现。

　　10.2在HTML5的画布元素上进行绘画操作

　　目的：能够在HTML5的画布上进行绘画操作

　　被测网页的网址：

　　http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_line

　　Java语言版本的API实例代码

package cn.html5;import org.testng.annotations.Test;
import org.testng.annotations.BeforeMethod;import java.io.File;
import java.io.IOException;import org.apache.commons.io.FileUtils;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.annotations.AfterMethod;public class testHyml5Canvas {WebDriver driver;String url = "http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_line";JavascriptExecutor javascriptExecutor;@Testpublic void testCanvas() throws IOException {WebDriverWait wait = new WebDriverWait(driver, 15);//声明File对象，用于保存截屏内容File captureScreenFile = null;//声明一个JavascriptExecutor对象JavascriptExecutor javascriptExecutor = (JavascriptExecutor)driver;//跳转至canvas所在的框架，不然无法定位元素driver.switchTo().frame("i");wait.until(ExpectedConditions.presenceOfElementLocated(By.xpath("//*[@id='myCanvas']")));/* * 调用JavaScript语句，在页面画布上画一个红色的图案* getElementById('myCanvas'); 语句获取页面上的画布元素* var cxt = c.getContext('2d'); 设定画布为2d* cxt.fillStyle = '#FF0000'; 设定填充色为  # FF0000 红色* cxt.fillRect(0, 0, 150, 150); 在画布上绘制矩形* */javascriptExecutor.executeScript("var c=document.getElementById('myCanvas');"+"var cxt = c.getContext('2d');"+"cxt.fillStyle='#FF0000';"+"cxt.fillRect(0,0,150,150);"); //绘制红色矩形后，进行截屏，并保存为E盘HTML5Canvas.jpg文件captureScreenFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);FileUtils.copyFile(captureScreenFile, new File("e:\\HTML5Canvas.jpg"));}@BeforeMethodpublic void beforeMethod() {System.setProperty("webdriver.chrome.driver", "D:\\WebDriver\\chromedriver_win32\\chromedriver.exe");driver = new ChromeDriver();driver.manage().window().maximize();driver.get(url);}@AfterMethodpublic void afterMethod() {driver.quit();}}

　　10.3操作HTML5的存储对象

　　目的：能够读取HTML5的localStorage和sessionStorage的内容，并删除存储的内容

　　被测网页的网址：

　　http://www.w3school.com.cn/tiy/t.asp?f=html5_webstorage_local

       http://www.w3school.com.cn/tiy/t.asp?f=html5_webstorage_session

　　Java语言版本的API实例代码

package cn.html5;import org.testng.annotations.Test;
import org.testng.annotations.BeforeMethod;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.AfterMethod;public class testHtml5Storage {WebDriver driver;String loacalStorage = "http://www.w3school.com.cn/tiy/t.asp?f=html5_webstorage_local";String sessionStorage = "http://www.w3school.com.cn/tiy/t.asp?f=html5_webstorage_session";@Testpublic void html5Storage() {driver.get(loacalStorage);JavascriptExecutor javascriptExecutor = (JavascriptExecutor)driver;//获取localStorage中lastname的值String lastname = (String) javascriptExecutor.executeScript("return localStorage.lastname;");Assert.assertEquals("Gates", lastname);javascriptExecutor.executeScript("localStorage.clear()");}@Testpublic void Html5SessionStorage(){driver.get(sessionStorage);JavascriptExecutor javascriptExecutor =(JavascriptExecutor)driver;String lastname = (String) javascriptExecutor.executeScript("return sessionStorage.lastname");Assert.assertEquals("Smith", lastname);javascriptExecutor.executeScript("sessionStorage.removeItem('lastname');");javascriptExecutor.executeScript("sessionStorage.clear();");}@BeforeMethodpublic void beforeMethod() {System.setProperty("webdriver.chrome.driver", "D:\\WebDriver\\chromedriver_win32\\chromedriver.exe");driver = new ChromeDriver();driver.manage().window().maximize();}@AfterMethodpublic void afterMethod() {driver.quit();}}