PyQt5 QWebEngineView 注入 JavaScript 实现网页自动化
作者:沉舟时间:2026-10-22 21:00:35浏览:647
本文演示如何利用 PyQt5 的 QWebEngineView 加载网页,并通过 QWebEngineProfile 全局注入 JavaScript 脚本。脚本依据 URL 路径判断页面状态并自动执行点击、填值等交互操作,以廉价机票预订网站为例,展示从加载网页到自动化操作的完整流程与代码实现。
PyQt5内嵌浏览器注入JavaScript实现网页自动化
概要
受同学邀请,本文演示如何利用 PyQt5 内嵌浏览器组件浏览网页,并通过注入 JavaScript 脚本来实现自动化操作。
测试目标为一个廉价机票预订网站(http://www.flyscoot.com/),实现该功能的关键点如下:
- 使用 QWebEngineView 组件加载网页,并实时显示加载进度。
- 在默认配置(QWebEngineProfile)中植入 JavaScript 代码,使得脚本能在所有打开的网页中执行,无论用户跳转到哪个网址。
- JavaScript 脚本通过解析 URL 中的路径名来判断当前网页位置,从而决定执行何种具体操作。
以下是 Python 代码示例:
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
'''使用 PyQt5 内嵌浏览器浏览网页,并注入 Javascript 脚本实现自动化操作。'''
import os
import sys
from datetime import datetime
from PyQt5.QtWidgets import (
QWidget, QApplication, QVBoxLayout, QHBoxLayout,
QDesktopWidget, QTextEdit, QLabel, QLineEdit, QPushButton,
QFileDialog, QProgressBar,
)
from PyQt5.QtCore import QUrl, pyqtSlot
from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEngineProfile, QWebEngineScript, QWebEnginePage
class Browser(QWidget):
def __init__(self):
super().__init__()
self.init_ui()
# 脚本
self.profile = QWebEngineProfile.defaultProfile()
self.script = QWebEngineScript()
self.prepare_script()
def init_ui(self):
self.webView = QWebEngineView()
self.logEdit = QTextEdit()
self.logEdit.setFixedHeight(100)
self.addrEdit = QLineEdit()
self.addrEdit.returnPressed.connect(self.load_url)
self.webView.urlChanged.connect(
lambda i: self.addrEdit.setText(i.toDisplayString()))
self.jsEdit = QLineEdit()
self.jsEdit.setText('inject.js')
loadUrlBtn = QPushButton('加载')
loadUrlBtn.clicked.connect(self.load_url)
chooseJsBtn = QPushButton('选择脚本文件')
chooseJsBtn.clicked.connect(self.choose_js_file)
# 导航/工具
top = QWidget()
top.setFixedHeight(80)
topBox = QVBoxLayout(top)
topBox.setSpacing(0)
topBox.setContentsMargins(5, 0, 0, 5)
progBar = QProgressBar()
progBox = QHBoxLayout()
progBox.addWidget(progBar)
topBox.addLayout(progBox)
naviBox = QHBoxLayout()
naviBox.addWidget(QLabel('网址'))
naviBox.addWidget(self.addrEdit)
naviBox.addWidget(loadUrlBtn)
topBox.addLayout(naviBox)
naviBox = QHBoxLayout()
naviBox.addWidget(QLabel('注入脚本文件'))
naviBox.addWidget(self.jsEdit)
naviBox.addWidget(chooseJsBtn)
topBox.addLayout(naviBox)
self.webView.loadProgress.connect(progBar.setValue)
# 主界面
layout = QVBoxLayout(self)
layout.addWidget(self.webView)
layout.addWidget(top)
layout.addWidget(self.logEdit)
self.show()
self.resize(1024, 900)
self.center()
def center(self):
qr = self.frameGeometry()
cp = QDesktopWidget().availableGeometry().center()
qr.moveCenter(cp)
self.move(qr.topLeft())
@pyqtSlot()
def load_url(self):
url = self.addrEdit.text().strip()
if not url.lower().startswith('http://') \
and not url.lower().startswith('https://'):
url = 'http://{}'.format(url)
self.load(url)
@pyqtSlot()
def choose_js_file(self):
f, _ = QFileDialog.getOpenFileName(filter="Javascript files(*.js)")
if os.path.isfile(f):
self.jsEdit.setText(f)
self.prepare_script()
def prepare_script(self):
path = self.jsEdit.text().strip()
if not os.path.isfile(path):
self.log('invalid js path')
return
self.profile.scripts().remove(self.script)
with open(path, 'r') as f:
self.script.setSourceCode(f.read())
self.profile.scripts().insert(self.script)
self.log('injected js ready')
def log(self, msg, *args, **kwargs):
m = msg.format(*args, **kwargs)
self.logEdit.append('{} {}'.format(
datetime.now().strftime('%H:%M:%S'), m))
def load(self, url):
self.log(f'loading {url}')
self.addrEdit.setText(url)
self.webView.load(QUrl(url))
if __name__ == '__main__':
app = QApplication(sys.argv)
b = Browser()
b.load('http://www.flyscoot.com/')
sys.exit(app.exec_())
以下是 JavaScript 脚本示例:
// 简单起见,这里只演示部分页面,脚本内容摘自 Heng丶原贴文。
function handle(path) {
// 首页
if (path == '/zh') {
document.getElementsByClassName('radio-inline')[1].click();
document.getElementById('oneway_from').value='广州 (CAN)';
document.getElementById('oneway_to').value='新加坡 (SIN)';
document.getElementById('oneway_departuredate').value='2018年9月10日';
document.getElementsByClassName('btn--booking')[1].click();
return;
}
// 选择航班
if (path == '/Book/Flight') {
document.getElementsByClassName('price--sale')[0].click();
document.getElementsByClassName('heading-4')[0].click();
document.getElementsByClassName('btn-submit')[0].click();
return;
}
// 乘客信息
if (path == '/BookFlight/Passengers') {
document.getElementsByClassName('fname1')[0].value = "匿名";
}
}
let host = document.location.hostname;
if (host.endsWith('.flyscoot.com')) {
handle(document.location.pathname);
}
总结
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对本站的支持。如果你想了解更多相关内容请查看下面相关链接
作者最新文章
UmiJS 项目构建速度优化与打包体积精简技巧
2026-11-04 22:37:09
原生JS操作DOM与Vue/React虚拟DOM的本质区别
2026-11-04 17:52:27
怎么使用console.group和table优化JS日志可读性
2026-11-03 23:14:34
基于AST抽象语法树的JS代码反混淆实战教程
2026-11-03 21:22:24
JS手机号输入校验的性能优化与用户体验提升
2026-11-03 19:19:19
相关标签:
