对WebElement截图
WebDriver.Chrome自带的方法只能对当前窗口截屏,且不能指定特定元素。若是需要截取特定元素或是窗口超过了一屏,就只能另辟蹊径了。
WebDriver.PhantomJS自带的方法支持对整个网页截屏。
下面提供几种思路。
方式一
针对WebDriver.Chrome
通过WebDriver的js脚本注入功能,曲线救国。
注入第三方html转canvas的js库(见下方推荐)
获取元素html源码
将html转换为canvas
下载canvas
优点: 截取长图容易实现
缺点: 加载第三方库耗费时间,转换原理请参考这篇文章:
方式二
针对WebDriver.Chrome
截取全图,自行裁剪、拼接
获取元素位置、大小
获取窗口大小
截取包含元素的窗口
进行相应的裁剪和拼接。
具体算法思路很清晰,但需要注意的细节较多。这里就不在赘述。示例代码请移步:
优点: 不需太多js工作,python+少量js代码即可完成
缺点: 拼接等工作会被WebDriver的实现差异、图片加载速度等因素影响,需多加注意。 在保证截图质量的情况下,速度较慢
方式三
针对WebDriver.PhantomJS
由于接口实现的差异,PhantomJS相比于Chrome,可以截取到整个网页。所以获取指定元素的截图也就简单很多
截取网页全图
裁剪指定元素
driver = webdriver.Chrome()
driver.get('/')
driver.save_screenshot('screenshot.png')
left = element.location['x']
top = element.location['y']
right = element.location['x'] + element.size['width']
bottom = element.location['y'] + element.size['height']
im = Image.open('screenshot.png')
im = im.crop((left, top, right, bottom))
im.save('screenshot.png')
优点: 实现简单
缺点: 对于高度太高的页面会导致文件过大,处理会有问题,我测试的最大图片尺寸是12.8M。
解决图片加载不完整的问题
我们先在首页上执行一段 JavaScript 脚本,将页面的滚动条拖到最下方,然后再拖回顶部,最后才截图。这样可以解决像上面那种按需加载图片的情况。
# -*- coding: utf-8 -*-
from selenium import webdriver
import time
def take_screenshot(url, save_fn="capture.png"):
# browser = webdriver.Firefox() # Get local session of firefox
#谷歌浏览器截取当前窗口网页
chromedriver = r"C:\soft\chromedriver2.31_win32\chromedriver.exe"
browser = webdriver.Chrome(chromedriver)
#phantomjs截取整张网页
# browser = webdriver.PhantomJS()
browser.set_window_size(1200, 900)
browser.get(url) # Load page
#将页面的滚动条拖到最下方,然后再拖回顶部
browser.execute_script("""
(function () {
var y = 0;
var step = 100;
window.scroll(0, 0);
function f() {
if (y < document.body.scrollHeight) {
y += step;
window.scroll(0, y);
setTimeout(f, 100);
} else {
window.scroll(0, 0);
document.title += "scroll-done";
}
}
setTimeout(f, 1000);
})();
""")
for i in xrange(30):
if "scroll-done" in browser.title:
break
time.sleep(10)
browser.save_screenshot(save_fn)
browser.close()
if __name__ == "__main__":
take_screenshot("")
如何截取某个网页元素
有时候我们只想截取某个网页元素的图片呢?比如说会动态变化的验证码。本来 Selenium 也提供了对元素截图的支持,只要在选中的元素上调用其 screenshot() 方法即可。
但是在实际使用时却遇到了 Unrecognized command 这个异常,经过一段时间检索也没有找到解决办法。所以,只能曲线救国,利用 Selenium 执行JS代码,将页面上不需要的元素一一删除,只保留我们希望留下的元素,然后再利用上面的窗口截屏功能。
例如,如果我们只截取编程派网站右侧的二维码,可以执行这样一段JQuery代码:
$('#main').siblings().remove();
$('#aside__wrapper').siblings().remove();
$('.ui.sticky').siblings().remove();
$('.follow-me').siblings().remove();
$('img.ui.image').siblings().remove();
代码执行完毕之后,就只剩下二维码的图片了。然后我们再截屏。不过这样有一点不好,就是截屏图片的下方会有大量空白内容。
代码
# -*- coding: utf-8 -*-
from selenium import webdriver
import time
def take_screenshot(url, save_fn="capture.png"):
# browser = webdriver.Firefox() # Get local session of firefox
chromedriver = r"C:\soft\chromedriver2.31_win32\chromedriver.exe"
browser = webdriver.Chrome(chromedriver)
# browser = webdriver.PhantomJS()
browser.set_window_size(1200, 900)
browser.get(url) # Load page
#将页面的滚动条拖到最下方,然后再拖回顶部
# browser.execute_script("""
# (function () {
# var y = 0;
# var step = 100;
# window.scroll(0, 0);
#
# function f() {
# if (y < document.body.scrollHeight) {
# y += step;
# window.scroll(0, y);
# setTimeout(f, 100);
# } else {
# window.scroll(0, 0);
# document.title += "scroll-done";
# }
# }
#
# setTimeout(f, 1000);
# })();
# """)
#
# for i in xrange(30):
# if "scroll-done" in browser.title:
# break
# time.sleep(10)
#只截取编程派网站右侧的二维码,可以执行这样一段JQuery代码:siblings().remove()移除兄弟姐妹元素
browser.execute_script("""
$('#main').siblings().remove();
$('#aside__wrapper').siblings().remove();
$('.ui.sticky').siblings().remove();
$('.follow-me').siblings().remove();
$('img.ui.image').siblings().remove();
""")
browser.save_screenshot(save_fn)
browser.close()
if __name__ == "__main__":
take_screenshot("/article/take-screenshot-of-web-page-using-selenium/")
不同wewbdriver对某些方法的实现不同
Chrome和PhantomJS 的接口差异
抓知乎时的坑,
Chrome用WebElement.text可以正常得到值,用PhantomJS只能用WebElement.get_attribute('innerHTML')
WebDriver.Chrome截图只能截当前屏幕区域。WebDriver.PhantomJS截图可以获取整个页面的长图。
其它还有一些坑等待发现
推荐
Python + Selenium 实现对页面的指定元素截图(可截长图元素)【转载】
先在首页上执行一段 JavaScript 脚本,将页面的滚动条拖到最下方,然后再拖回顶部,最后才截图.这样可以解决那种按需加载图片的情况 以下代码为转载别处博客改造后的,有chrome和ff两种浏览器 ...
利用python+selenium在pycharm下进行页面登陆的半自动测试
很久没有写了,现在正式入职,准备好好干,加油! 我的第一个较正式的测试代码: from selenium import webdriverimport unittestimport sysimport ...
在CentOS下利用Python+selenium获取腾讯首页的今日话题。
1.安装依赖包 yum install wget firefox gcc zlib zlib-devel Xvfb 2.安装setuptools 官网地址:https://pypi.python.or ...
Python+selenium点击网页上指定坐标
from selenium import webdriver from mon.action_chains import ActionChains dr = ...
[Chrome Headless + Python] 截长图 (Take Full-page Screenshot)
# -*- coding: utf-8 -*- import time import os from selenium import webdriver from selenium.webdriver ...
如何利用Python实现自动打卡签到
需求描述 我们需要登录考勤系统(网页端,非手机端)进行签到,如果不想每天都早早起来打卡签到,就可以通过写程序实现这一功能. 业务梳理 通过长时间的早起打卡签到发现规律,我每天只是不停的点击,签到,都是 ...
python+requests抓取页面图片
前言: 学完requests库后,想到可以利用python+requests爬取页面图片,想到实战一下.依照现在所学只能爬取图片在html页面的而不能爬取由JavaScript生成的图片,所以我选取饿 ...
python selenium自动化(一)点击页面链接测试
需求:现在有一个网站的页面,我希望用python自动化的测试点击这个页面上所有的在本窗口跳转,并且是本站内的链接,前往到链接页面之后在通过后退返回到原始页面. 要完成这个需求就必须实现3点: 1. 找 ...
python selenium自动化点击页面链接测试
python selenium自动化点击页面链接测试 需求:现在有一个网站的页面,我希望用python自动化的测试点击这个页面上所有的在本窗口跳转,并且是本站内的链接,前往到链接页面之后在通过后退返回 ...
随机推荐
BPM嵌入式流程解决方案分享
一.需求分析由于企业业务的独特性或者企业高层独特的管理思想,很多客户选择了自行开发业务系统的方式来实现独有的竞争力. 这类信息系统通常经过了多年的开发,伴随着企业的发展一直在不断优化,与企业的业务非常 ...
Github初学者教程(一)
如果你是一名程序员,或者是相关专业的学生,那么Github你不应不知道.很多开源组织和大神,会选择在Github这个平台上,发布他们的开源项目,学会使用Github将能够给你的学习和工作带来巨大帮助! ...
jna 使用实例,
有与项目组需要用到C++的一个模块, 需要将一个2维数组传到dll 里面 ,返回一个字符串, 恶心了1天终于完成了, 记录一下,同时也希望能给你带来帮助. java 代码如下, package tes ...
HTML&;CSS基础学习笔记1.4-定义文档类型
Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面 ...
NYOJ115 市叛乱 【SPFA】
城市平乱 时间限制:1000ms | 内存限制:65535KB 难度:4 描写叙述 南将军统领着N个部队,这N个部队分别驻扎在N个不同的城市. 他在用这N个部队维护着M个城市的治安,这M个城市 ...
Git与Github的使用学习
摘要 本文讲解下Git的使用,包括使用Git上传项目工程到Github,文末有彩蛋哦. 1.安装Git 使用apt-get安 sudo apt-get update sudo apt-get inst ...
一语惊醒梦中人-《Before I Fall》
I still remembered I turned my attention to the title when I browsed in news by cellphone.I saw the ...
数据结构与算法->;树->;2-3-4树的查找,添加,删除(Java)
代码: 兵马未动,粮草先行 作者: 传说中的汽水枪 如有错误,请留言指正,欢迎一起探讨. 转载请注明出处. 目录 一. 2-3-4树的定义 二. 2-3-4树数据结构定义 三.2-3-4树的可以得到 ...
Oracle数据库中插入日期型数据(to_date的用法)(转载)
往Oracle数据库中插入日期型数据(to_date的用法) INSERT INTO FLOOR VALUES ( to_date ( '-12-20 18:31:34' , 'YYY ...
【转】MySQL— 索引
[转]MySQL— 索引 目录 一.索引 二.索引类型 三.索引种类 四.操作索引 五.创建索引的时机 六.命中索引 七.其它注意事项 八.LIMIT分页 九.执行计划 十.慢查询日志 一.索引 My ...