使用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 跳转到确定登录所需信息) 修改后也仍适用

相关推荐
hunterandroid23 分钟前
HarmonyOS WebSocket 实战:断线重连、心跳保活与连接状态机设计
前端
hunterandroid28 分钟前
StateFlow 与 SharedFlow 的边界:状态与事件的正确建模
android·前端
心念科技35 分钟前
1、搜索表单 xnSearch(基于:心念后台,后端 Java 21 + Spring Boot 4 + Spring Cloud,前端提供 ReactVue3+TS、Vue3+JS、Vue2+JS
前端
计算机魔术师1 小时前
Dwarkesh Patel 对 OpenAI/Hugging Face 事件的爆款解读被指危险误导
前端
自进化Agent智能体2 小时前
Hermes GitHub PR 审查 —— 自动化代码评审
前端
涛涛ing4 小时前
OpenAI Astra 泄露:零样本生成 3D 网页,前端开发者慌了吗?
前端
ssshooter4 小时前
现在网页都能提供 MCP 了?!
前端·人工智能·程序员
杉氧4 小时前
状态管理变迁史:为什么我们放弃了 Redux 选择 Zustand?
android·前端·react native
cidy_984 小时前
OpenCode 手动配置火山方舟 Agent Plan 教程
前端
鹏多多5 小时前
PC 网站接入微信登录,这 10 个坑我替你踩完了!
前端·javascript·vue.js