【基础7】selenium操作canvas

最新推荐文章于 2024-07-26 15:48:34 发布

草稻人

最新推荐文章于 2024-07-26 15:48:34 发布

阅读量7.6k

点赞数 1

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

草稻人

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
【基础7】selenium操作canvas

现在一些比较流行的网站上已经使用了HTML5，刚好我们也来学习一下利用selenium处理常用的HTML5元素。主要介绍3个对象，分别是canvas（画布），video （视频），audio （音频），本篇文章主要介绍“canvas”，我会在接下来的两篇文章中依次介绍video和audio对象。canvas引用自javascript w3school教程Canvas元素用于在网页上绘制图形。 HT...
复制链接

扫一扫