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"; @Test public void testVideoPlayer() throws InterruptedException, IOException { //定义页面截图对象 File captureScreenFile = null; //打印页面源码 System.out.println(driver.getPageSource()); //进入视频所在的frame driver.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")); } @BeforeMethod public void beforeMethod() { System.setProperty("webdriver.chrome.driver", "D:\\WebDriver\\chromedriver_win32\\chromedriver.exe"); driver = new ChromeDriver(); driver.manage().window().maximize(); driver.get(url); } @AfterMethod public 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; @Test public 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")); } @BeforeMethod public void beforeMethod() { System.setProperty("webdriver.chrome.driver", "D:\\WebDriver\\chromedriver_win32\\chromedriver.exe"); driver = new ChromeDriver(); driver.manage().window().maximize(); driver.get(url); } @AfterMethod public 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"; @Test public 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()"); } @Test public 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();"); } @BeforeMethod public void beforeMethod() { System.setProperty("webdriver.chrome.driver", "D:\\WebDriver\\chromedriver_win32\\chromedriver.exe"); driver = new ChromeDriver(); driver.manage().window().maximize(); } @AfterMethod public void afterMethod() { driver.quit(); } }