公共用例库计划--个人版（六）典型Bug页面设计与开发

1、任务概述

本次计划的核心任务是开发一个，个人版的公共用例库，旨在将各系统和各类测试场景下的通用、基础以及关键功能的测试用例进行系统性地归纳整理，并以提高用例的复用率为目标，力求最大限度地减少重复劳动，提升测试效率。
计划内容：完成公共用例库的开发实施工作，包括需求分析、系统设计、开发、测试、打包、运行维护等工作。

1.1、已完成：

需求分析、数据库表的设计：公共用例库计划–个人版（一）
主体界面与逻辑设计：公共用例库计划–个人版（二）
导出Excel功能：公共用例库计划–个人版（三）
模块选择功能改造与性能优化公共用例库计划–个人版（四）
QtCharts制作首页饼图与柱状图公共用例库计划–个人版（五）

1.2、本次待完成：

典型Bug：新增遇见的较典型的bug，进行复盘与经验总结。
1. bug、图片的库表设计
2. 典型Bug页面，界面设计
3. 逻辑代码开发

2、bug、图片的库表设计

计划创建两张表，一张表存放bug信息，一张表保存bug的图片。
在这里插入图片描述
建表语句：

			# 创建bug表
            self.cursor.execute("""  
                            CREATE TABLE IF NOT EXISTS bug (  
                                bugid INTEGER PRIMARY KEY AUTOINCREMENT,  --编号
                                title TEXT NOT NULL,  --标题
                                types INTEGER ,  --类型--对应码值表code40-49
                                difficulty INTEGER ,  --难度--对应码值表code30-36
                                moduleid INTEGER ,  --所属模块
                                describe TEXT , --描述
                                think TEXT , --思考
                                severity INTEGER  --严重程度--对应码值表code50-53
                            )""")
            # 创建图片表
            self.cursor.execute("""  
                            CREATE TABLE IF NOT EXISTS image (  
                                imageid INTEGER PRIMARY KEY AUTOINCREMENT,  --编号
                                name TEXT NOT NULL,  --名称
                                image_bytes BLOB ,  --图片
                                bugid INTEGER  --所属bug
                            )""")

3、典型Bug页面

主要功能设计介绍：
左侧使用listWidget显示bug列表，有翻页功能。
在这里插入图片描述
主体上面，把用例页面的查询条件copy过来改改，选择条件对左边列表的bug进行查询。

主体中部，点击左侧列表中bug名称，显示对应bug的详细信息。有图片上传按钮，显示图片、翻页等功能按钮。

最后建了一个窗口，放一个graphicsView控件，显示大图。（上面页面图片是label显示的，担心显示太小了）
在这里插入图片描述

4、bug新增代码开发

4.1 保存bug

在设计页面时，对保存按钮增加信号槽，点击保存触发save_bug。
对标题、描述进行必填验证。如果有获取到bugid，就走编辑流程，没有就新增bug。

    def save_bug(self):
        """bug页面，保存"""
        if not self.lineEdit_4.text() or self.textEdit.toPlainText() == '[步骤]\n\n[结果]\n\n[期望]\n':
            self.ts.xinxi("标题或描述不能为空！")
            return

        self.save_bug_b.setEnabled(False)  # 保存按钮置灰
        parts=self.mk_2.currentText().split("—ID:")  # 模块编号
        if len(parts) == 2:
            self.mk_2.mkid=parts[1]
        else:
            self.mk_2.mkid=''
        if self.bugid != 0:  # 编辑
            vlue=(f'{self.lineEdit_4.text()}',
                  tc_sql.codes_dict['mk_types'][f'{self.lileixing_bug_2.currentText()}'],
                  tc_sql.codes_dict['difficulty'][f'{self.nandu_2.currentText()}'],
                  f'{self.mk_2.mkid}', f'{self.textEdit.toPlainText()}',
                  f'{self.textEdit_2.toPlainText()}',
                  tc_sql.codes_dict['severity'][f'{self.nandu_3.currentText()}'], f'{self.bugid}')
            self.savesql_bug(
                "update bug set title=? ,types=? ,difficulty=?, moduleid=? ,describe = ?,think = ?,severity=? where bugid=?",
                vlue)
        else:  # 新增
            vlue=(f'{self.lineEdit_4.text()}',
                  tc_sql.codes_dict['mk_types'][f'{self.lileixing_bug_2.currentText()}'],
                  tc_sql.codes_dict['difficulty'][f'{self.nandu_2.currentText()}'],
                  f'{self.mk_2.mkid}', f'{self.textEdit.toPlainText()}',
                  f'{self.textEdit_2.toPlainText()}',
                  tc_sql.codes_dict['severity'][f'{self.nandu_3.currentText()}'])
            self.savesql_bug("INSERT INTO bug VALUES (NULL,?,?,?,?,?,?,?)", vlue)

    def savesql_bug(self, sql, vlue):
        """bug保存sql"""
        self.case_db.connect()
        if self.case_db.operate_one(sql, vlue):
            self.case_db.over()
            self.chaxun_bug()  # 查询列表
            self.ts.xinxi("保存成功")
            logging.info('bug页面，保存')
        else:
            self.ts.xinxi("保存失败，请检查")
        self.save_bug_b.setEnabled(True)  # 保存按钮恢复

4.2 bug查询

在设计页面时，对每一个查询条件设计信号槽，触发查询按钮，查询按钮触发chaxun_bug。
先获取查询条件的信息，然后通过拼接条件sql，查询出对应的bug，写入bug列表显示。

    def chaxun_bug(self, ye=1):
        """bug页面，查询"""
        parts=self.mk_1.currentText().split("—ID:")
        if len(parts) == 2:
            self.mk_1.mkid=parts[1]
        else:
            self.mk_1.mkid=''

        mk_types=tc_sql.codes_dict['mk_types'][
            f'{self.lileixing_bug.currentText()}'] if self.lileixing_bug.currentText() else ''
        difficulty=tc_sql.codes_dict['difficulty'][
            self.nandu.currentText()] if self.nandu.currentText() else ''

        dic={"bug.types": mk_types,
             "bug.difficulty": difficulty,
             "bug.moduleid": self.mk_1.mkid}
        dic_like={"bug.title": self.biaoti_bug.text()}
        sql1="select bugid || ':' || title from bug where"  # 拼接sql查询条件
        sql2="select count(*) from bug where"
        for k, v in dic.items():
            if v:
                sql1+=' ' + k + "= " + str(v) + " and"
                sql2+=' ' + k + "= " + str(v) + " and"
        for k, v in dic_like.items():
            if v:
                sql1+=' ' + k + " like '%" + v + "%' and"
                sql2+=' ' + k + " like '%" + v + "%' and"

        offset=20 * (ye - 1)  # 分页查询
        sql1=sql1.rstrip('where').rstrip('and') + " order by bug.bugid DESC " + f"LIMIT 20 OFFSET {offset}"
        sql2=sql2.rstrip('where').rstrip('and')

        self.case_db.connect()
        items=self.case_db.query_many(sql1)  # bug查询
        count=self.case_db.query_one(sql2)
        self.bugye_count=math.ceil(count[0] / 20)  # 页数计算
        self.case_db.over()
        self.listWidget.clear()  # 清空列表
        self.clear_bug()  # 清空页面
        if items:
            for i in range(len(items)):  # 数据写入列表
                item=QListWidgetItem(items[i][0])
                item.setToolTip(items[i][0])  # 写入提示
                self.listWidget.addItem(item)

            self.label_24.setText(f"总数: {count[0]}条 共: {self.bugye_count}页    ")
            self.lineEdit_3.setText(f"{ye}")
        else:
            self.listWidget.addItem("未查询到数据")  # 查询无数据，加空行
            self.label_24.setText(f"总数: 0条 共: 0页    ")
            self.lineEdit_3.setText("0")
        logging.info('bug页面，查询')

4.3 bug详情

查询出bug列表后，点击其中的bug，页面显示详情。对列表增加槽函数，点击触发show_bug。
获取点击的bugID，根据bugid查询出信息，回显到页面。

    def show_bug(self):
        """点击bug，显示bug详情"""
        a=self.listWidget.selectedItems()
        if a:
            parts=a[0].text().split(":")
            if len(parts) == 2:
                self.bugid=parts[0]
            else:
                self.bugid=0
                return
            sql26='''select bug.title,codes1.value as types,codes2.value as difficulty,
                    module.modulename || '—ID:' || module.moduleid,
                    bug.describe,bug.think,codes3.value as severity
                    from bug 
                INNER JOIN
                    codes AS codes1 ON bug.types = codes1.id AND codes1.id BETWEEN 40 AND 49 -- 关联类型码值表
                INNER JOIN
                    codes AS codes2 ON bug.difficulty = codes2.id AND codes2.id BETWEEN 30 AND 36 -- 关联难度码值表
                INNER JOIN
                    codes AS codes3 ON bug.severity = codes3.id AND codes3.id BETWEEN 50 AND 53
                LEFT JOIN
                    module  ON bug.moduleid = module.moduleid 
                where bug.bugid = ? '''
            self.case_db.connect()
            items=self.case_db.query_one(sql26, (self.bugid,))  # bug查询
            self.case_db.over()
            # bug详情回显
            self.lineEdit_4.setText(items[0])
            index=self.lileixing_bug_2.findText(items[1], Qt.MatchFlag.MatchFixedString)
            self.lileixing_bug_2.setCurrentIndex(index)  # 设置下拉框内容
            index2=self.nandu_2.findText(items[2], Qt.MatchFlag.MatchFixedString)
            self.nandu_2.setCurrentIndex(index2)
            self.mk_2.clear()  # 清空模块下拉
            self.mk_2.addItem(items[3])
            self.mk_2.setCurrentIndex(0)  # 设置模块下拉显示
            self.textEdit.setText(items[4])
            self.textEdit_2.setText(items[5])
            index3=self.nandu_3.findText(items[6], Qt.MatchFlag.MatchFixedString)
            self.nandu_3.setCurrentIndex(index3)
            logging.info('显示bug详情')

4.4 实现情况

现在bug新增，查询修改没问题。
在这里插入图片描述

5、图片管理

bug保存后，上传图片。有删除、图片翻页、查看大图功能

5.1 图片上传

上传图片按钮，触发函数up_image。
对图片大小、格式限制，然后将图片转成Base64格式存入数据库。

    def up_image(self):
        """上传bug图片"""
        if self.bugid == 0:
            self.ts.xinxi("未获取到bugID，请先选择或者保存bug")
            return

        MAX_IMAGE_SIZE=1.5 * 1024 * 1024  # 图片大小限制（例如：5MB）
        try:
            filename, _=QFileDialog.getOpenFileName(self, "选择图片", "",
                                                    "Image Files (*.jpg *.jpeg *.png *.bmp *.gif)")
            if not filename:        # 未选择图片，退出
                return
            name=filename.split('/')[-1]
            file_size=os.path.getsize(filename)  # 检查文件大小
            if file_size > MAX_IMAGE_SIZE:
                self.ts.xinxi(f'图片大小超过限制({MAX_IMAGE_SIZE / (1024 * 1024)}MB)，请上传更小的图片！')
            else:
                img=Image.open(filename)
                img.save(f"_internal/{name}", quality=90)  # 压缩图片
                with open(f"_internal/{name}", 'rb') as image_file:
                    content=base64.b64encode(image_file.read())  # 转换成Base64格式
                os.remove(f"_internal/{name}")

                self.case_db.connect()
                sql=f"INSERT INTO main.image (name, image_bytes,bugid) VALUES (?, ?, ?);"
                if self.case_db.operate_one(sql, (name, content, self.bugid)):
                    self.case_db.over()
                    self.show_image(self.bugid)
                    logging.info('上传bug图片')
                else:
                    self.ts.xinxi("图片上传出错")
        except Exception as e:
            self.ts.xinxi(f"上传出错：{e}")
            logging.error(e)

数据库中，存入的图片。

5.2 图片显示

图片上传后，就触发显示函数。将查询bug的图片，显示到label
首先对图像显示区域进行清理，如果查询到图片，将显示图片、名称、页数。

    def show_image(self, bugid, number=0):
        """根据bugID，查询bug图片"""
        self.label_image.setText('暂无图片')  # 清空bug图片区域数据
        self.pushButton_10.setVisible(False)  # 删除图片按钮，隐藏
        self.label_15.clear()
        self.label_34.clear()
        self.imageid=None

        self.case_db.connect()
        sql=f"SELECT image_bytes,imageid,name FROM image WHERE bugid=? LIMIT 1 OFFSET {number} "
        value=self.case_db.query_one(sql, (bugid,))
        count=self.case_db.query_one(f"SELECT count(*) FROM image WHERE bugid=? ", (bugid,))
        self.case_db.over()
        if value:                       # 显示图片、数量、名称
            self.imageid=value[1]
            str_encode=base64.b64decode(value[0])  # base64编码对应的解码（解码完字符串）
            pixmap=QPixmap()
            pixmap.loadFromData(str_encode)
            self.label_image.clear()
            scaled_pixmap=pixmap.scaled(self.label_image.size(), Qt.AspectRatioMode.KeepAspectRatio)
            self.label_image.setPixmap(scaled_pixmap)
            self.label_15.setText(f"{number + 1}/{count[0]}")  # 数量
            self.label_34.setText(f"{value[2]}")
            self.pushButton_10.setVisible(True)  # 删除图片按钮，显示
            logging.info('bug图片显示')

5.3 图片上传实现

在这里插入图片描述

5.4 大图窗口

点击页面图片，触发大图窗口。

    def image_clicked(self, event):
        """点击图片，打开图片窗口"""
        if self.imageid:
            self.case_db.connect()
            sql=f"SELECT image_bytes FROM image WHERE imageid=?"
            value=self.case_db.query_one(sql, (self.imageid,))
            self.case_db.over()
            str_encode=base64.b64decode(value[0])
            if not self.child_windows:
                image_max=Image_bug(str_encode)
                self.child_windows.append(image_max)  # 将新打开的窗口添加到子窗口列表
            else:
                self.child_windows[0].update_image(str_encode)  # 已有窗口，更新图片

            logging.info('bug图片，大图窗口')

大图窗口，继承界面设计好的窗口。
使用单例模式，只允许打开一个窗口，再次点击图片就更新窗口图片显示。
对鼠标滚轮进行重写，实现放大缩小图片。

class Image_bug(QWidget, Ui_imagemax):
    """图片页面"""
    _instance=None

    def __new__(cls, str_encode, parent=None):
        if cls._instance is None:
            instance=super().__new__(cls)
            instance.__init__(str_encode, parent)
            cls._instance=instance  # 保存到类变量以便后续使用
            return instance
        else:
            cls._instance.update_image(str_encode)  # 更新现有实例的图像数据
            return cls._instance

    def __init__(self, str_encode, parent=None):
        if self._instance:  # 避免多次初始化同一个实例
            return
        super().__init__(parent)
        self.str_encode=str_encode
        self.setupUi(self)
        self.init_image()

    def init_image(self):
        """窗口加载图片显示"""
        pixmap=QPixmap()
        pixmap.loadFromData(self.str_encode)
        scene=QGraphicsScene()# 创建图形视图、场景及图像项目
        item=QGraphicsPixmapItem(pixmap)
        scene.addItem(item)
        self.graphicsView.setScene(scene)# 设置视图与场景
        self.graphicsView.wheelEvent=self.wheelEvent_handler    # 重写滚轮事件处理函数
        self.show()

    def update_image(self, new_str_encode):
        """更新窗口图片"""
        self.str_encode=new_str_encode
        self.init_image()   # 重新加载图片数据
        self.activateWindow()  # 激活窗口
        self.raise_()       # 提升窗口至最前面

    def wheelEvent_handler(self, event):
        """滚轮放大缩小图片"""
        zoom_in_factor=1.25
        zoom_out_factor=1 / zoom_in_factor
        delta=event.angleDelta().y() / 120
        if delta > 0:
            factor=zoom_in_factor
        elif delta < 0:
            factor=zoom_out_factor
        else:
            return
        # 获取当前鼠标位置在视图坐标系中的位置
        mouse_pos_scene = self.graphicsView.mapToScene(QPoint(int(event.position().x()), int(event.position().y())))
        # 记录原始视图中心点
        old_center=self.graphicsView.viewport().rect().center()
        # 缩放视图
        self.graphicsView.scale(factor, factor)
        # 计算新的视图中心点，并确保鼠标下的内容不变
        new_center = self.graphicsView.mapFromScene(mouse_pos_scene).toPointF()
        self.graphicsView.centerOn(new_center)