WebDriver高级应用实例（10）

　　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();
  }

}