Linux/windows下，使用 selenium+ python + chromediver 实现网页自动登录，截屏报表_在linux系统下,使用python + selenium实现浏览器自动登录

一、背景

有这么一个需求，公司每日邮件中推送一个echart报表，最简单的方法就是附上截屏图片，嵌入到邮件html中。报表是现成的网页，所以想到了后台自动截图存到服务器，再推送到邮件中。

二、如何实现？

1.安装chrome无头浏览器（Linux环境）

// 1. 添加yum源
sudo vim /etc/yum.repos.d/google.repo

// 在repo文件中添加以下内容
[google]
name=Google-x86_64
baseurl=http://dl.google.com/linux/rpm/stable/x86_64
enabled=1
gpgcheck=0
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub

1
2
3
4
5
6
7
8
9
10
11

// 2. yum 安装chrome
[root@VM-0-13-centos]#  yum install goole-chrome-stable --nogpgcheck

// 查看chrome版本
[root@VM-0-13-centos]# google-chrome --version
[root@VM-0-13-centos]# Google Chrome 101.0.4951.64
1
2
3
4
5
6

2. 下载 chrome-driver

下载驱动要注意一点 chrome 版本要和driver版本对上，不然会出现不兼容的问题，如上我们安装的chrome版本是101.0.4951.64,我们去网站找到大版本相匹配的diver；

点击–>chrome-driver下载网址 查看版本，我们安装最接近的版本，如图：

下载压缩包解压

// 下载压缩包
[root@VM-0-13-centos local]# wget http://chromedriver.storage.googleapis.com/101.0.4951.41/chromedriver_linux64.zip

// 解压文件到指定目录
[root@VM-0-13-centos local]# unzip chromedriver_linux64.zip -d /usr/local/chrome-driver/

// 添加软链接
[root@VM-0-13-centos ~]# ln -s /usr/local/chrome-driver/chromedriver  /usr/bin/chromedriver
1
2
3
4
5
6
7
8

ok，到这里无头浏览器就差不多装好了，接下来就是安装selenium包，用pip安装就行

[root@VM-0-13-centos ~]# pip3 install selenium
1

如图

3. 编写python脚本测试截图

'''
Author: Alan
Date: 2022-05-13 15:41:49
Description: 网页截屏
'''
from selenium.webdriver import Chrome
from selenium.webdriver.chrome.options import Options
import time
import os


# chrome-driver 安装路径
DRIVER_PATH = '/usr/bin/chromedriver'
# 若是windows环境下
# DRIVER_PATH = 'C:\Program Files (x86)\Google\Chrome\Application\chromedriver'

img_path = '/data/script/py/img'  # 存放截图的位置

if __name__ == "__main__":
    # 浏览器基础配置
    options = Options()
    options.add_argument('--no-sandbox')
    # options.add_argument('--headless')  # 无头参数
    options.add_argument('--disable-gpu')  # 禁用gpu 防止占用资源出现bug
    options.add_argument('window-size=1920x1080')  # 设置分窗口辨率
    options.add_argument('--start-maximized')  # 最大化运行（全屏窗口）,不设置，取元素可能会报错
    options.add_argument('--hide-scrollbars')
    
    # 启动浏览器
    driver = Chrome(executable_path=DRIVER_PATH, options=options)
    try:
        # 访问页面
        driver.get('https://blog.csdn.net/littleWhiteSan')

        # 截屏
        img_name = time.strftime(
            '%Y-%m-%d', time.localtime(time.time()))  # 截屏名称 时间表示
        img = "%s.png" % os.path.join(img_path, img_name)  # 图片
        driver.get_screenshot_as_file(img)  # 保存截图

    except Exception as e:
      print(e)
      driver.close()  # 关闭浏览器
      driver.quit()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

脚本写好了，我们把脚本放在在服务器上面运行一下

img 文件夹存放截图

python3 screenshoot.py
1

效果如下：

问题来了，乱码，原因是服务器没有中文字体包，复制一份中文字体到服务器上面即可解决

1.找到免费的中文字体包
2.上传到服务器上
3.刷新字体缓存

将下面字体包放到服务器/usr/share/fonts/

安装字体管理刷新缓存

yum install fontconfig mkfontscale

cd /usr/share/fonts/
mkfontscale
mkfontdir
fc-cache -fv
1
2
3
4
5
6

相关博客 https://blog.csdn.net/a___lei/article/details/118113211

问题已解决。

4. 模拟登陆，定点裁剪

如果需要登录之后再去截屏那么该如何操作？

1. 找到登录密码账号输入框和登录按钮
2. 打开开发着工具，复制xPath
3. py脚本写入账号密码，点击登录

准备：裁剪图片用到了PIL，未安装模块需要先安装

pip3 install pillow
1

脚本如下

'''
Author: Alan
Date: 2022-05-13 15:41:49
Description: 打开网页
'''
from selenium.webdriver import Chrome
from selenium.webdriver.chrome.options import Options
import time
import os.path
from PIL import Image


# chrome-driver 安装路径
DRIVER_PATH = '/usr/bin/chromedriver'
# DRIVER_PATH = 'C:/Program Files (x86)/Google/Chrome/Application/chromedriver' # windows下

img_path = '/data/script/py/img/'  # 存放截图的位置,要注意权限，确保脚本有权限访问和操作文件

# img_path = "D:/work/screenshoot/" # windows下

if __name__ == "__main__":
    # 浏览器基础配置
    options = Options()
    options.add_argument('--no-sandbox')
    options.add_argument('--headless')  # 无头参数
    options.add_argument('--disable-gpu')  # 禁用gpu 防止占用资源出现bug
    options.add_argument('window-size=1920x1080')  # 设置分窗口辨率
    options.add_argument('--start-maximized')         # 最大化运行（全屏窗口）,不设置，取元素会报错
    options.add_argument('--hide-scrollbars')
    # 启动浏览器
    driver = Chrome(executable_path=DRIVER_PATH, options=options)

    try:
        # 访问页面
        driver.get('https://blog.csdn.net/littleWhiteSan')

        # 登陆博客 去定点截图
        driver.get('https://passport.csdn.net/login?code=applets')

        time.sleep(.5)
        driver.find_element_by_xpath(
            '/html/body/div[2]/div/div[2]/div[2]/div[1]/div/div[1]/span[4]').click()  # 点击密码登录

        # 输入账号密码
        driver.find_element_by_xpath(
            '/html/body/div[2]/div/div[2]/div[2]/div[1]/div/div[2]/div/div[1]/div/input').send_keys('*******')
        driver.find_element_by_xpath(
            '/html/body/div[2]/div/div[2]/div[2]/div[1]/div/div[2]/div/div[2]/div/input').send_keys('******')

        # 点击登录
        driver.find_element_by_xpath(
            '/html/body/div[2]/div/div[2]/div[2]/div[1]/div/div[2]/div/div[4]/button')

        # 等跳转
        time.sleep(1)
        # 跳转我的第一篇文章
        driver.get(
            'https://blog.csdn.net/littleWhiteSan/article/details/124375478?spm=1001.2014.3001.5501')
        time.sleep(2)

        # 截取全屏 如果我们的浏览器窗口不够长，就会导致截图不全，这时候我们设置一下无头浏览器的宽高确保截取全
        # 注意：在windows下设置宽高，需要headless参数，不然截取也会不全

        width = driver.execute_script(
            "return document.documentElement.scrollWidth")
        height = driver.execute_script(
            "return document.documentElement.scrollHeight")
        driver.set_window_size(width, height)

        # 截屏
        img_name = time.strftime(
            '%Y-%m-%d', time.localtime(time.time()))  # 截屏名称 时间表示
        img = "%s.png" % os.path.join(img_path, img_name)  # 图片

        driver.get_screenshot_as_file(img)  # 保存截图

        # 找到我们需要截图的元素的id 或者xpath 去裁剪图片
        shootElement = driver.find_element_by_xpath(
            '//*[@id="mainBox"]/main/div[1]')

        size = shootElement.size
        location = shootElement.location
        rangle = (int(location['x']), int(location['y']), int(
            location['x'] + size['width']), int(location['y'] + size['height']))  # 写成我们需要截取的位置坐标
        i = Image.open(img)  # 打开截图

        frame4 = i.crop(rangle)  # 使用Image的crop函数，从截图中再次截取我们需要的区域
        frame4.save(img_path+'crop_shoot.png') # 保存裁剪的图片
        driver.close()  # 关闭浏览器
        driver.quit()
        print('done')
    except Exception as e:
        print(e)
        driver.close()  # 关闭浏览器
        driver.quit()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

测试一下：

python3 screenshoot.py
1

ok，执行没问题，我们来看下效果图

第一个图片是裁剪好的图片，第二个是截取的全屏图片，裁剪效果如下：

裁剪博客全文ok，脚本测试通过~

4. 嵌入邮件

若是要在outlook邮件中推送截图，只需要将截图作为附件插入到邮件中，在html中写入cid就行，如下：

Tips: 在windows下面就是改改驱动路径什么的，脚本内容大致一样，这里就不赘述了。

三、 结论

以上就是全部内容了，简单好用，如果对您有用的话请点个赞，有问题请留言指出，我会及时学习更正，谢谢各位大佬~