HTML5 defines a new element that specifies a standard way to embed a video or movie clip on a web page using the <video> element. Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.
In this recipe, we will explore how we can automate testing of the <video> element. This automated testing provides a JavaScript interface with various methods and properties for automation.
We will create a new test named testHTML5VideoPlayer for testing the <video> element. We will use the JavaScriptExecutor class from Selenium WebDriver to interact with the <video> element. We will control the video from our test code and also verify some properties of the video in the following way:
package com.secookbook.examples.chapter10;
import java.io.File;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.apache.commons.io.FileUtils;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import static org.junit.Assert.*;
public class HTML5VideoPlayer {
private WebDriver driver;
@Before
public void setUp() {
System.setProperty("webdriver.chrome.driver",
"src/test/resources/drivers/chromedriver.exe");
driver = new ChromeDriver();
driver.get("http://cookbook.seleniumacademy.com/html5video.html");
}
@Test
public void testHTML5VideoPlayer() throws Exception {
// Get the HTML5 Video Element
WebElement videoPlayer = driver.findElement(By.id("vplayer"));
// We will need a JavaScript Executor for interacting with Video
// Element's methods and properties for automation
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
// Get the Source of Video that will be played in Video Player
String source = (String) jsExecutor.executeScript(
"return arguments[0].currentSrc;", videoPlayer);
// Get the Duration of Video
long duration = (Long) jsExecutor.executeScript(
"return arguments[0].duration", videoPlayer);
// Verify Correct Video is loaded and duration
assertEquals("http://html5demos.com/assets/dizzy.mp4", source);
assertEquals(25, duration);
// Play the Video
jsExecutor.executeScript("return arguments[0].play()", videoPlayer);
Thread.sleep(5000);
// Pause the video
jsExecutor.executeScript("arguments[0].pause()", videoPlayer);
// Take a screenshot for later verification
File scrFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("target/screenshots/pause_play.png"));
}
@After
public void tearDown() {
driver.quit();
}
}Firstly, we locate the <video> element so we can call its associated methods in JavaScript as well as in the retrieve/set properties. We can locate the <video> element similar to another HTML elements by using the findElement() method, as follows:
//Get the HTML5 Video Element
WebElement videoPlayer = driver.findElement(By.id("vplayer"));We can verify which video file is being used with video player for playback, and duration of the video, by looking at the currentSrc and duration properties. We retrieve these properties by accessing the <video> element through JavaScript. For this, we created an instance of the JavaScriptExecutor class, as follows:
JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
Using the executeScript() method of the JavaScriptExecutor class of Selenium WebDriver, we can execute the JavaScript code within the browser window. We can return a value from the JavaScript code by assigning the value to a variable. However, we need to cast this value appropriately based on the type of value being returned. In this case, the currentSrc property will return a URL of the video file as a String:
String source = (String) jsExecutor.executeScript("return arguments[0].currentSrc;", videoPlayer);In the preceding example, arguments[0] was replaced by the videoPlayer WebElement using the executeScript() method.
As discussed earlier, we can also control the playback of a video using the methods of the <video> element such as play() and pause(). We can call these methods using the executeScript() method in the following way:
//Play the Video
jsExecutor.executeScript("return arguments[0].play()", videoPlayer);- Executing the JavaScript code recipe in Chapter 4, Working with Selenium API