Selenium python模拟点击网页按钮 python点击网页按钮_python


上一次通过Eel实现了一个简单的可以交互得图形界面,但是没什么大用, 只是为了让大家有点认识,这次我通过一个实际得例子来继续Eel的把玩,因为是搞自动化的,所以上手最容易的是PLC,这次就通过Python和PLC进行数据读写,之后通过图形界面展示出来。 整体拓扑图如下


Selenium python模拟点击网页按钮 python点击网页按钮_数据_02


界面设计

还是通过bootstrap来设计整体得界面,界面如下


Selenium python模拟点击网页按钮 python点击网页按钮_js脚本_03


点击连接PLC按钮后,状态栏会显示设备已经连接得提升,之后测量值栏开始显示随机数

连接PLC设备

通过定义一个Reactor类,实现和S7-1200的连接,这里用到Snap7的库,之前的文章有写过这个库的使用方法。


Selenium python模拟点击网页按钮 python点击网页按钮_python 点击页面按钮_04


将读到的PLC结果保存到一个列表里,之后在js中可以循环输出结果


Selenium python模拟点击网页按钮 python点击网页按钮_js脚本_05


Reactor类中定义了两个方法,一个是读取PLC的数据,一个是输出这些数据

输出数据到JS

编写main.py文件,实例化一个Reactor类,调用Eel库,这里需要通过一个Eel装饰器,能接受页面上点击按钮后的动作


Selenium python模拟点击网页按钮 python点击网页按钮_数据_06


在前端页面中点击按钮后,js脚本会传递一个数字,python中通过这个数字判断下一步执行的动作


Selenium python模拟点击网页按钮 python点击网页按钮_python 点击页面按钮_07


可以看到target=="3"成立后,会实例化一个Reactor类,继续后续的动作


Selenium python模拟点击网页按钮 python点击网页按钮_python 点击页面按钮_08


通过eel.js_status可以将python中的变量传递到前端,这里将设备已经连接的字符串传递到前端显示出来,通过eel.js_value将PLC读取的数据传递到前端,这里的valueList是将PLC的所有数据打包成了一个列表。

前端展示

前端中我们通过js脚本实现控制和数据展示


Selenium python模拟点击网页按钮 python点击网页按钮_python_09


eel.expose中的两个函数分别对应python中的这两个函数,将python中的值传递出来,然后通过DOM将数据显示在正确的位置。


Selenium python模拟点击网页按钮 python点击网页按钮_python 点击页面按钮_10