python+pyqt5+selenium的web自动化小工具，还在逐步完善：（一）UI界面的完善

自己在学习selnium和python的过程中，想对自己学习内容做一些总结，所以产生了做这么个小工具的想法。
因为自己不是开发出生，所以难免有写不规范的地方，列位看官希望能提出来，给我一个改进的机会。
**PyQt5**:用来创建Python GUI应用程序的工具包.
**Selnium**:老朋友了，web自动化工具.

先说一下自己的思路
用户在界面上输入操作名称，关键字，定位方式，定位元素，操作的值，点击执行后，新开线程，将测试步骤拼接成actiion的名字,直接使用eval执行对应函数,调用selnium打开浏览器，实现自动化执行.
用例保存直接存为excel,方便后续维护.按照sheet来区分用例,一条sheet为一条用例.后期想加上文件夹维度的用例管理.预期实现最终用例库->用例集->用例的管理方式.
还有批量执行用例，目前还没做完。
安装我就不说了，网上的安装教程太多了。

目前UI界面如图：

整个项目的目录结构是这样的:
Config:放置配置文件
Drivers:放置chrome,firefox的selnium driver.
PageAction:放置封装的方法
scripts:放置excel用例
Ui:放置Ui界面,其实现在就一个主界面,我是觉得可能后期会加一些别的界面,就单独起了个文件夹
Utils:放一些方法,工具集

一,界面结构
这里没有使用QT自己生成的UI界面，是直接在IDE里面写的，

# encoding: utf-8
from PyQt5 import QtCore, QtWidgets
from Config.VarConfig import *
"""
主界面的UI类UiMainWindow
"""

class UiMainWindow(object):
    def initUI(self, main_window):
        """
        生成各个控件
        :return:
        """

先是生成主界面：

# 主体大小
        main_window.setObjectName('main_window')
        main_window.resize(1000, 650)
        self.widget = QtWidgets.QWidget(main_window)
        self.widget.setGeometry(200, 200, 1000, 650)
        main_window.setWindowTitle('网页自动化脚本')
        main_window.setCentralWidget(self.widget)

添加需要用到的label标签控件

# Label控件
        self.label_stepstable = QtWidgets.QLabel('操作步骤顺序')
        self.label_sheetlist = QtWidgets.QLabel('测试用例')
        self.label_logbrowser = QtWidgets.QLabel('运行日志')
        self.label_executresults = QtWidgets.QLabel('批量执行结果')

添加需要用到的PushButton控件

# 按钮控件
        self.btn_execute = QtWidgets.QPushButton('执行编辑中脚本')
        self.btn_savecase = QtWidgets.QPushButton('保存用例->')
        self.btn_addline = QtWidgets.QPushButton('增加一行')
        self.btn_load = QtWidgets.QPushButton('<-读取用例')
        self.btn_executeall = QtWidgets.QPushButton('批量执行')

添加需要用到的表格控件，主要有4个，步骤编辑框，用例选择框，日志展示框。

# 表格控件
        self.view_stepstable = QtWidgets.QTableWidget()   #步骤编辑框
        self.view_sheetlist = QtWidgets.QListWidget()     #用例选择框
        self.view_logbrowser = QtWidgets.QTextBrowser()   #日志展示框
        self.view_selectedcases = QtWidgets.QListWidget()   #批量执行用例

添加需要用到的下拉框

# 下拉框控件
        self.comb_selectexcel = QtWidgets.QComboBox()          #用例集选择下拉框

对步骤编辑框的详细设置

# view_stepstable设置
        self.view_stepstable.setColumnCount(COLUNM_NUMBER)
        self.view_stepstable.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff) # 不显示水平滚动条
        self.view_stepstable.horizontalHeader().setSectionResizeMode(QtWidgets.QHeaderView.Stretch)   # 自适应宽度
        self.view_stepstable.setHorizontalHeaderLabels(COLUNM_NAMES) # 列名

对于用例选择框的设置，设置多选，方便以后批量跑用例时选择用例

#用例选择支持多选
        self.view_sheetlist.setSelectionMode(QtWidgets.QAbstractItemView.ExtendedSelection)

至此，所有控件都准备完毕，现在开始布局
我的总体布局结构是这样的：

整个项目是一个大的纵向layout，其他的layout依次向里添加，由上往下加进去。
第一行layout是2个标签，操作步骤顺序和测试用例，我们记做layout1.设置两个标签中间伸缩量为1，就是除去标签，其他的空间都算作一份，放在2个标签中间

self.box_viewlabels = QtWidgets.QHBoxLayout()  # label布局
        self.box_viewlabels.addWidget(self.label_stepstable)
        self.box_viewlabels.addStretch(1)
        self.box_viewlabels.addWidget(self.label_sheetlist)

第二行是一个横向的layout展示布局框，我们记做layout2,里面包含了3个纵向的layout，分辨是步骤框，保存读取按钮框和选择用例框。

		self.box_views = QtWidgets.QHBoxLayout()   # 展示框布局

一个个来，先来步骤框，里面添加了步骤编辑的控件

        self.box_steps = QtWidgets.QVBoxLayout()  # 步骤框布局
        self.box_steps.addWidget(self.view_stepstable)

再来是中间2个按钮的按钮框,里面添加了2个按钮控件

		self.box_btnsave = QtWidgets.QVBoxLayout()  # 保存读取按钮布局
        self.box_btnsave.addWidget(self.btn_savecase)
        self.box_btnsave.addWidget(self.btn_load)

下面是用例选择框，由一个下拉框控件和一个list控件组成

self.box_cases = QtWidgets.QVBoxLayout()  # 读取用例布局
        self.box_cases.addWidget(self.comb_selectexcel, stretch=1)
        self.box_cases.addWidget(self.view_sheetlist, stretch=2)

3个框框画完，我们把这3个框框按照8比2比1的比例，添加到上面的self.box_views这个layout里面

		self.box_views.addLayout(self.box_steps, stretch=8)
        self.box_views.addLayout(self.box_btnsave, stretch=1)
        self.box_views.addLayout(self.box_cases, stretch=2)

下面是log的标题框，同最开始的标题框,

		self.box_loglabel = QtWidgets.QHBoxLayout()   # 日志labels框布局
        self.box_loglabel.addWidget(self.label_logbrowser)
        self.box_loglabel.addStretch(4)
        self.box_loglabel.addWidget(self.label_executresults)
        self.box_loglabel.addStretch(1)

日志展示框，框内添加了一个log展示控件，和一个批量执行用例显示的控件

		self.box_logview = QtWidgets.QHBoxLayout()    # 日志展示框
        self.box_logview.addWidget(self.view_logbrowser, stretch=8)
        self.box_logview.addWidget(self.view_logbrowser, stretch=2)
        self.box_logview.addWidget(self.view_selectedcases)

最后是执行按钮框了

		self.box_executebtns = QtWidgets.QHBoxLayout()    # 执行按钮布局
        self.box_executebtns.addStretch(5)
        self.box_executebtns.addWidget(self.btn_addline)
        self.box_executebtns.addWidget(self.btn_execute)
        self.box_executebtns.addStretch(4)
        self.box_executebtns.addWidget(self.btn_executeall)

至此，所有的子框架都完成，下面就是按照从上到下的顺序将他们添加进主框架

#布局
        vbox = QtWidgets.QVBoxLayout()    #最外围垂直框
        vbox.addLayout(self.box_viewlabels)
        vbox.addLayout(self.box_views)
        vbox.addLayout(self.box_loglabel)
        vbox.addLayout(self.box_logview)
        vbox.addLayout(self.box_executebtns)
        self.widget.setLayout(vbox)

至此，我们UI界面制作完毕