Selenium基于PIL实现拼接滚动截图

Selenium默认的截图save_screenshot只支持对当前窗口内容进行截图，当如果你想要截取整个网页，那么，可以明确的告诉你。
Selenium做不到。

你可以手工使用开发者工具Ctrl+Shift+P调出命令行菜单，执行Capture full screenshot命令进行截图，如下图图：

也可以通过

Selenium Webdriver的 execute_cdp_cmd()来调用一下Chrome DevTools Protocal提供的方法。但是，很遗憾，没有全屏截图的方法。

Selenium2时，还可以使用Firefox全屏截图。Selenium3之后，所有浏览器不再支持。

一种方式是使用aShot，一个jar包，这显然是Java派的解决方案。

另外如果对样式没有强迫症的话，可以通过滚动页面截取多张+PIL图片拼接的方式实现全屏的截图。

示例代码：

from time import sleep
from PIL import Image
import numpy as np
from selenium import webdriver

driver = webdriver.Chrome()
driver.fullscreen_window() # 全屏窗口
driver.get('https://www.qq.com/')
window_height = driver.get_window_size()['height'] # 窗口高度

page_height = driver.execute_script('return document.documentElement.scrollHeight') # 页面高度
driver.save_screenshot('qq.png')

if page_height > window_height:
  n = page_height // window_height # 需要滚动的次数
  base_mat = np.atleast_2d(Image.open('qq.png')) # 打开截图并转为二维矩阵

  for i in range(n):
    driver.execute_script(f'document.documentElement.scrollTop={window_height*(i+1)};')
    sleep(.5)
    driver.save_screenshot(f'qq_{i}.png') # 保存截图
    mat = np.atleast_2d(Image.open(f'qq_{i}.png')) # 打开截图并转为二维矩阵
    base_mat = np.append(base_mat, mat, axis=0) # 拼接图片的二维矩阵
  Image.fromarray(base_mat).save('hao123.png')

driver.quit()

需要安装PIL和numpy: pip install PIL numpy

上例中，全屏窗口以获得最大展示范围，通过get_window_size()获取屏幕高度，通过执行js,获取页面高度。
相除后获得滚动次数。

每次滚动后，截图保存，然后使用Image打开转换为二维矩阵拼接到上一个图片的二维矩阵中。

循环完，最后再将拼接的二维矩阵输出成图片。

效果展示，如下图：

注意：如果是流式加载的页面，页面高度是不断变长的，非固定为第一次获取到的page_height的值，需要另外处理

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于Selenium的UI自动化测试屏幕截图功能实例代码

    UI自动化测试执行过程中,当遇到检查失败的情况,往往会发现打印的log并不能有效地帮助我们定位问题.我们需要失败时刻的屏幕截图来重现当时的失败场景,进而排查出错原因. 基于这种需求可以使用Selenium的屏幕截图功能. 实现代码如下: import java.io.File; import java.io.IOException; import org.apache.commons.io.FileUtils; import org.apache.commons.lang3.time.DateU

  • Selenium Webdriver实现截图功能的示例

    前几天在研究中自动化的时候突发奇想,想着能不能来截个图,以便之后查看,实现的方法其实也不难,毕竟selenium webdriver已经提供了截图额功能,TakesScreenshot接口函数(英文意思就是获取屏幕截图takes-screenshot). 废话不多说了,直接上代码 package com.wch; import java.io.File; import java.io.IOException; import org.junit.After; import org.junit.Be

  • Python+selenium实现截图图片并保存截取的图片

    这篇文章介绍如何利用Selenium的方法进行截图,在测试过程中,是有必要截图,特别是遇到错误的时候进行截图.在selenium for Python中主要有三个截图方法,我们挑选其中最常用的一种. 截图技能对于测试人员来说应该是较为重要的一个技能. 在自动化测试中,截图可以帮助我们直观的定位错误.记录测试步骤. 记得以前在给某跨国银行做自动化项目的时候,某银的PM要求我们自动化测试的每一步至少需要1个截图,以证明每个功能都被自动化测试给覆盖过,在这种情况下截图就成了证明自动化测试有效性的重要手

  • Java selenium截图操作的实现

    方法一:Selenium中截图类TakeScreenshout,这个类主要是获取浏览器窗体内的内容,不包括浏览器的菜单和桌面的任务栏区域,我们用百度首页来截图,看看截图效果. FileUtils.copyFile(srcFile, new File("屏幕截图", time + ".png"));"屏幕截图"是我们自己创建的文件夹用来存放截图文件,此文件夹在project(工程)的更目录 : 当然也是可以设置保存到其他目录下:FileUtils.

  • Python中使用 Selenium 实现网页截图实例

    Selenium 是一个可以让浏览器自动化地执行一系列任务的工具,常用于自动化测试.不过,也可以用来给网页截图.目前,它支持 Java.C#.Ruby 以及 Python 四种客户端语言.如果你使用 Python,则只需要在命令行里输入"sudo easy_install selenium"并回车,即可安装 selenium 的 Python 版本的客户端支持. 以 Python 为例,我们可以使用下面的脚本来给指定页面(比如我们首页)截图: # -*- coding: utf-8 -

  • Python实现的网页截图功能【PyQt4与selenium组件】

    本文实例讲述了Python实现的网页截图功能.分享给大家供大家参考,具体如下: 方法一.使用PyQt4的QtWebKit组件 #!/usr/bin/env python # -*- coding: UTF-8 -*- import sys import os.path from PyQt4 import QtGui,QtCore,QtWebKit class PageShotter(QtGui.QWidget): def __init__(self,url,filename,parent=Non

  • selenium+python截图不成功的解决方法

    selenium+python,使用webdriver的截图函数get_screenshot_as_file()截图,代码如下: from selenium import webdriver from time import sleep driver=webdriver.Chrome() driver.get("https://www.baidu.com") driver.find_element_by_id("kw").send_keys("seleni

  • Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)

    本文全部操作均在windows环境下 安装 Python Python是一种跨平台的计算机程序设计语言,它可以运行在Windows.Mac和各种Linux/Unix系统上.是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的.大型项目的开发 去Python的官网  www.python.org  下载安装 安装时勾选pip (python包管理工具),同时安装pip python安装好之后,打开命令行工具cmd,输入

  • Selenium基于PIL实现拼接滚动截图

    Selenium默认的截图save_screenshot只支持对当前窗口内容进行截图,当如果你想要截取整个网页,那么,可以明确的告诉你. Selenium做不到. 你可以手工使用开发者工具Ctrl+Shift+P调出命令行菜单,执行Capture full screenshot命令进行截图,如下图图: 也可以通过 Selenium Webdriver的 execute_cdp_cmd()来调用一下Chrome DevTools Protocal提供的方法.但是,很遗憾,没有全屏截图的方法. Se

  • 基于jquery实现页面滚动时顶部导航显示隐藏

    基于jquery实现页面滚动时顶部导航显示隐藏

    本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 引入核心文件 <script src="js/jquery/1.11.1/jquery.min.js"></script> 构建html,margint这个div中为了出现滚动条而建,并无实际作用. <div class="top-title">这是顶部导航条</div> <di

  • 基于JS实现无缝滚动思路及代码分享

    原理: 1.给ul一个绝对定位使其脱离文档流,left设置为0,把图片塞进ul里,编写一个"移动"函数,函数功能能够使ul的left以一个正速度向右跑动, 2.设置一个定时器,让"移动"函数每30(参数可变)毫秒执行一次 3.因为ul的长度会"跑"完,此时可以使ul的content也就是img增加一倍, oUl.innerHTML +=oUl.innerHTML; 4.此时因为ul的content增加,其width也会随着增大,根据实际项目展示图

  • 基于jQuery实现歌词滚动版音乐播放器的代码

    基于jQuery实现歌词滚动版音乐播放器的代码

    先给大家看下效果图,感兴趣的朋友可以参考实现代码 核心代码如下所示: $.ajax({ url: "/music/music.txt", type: "get", success: function(data) { data = jQuery.parseJSON(data); var length = data.length; var now=0; for (i = 0; i < length; i++) { $("#musicText li&quo

  • 基于JQuery打造无缝滚动新闻步骤详解

    本文实例讲述了基于JQuery打造无缝滚动新闻的方法.分享给大家供大家参考,具体如下: 首先,我们这里有这么一段html代码,很简洁,如下所示: <ul> <li>你说我是好人吗,我是好人啊</li> <li>哈哈,我真的不知道说什么了</li> <li>生活就是应该平淡的</li> <li>像上学一样的工作</li> </ul> </div> 然后我们要做的就是使它无缝滚动

  • Java基于线程实现带有滚动效果的Label标签实例

    本文实例讲述了Java基于线程实现带有滚动效果的Label标签.分享给大家供大家参考.具体如下: import java.awt.Graphics; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel; /** * Java中用线程实现带有滚动效果的Label标签 */ public class Test extends JFrame { private static final long

  • Android仿淘宝头条基于TextView实现上下滚动通知效果

    Android仿淘宝头条基于TextView实现上下滚动通知效果

    最近有个项目需要实现通知栏的上下滚动效果,仿淘宝头条的那种. 我从网上看了一些代码,把完整的效果做了出来.如图所示: 具体代码片段如下: 1.在res文件夹下新建anmin文件夹,在这个文件夹里创建两个文件 (1).anim_marquee_in.xml进入时动画 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/ap

  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果 小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne

  • 基于vue.js无缝滚动效果

    基于vue.js无缝滚动效果

    一个简单的基于vue.js的无缝滚动 :feet:在线文档demo :ear_of_rice:小demo :blue_book:English Document 安装 NPM npm install vue-seamless-scroll --save 使用 ES6 详情的demo页面 example-src/App.vue // **main.js** import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(

  • 基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

    基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

    实现目标 浏览各大云平台,发现一个页面特效使用较为频繁,以"百度云"为例(https://cloud.baidu.com/),进入百度云后,当滚动条滚动至"更可靠的数据支持"模块时,页面数据将会开始滚动式增长特效.下面将会介绍我的解决方案,希望有同行更好的解决方案大家一起交流. 解决思路 主要的解决要点如下: 如何实现数字动画的效果 如何监听滚动条到指定的位置 分解要点寻找解决思路: 一.如何实现数字动画的效果 在vue的官方文档(https://cn.vuejs.

随机推荐