webdriver高级应用- 在HTML5的画布元素上进行绘画操作

本文介绍如何利用Selenium WebDriver结合Internet Explorer浏览器自动化绘制HTML5 Canvas中的红色矩形,并截图保存。通过执行JavaScript代码片段实现画布绘图,演示了从打开网页到完成图形绘制并保存截图的完整流程。
#encoding=utf-8
import unittest
from selenium import webdriver
import time

class TestDemo(unittest.TestCase):
    def setUp(self):
        # 获取浏览器驱动实例
        self.driver = webdriver.Ie(executable_path = "e:\\IEDriverServer")

    def test_HTML5Canvas(self):
        url = "http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_canvas_line"
        # 访问指定的网址
        self.driver.get(url)
        # 调用JavaScript语句,在页面画布上画一个红色的图案
        # getElementById('myCanvas'); 语句获取页面上的画布元素
        # var cxt = c.getContext('2d'); 设定画布为2d
        # cxt.fillStyle = '#FF0000'; 设定填充色为  # FF0000 红色
        # cxt.fillRect(0, 0, 150, 150); 在画布上绘制矩形
        self.driver.execute_script("var c = document.getElementById('myCanvas');"
               + "var cxt=c.getContext('2d');"
               + "cxt.fillStyle='#FF0000';"
               +"cxt.fillRect(0,0,150,150);")
        time.sleep(3)
        # 将绘制的红色矩形页面,进行截屏,并保存为E盘的HTML5Canvas.jpg
        self.driver.save_screenshot("E:\\HTML5Canvas.jpg")

    def tearDown(self):
        # 退出浏览器
        self.driver.quit()

if __name__ == '__main__':
    unittest.main()

 

转载于:https://www.cnblogs.com/qingqing-919/p/8717257.html

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值