使用Chrome和Selenium实现对Superset等私域网站的截图

最近遇到了一个问题,因为一些原因,我搭建的一个 Superset 的 Report 功能由于节假日期间不好控制邮件的发送,所以急需一个方案来替换掉 Superset 的 Report 功能

首先我们需要 Chrome 浏览器和 Chrome Driver,这是执行数据抓取的基石

Selenium 是一个用于自动化 Web 应用程序测试的工具,它可以帮助模拟用户在浏览器中的操作,如点击、输入文本、提交表单等

这样,我们就可以通过网页的验证,并进入 Superset 进行我们需要的截图了

1. 安装

1.1 在服务器安装Chrome

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
apt install -y google-chrome-stable_current_amd64.deb
google-chrome --version

1.2 在服务器端安装Chrome Drive

这里可以查看你安装的stable版与对应的驱动, 上面查看版本可以看到我安装了132.0.6834.83版本,所以对应地,我需要下图中的版本。

wget https://storage.googleapis.com/chrome-for-testing-public/132.0.6834.83/linux64/chromedriver-linux64.zip
unzip chromedriver-linux64.zip
cp chromedriver-linux64/chromedriver /usr/bin/.

1.3 安装字体(针对中文网站)

这里 下载微软雅黑ttf格式字体。

将字体上传到服务器上,接着执行

mkdir -p /usr/share/fonts/chinese/
cp 微软雅黑.ttf /usr/share/fonts/chinese/
cd /usr/share/fonts/chinese/
fc-cache -fv
fc-list :lang=zh

也可只针对单用户

mkdir -p ~/.fonts
cp 微软雅黑.ttf ~/.fonts
fc-cache -fv
fc-list :lang=zh

2. 使用Selenium

没有安装 Selenium 的话,先使用pip安装

然后加载 driver

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.keys import Keys

如果是按照上面的流程安装的最新版的驱动的情况下, 使用下面一行即可加载驱动

python 复制代码
driver = webdriver.Chrome()

如果安装的 Chrome 或者驱动较老,则可以尝试使用如下方式加载驱动

python 复制代码
options = Options()
options.add_argument("--no-sandbox")  # Avoid using the sandbox mode
options.add_argument("--headless")  # Run Chrome in headless mode
options.add_argument("--single-process")
options.add_argument("--window-size=1920,1080")
driver = webdriver.Chrome(options=options)

2.1 确定登录所需信息

由于我们需要对私域网站截图,所以第一步需要先使用账号密码登录网站

Selenium 可以帮我们模拟输入文本和点击,但是前提需要我们找到输入框的所在位置,以及登录按钮所在的位置

由于在这里的id和class是唯一的, 所以我们可以使用 By.IDBy.CSS_SELECTOR 选择器直接选择

python 复制代码
username_field = driver.find_element(By.ID, 'username')
password_field = driver.find_element(By.ID, 'password')
button = driver.find_element(By.CSS_SELECTOR, "input.btn.btn-primary.btn-block")

2.2 输入信息并点击登录

python 复制代码
# 输入账户密码登录
import time

username_field.send_keys(username)
password_field.send_keys(password)
button.click()
time.sleep(3)  # 等待登陆,等待时间视实际响应时间为准

2.3 根据需求截图并保存

在输入想截图的网站的网址后,我们可以选择只登录,或者登录并跳转。以某dashboard为例子,下面演示登录并跳转到某dashboard截图的例子

python 复制代码
# 加载我们想加载的页面
driver.get(url)
time.sleep(15) # 等待页面加载完全,可以根据网页加载速度调整等待时间
width = driver.execute_script("return document.documentElement.scrollWidth")
height = driver.execute_script("return document.documentElement.scrollHeight")
driver.set_window_size(width, height)
driver.save_screenshot(save_path)
driver.quit()

上面的例子会动态根据长宽进行长截图,如果页面的长宽是确定的话,可以像下面一样执行

python 复制代码
driver.set_window_size(1920, 1080)

3. 结语

最后,使用Selenium截图的效果还是非常不错的,当然前提是要保证对网站的访问是顺畅的,建议同服务器通过 127.0.0.1 访问会更加顺畅和稳定,否则可能会丢失信息或者干脆无响应

上面的实现思路对公域网站明显是可以直接适用的,其它私域网站参考 [2.1 跳转到确定登录所需信息](#2.1 跳转到确定登录所需信息) 修改后也仍适用

相关推荐
16年上任的CTO2 分钟前
一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用
前端·webpack·node.js·sass-loader·css-loader·style-loader
离别又见离别8 分钟前
vue3-sfc-loader 加载远程.vue文件(sfc)案例
java·前端·vue.js
web1478621072314 分钟前
海康威视摄像头ISUP(原EHOME协议) 摄像头实时预览springboot 版本java实现,并可以在浏览器vue前端播放(附带源码)
java·前端·spring boot
守城小轩18 分钟前
Chromium 132 编译指南 Mac 篇(四)- 获取源代码
chrome·chrome devtools·指纹浏览器·浏览器开发
凡大来啦36 分钟前
Axios发起HTTP请求时的先后执行顺序
前端·javascript·http
Jason秀啊1 小时前
前端面试题-问答篇-5万字!
前端·面试·前端面试
傻小胖1 小时前
react中hooks之 React 19 新 Hooks useActionState & useFormStatus用法总结
前端·react.js·前端框架
16年上任的CTO1 小时前
一文大白话讲清楚webpack基本使用——4——vue-loader的配置和使用
前端·javascript·webpack·ecmascript·vue-loader·vueloaderplugin
16年上任的CTO1 小时前
一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload以及webpackChunkName的使用
前端·webpack·node.js·webpack preload·prefetch
软件工程师文艺2 小时前
使用HTML5 Canvas 实现呼吸粒子球动画效果的原理
前端·javascript·html·html5