您的位置：首页 > Web前端 > HTML5

【基础7】selenium操作canvas

2016-10-17 19:48 671 查看

现在一些比较流行的网站上已经使用了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>

运行结果：

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 selenium canvas

相关文章推荐

新的分享

章节导航