selenium元素定位截图

作为测试工作者，我们在做ui自动化时可能会遇到需要对页面进行截图的情况。但是大部分都是全屏截图，今天学到了一个模块可以进行对某元素截图，想来以后可能会用到或者大家会用到像记录下来分享给大家。
下边是代码，我在代码后边做了下注释。仅为一个demo，所以可能不规范。见谅。

(1) 代码

from selenium import webdriver
from time import sleep
from PIL import Image

def ele_coor(ele):   #定义了一个方法，此方法的作用是传入一个元素，返回此元素左上角和右下角的坐标
    elem_posi = ele.location   #将元素左上角的位置赋值给 elem_posi
    elem_size = ele.size       #将元素的大小赋值给elem_size
    right = elem_posi["x"] + elem_size["width"]  # 元素左上角x + 元素宽 = 元素右下角x坐标
    bottom = elem_posi["y"] + elem_size["height"] #元素左上角y + 元素搞 = 元素右下角y坐标
    coor=(elem_posi["x"],elem_posi["y"],right,bottom) #将左上角x，y，右下角x，y 写成一个元组
    return coor   # 将元组返回给调用者

driver = webdriver.Chrome()      #webdriver启动谷歌浏览器
driver.fullscreen_window()       #将浏览器设为全屏
driver.get("http://172.31.205.34:3000/d/F5QuGbZZk/172-31-205-32?orgId=1") #请求网页地址
sleep(2)
driver.save_screenshot('cpu.png')   #截全屏，如果需要的是全屏截图 ，除了driver.close()以外，其余皆不写
im = Image.open('cpu.png')  #打开此图片
ele=driver.find_element_by_id("panel-2")  #定位元素的方法，

sleep(3)
im = im.crop(ele_coor(ele))  #先调用ele_coor方法传入元素，返回一个坐标。将原全屏的图片，截取 ele_coor返回的坐标赋值给im
im.save('cpu.png')  #保存新的图片覆盖原全屏的图
driver.close()  #关闭浏览器

(2) 效果

        <1> 全屏

        <2> 通过元素定位截取后的图片

(3) 注意 ：

        <1> 需要fullscreen_windows()进行全屏显示，否则可能变形。视情况而定

        <2> 定位元素的方法也可以用 其他，如classname 、 text、 xpath等，但是必须唯一能定位到。否则可能截成其他图

        <3> 如果用ele = driver.find_elements_by_class_name("XXXX") 的话 ele将是一个列表 ele_cool(ele)方法内可以用一个循环，然后返回一个列表[(x,y,x,y),(x,y,x,y),(x,y,x,y)]这样的形式。截图时就不能覆盖了

        <4> 这种方法效率可能较低，部分业务可用。所以还需结合场景分析

        <5> 只能截当前屏幕元素所在的图。如果想截任意元素的图。链接：       https://blog.csdn.net/qq_42884600/article/details/96328908

 

完！