前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >selenium下对指定元素进行截图

selenium下对指定元素进行截图

作者头像
上帝De助手
发布2019-09-18 14:28:21
4K0
发布2019-09-18 14:28:21
举报
文章被收录于专栏:TestQA

Selenium本身是可以支持截图的,包括全屏和元素的截图;只是对于不用的浏览器的兼容性有差异而已。具体差异如下:

所以如果要想截取整个页面的截图,只有PhantomJS支持,而想要元素的截图除了PhantomJS其它都支持。

代码语言:javascript
复制
driver = webdriver.Ie()
driver.maximize_window()
driver.get("https://www.autohome.com.cn")

driver.save_screenshot('capture.png')    #全屏截图

ele = driver.find_element_by_id('s4612')
ele.screenshot('ele.png')    #元素截图

那么如果想要在PhantomJS截图元素图片,在Chrome截取整个页面图片时,该如何操作呢?

PhantomJS截图元素图片

  1. 先截图全屏
  2. 获取具体元素的绝对位置信息
  3. 根据位置信息在全屏图中裁剪
代码语言:javascript
复制
from selenium import webdriver
from PIL import Image

driver = webdriver.PhantomJS()
driver.maximize_window()

driver.get("https://www.autohome.com.cn")
driver.save_screenshot('capture.png')    #截取全屏

ele = driver.find_element_by_id('s4612')

#获取元素位置信息
left = ele.location['x']
top = ele.location['y']
right = left + ele.size['width']
bottom = top + ele.size['height']

im = Image.open('capture.png')
im = im.crop((left, top, right, bottom))    #元素裁剪
im.save('ele_capture.png')    #元素截图

driver.quit()

非PhantomJS截取全屏

非PhantomJS的浏览器只能截取可视区域的截屏,解决方法就是滚动截取+拼接的方式来实现。

代码语言:javascript
复制
from selenium import webdriver
from PIL import Image
import time
driver = webdriver.Firefox()
driver.maximize_window()

driver.get("https://www.autohome.com.cn")

script = '''
    var viewHeight = document.documentElement.clientHeight;
    var bodyHeight = document.body.scrollHeight;
    return {'viewHeight': viewHeight, 'bodyHeight': bodyHeight};
'''
height_values = driver.execute_script(script)
default_name = 'capture_0.png'
driver.save_screenshot(default_name)
image_list = [(default_name, 0)]
image_width = 0

if height_values['viewHeight'] < height_values['bodyHeight']:   # 有滚动条
    is_over = False
    scrollY = 0

    while not is_over:
        script = '''
            scrollTo(arguments[0], arguments[1]);
        '''
        x = 0
        y = min(height_values['bodyHeight'] - scrollY, height_values['viewHeight'])
        scrollY += y
        fn = 'capture_%s.png' % scrollY
        driver.execute_script(script, x, scrollY)
        time.sleep(2)
        driver.save_screenshot(fn)

        if scrollY == height_values['bodyHeight']:
            is_over = True
            cropY = height_values['viewHeight'] - y

            im = Image.open(fn)
            image_width = im.width
            im = im.crop((0, cropY, image_width, height_values['viewHeight']))
            im.save(fn)

        image_list.append((fn, scrollY))

if image_list:
    merge_img = Image.new('RGB', (image_width, height_values['bodyHeight']), 0xffffff)

    j = 0
    for f, scrollY in image_list:
        print(f)
        img = Image.open(f)
        merge_img.paste(img, (0, j))
        j += height_values['viewHeight']
    merge_img.save('merge.png')

driver.quit()

上面的代码只能应付普通的长页面,对于有动态加载内容的页面需要动态获取body的高度;另外不同的浏览器对于其中的js可能不兼容。所以上面的这种方式只是一个备选。

注意:

  • 在截图过程中不要滚动页面,否则截取的图片可以有误
  • PhantomJS截图的全屏图片背景色为透明色
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-01-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 TestQA 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • PhantomJS截图元素图片
  • 非PhantomJS截取全屏
  • 注意:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档