现在一些比较流行的网站上已经使用了HTML5,刚好我们也来学习一下利用selenium处理常用的HTML5元素。主要介绍3个对象,分别是canvas(画布),video (视频),audio (音频),本篇文章主要介绍“canvas”,我会在接下来的两篇文章中依次介绍video和audio对象。
canvas
引用自javascript w3school教程
Canvas元素用于在网页上绘制图形。 HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。
创建包含canvas的网页
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="500" height="200" style="border:3px solid #c3c3c3;"></canvas>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
运行结果:
selenium 操作canvas
方式1:使用js操作canvas对象
package seleniumdemo;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class Demo2ForH5 {
//使用js操作canvas对象
public static void main(String args[]) throws InterruptedException{
System.setProperty("webdriver.chrome.bin", "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe");
System.setProperty("webdriver.chrome.driver", "D:\\FilesToDriver\\chromedriver.exe");
WebDriver driver=new ChromeDriver();
//等待页面加载,如果第一个参数为负数,则说明无限制的等待页面加载
driver.manage().timeouts().pageLoadTimeout(-1, TimeUnit.SECONDS);
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
//这里访问上一步中创建的canvas网页
driver.get("file:///C:/Users/Administrator/Desktop/seleniumForHtml5/demoForCanvas.html");
//js代码的意思是:在canvas对象上填充一个矩形,坐标0,0开始,宽150xp,高75xp
String jString = "var element_canvas = document.getElementsByTagName(\"canvas\")[0];"
+"var cxt=element_canvas.getContext(\"2d\");"
+"cxt.fillStyle=\"#FF0000\";"
+"cxt.fillRect(0,0,150,75);";
((JavascriptExecutor)driver).executeScript(jString);
Thread.sleep(3000);
driver.quit();
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
方式2**:使用selenium自带的Actions模拟鼠标操作canvas对象**
以“http://literallycanvas.com/”页面上的canvas为例
package seleniumdemo;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
public class DemoForH5 {
//使用selenium的原生Actions操作canvas(如果该对象可以利用鼠标轨迹画画)元素对象
public static void main(String args[]) throws InterruptedException{
System.setProperty("webdriver.chrome.bin", "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe");
System.setProperty("webdriver.chrome.driver", "D:\\FilesToDriver\\chromedriver.exe");
WebDriver driver=new ChromeDriver();
driver.manage().timeouts().pageLoadTimeout(-1, TimeUnit.SECONDS);
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
//有的时候访问不了下面的url
driver.get("http://literallycanvas.com/");
WebElement element_canvas = driver.findElement(By.cssSelector("canvas:nth-child(2)"));
Actions actions = new Actions(driver);
//release()表示释放鼠标
actions.clickAndHold(element_canvas).moveByOffset(10, 50).
moveByOffset(50, 10).
moveByOffset(-10, -50).
moveByOffset(-50, -10).
release().perform();
Thread.sleep(3000);
driver.quit();
}
}