【python+selenium自動化】圖像識別技術在UI自動化測試中的實際運用

引言：

目前在圖像識別方面的自動化測試框架有很多，其中比較有名的是airtest，主要做手機端的游戲自動化測試（http://airtest.netease.com/）

因為沒有實際把airtest運用在項目中的經驗，所以此篇文章暫不討論，等后續有時間去實踐了，一定回來分享

------------------------------------------------------------------------------------------------------------------

目前在做的項目，也運用到了圖像識別技術。優化過的框架，是通過一篇文章得來的啟發：https://www.pyimagesearch.com/2017/06/19/image-difference-with-opencv-and-python/#comment-429138

直接看下圖也行：

兩張信用卡的圖片，左圖有芯片和幾個字母，右圖沒有。通過圖像識別，兩張圖做比對，找出了差異，並把差異都標記了出來，這樣看圖片差異，是不是就一目了然了

根據上面的思路，需要兩張圖，一個是用來做對比的基礎圖片（Base），一個是拿來跟基礎圖片比較的圖片（Compare）

所以，在UI自動化測試的流程中，加入一個錄制基礎圖片的過程，比如上周的版本，我們跑自動化測試用例，錄制了基礎圖片，這周發版本，我們跑自動化測試用例后，把這個版本的圖片跟上個版本的圖片做比對，如果完全一致，那說明測試通過，如果有差異，要么是bug，要么是需求改動了UI。這樣做的好處是：一般自動化測試工程師不能像功能測試工程那樣，完全關心到每個版本的需求變動，這樣檢測出來的結果最為正確。

先上一部分代碼（就是上圖中信用卡比對差異的實現方法），后續有時間再把整個框架圖整理出來

import imutils
from skimage.measure import compare_ssim
import cv2
import numpy as np


class MarkDiffImg:
    @staticmethod
    def cv_imread(file_path):
        """
        讀取圖片（解決路徑中含有中文無法讀取的問題），一般是直接cv2.imread(filea_path)
        :param file_path:圖片的路徑
        :return:
        """
        cv_img = cv2.imdecode(np.fromfile(file_path, dtype=np.uint8), -1)
        return cv_img

    def mark_diff_img(self, result, basesnapshot_png, runningsnapshot_png, DiffSnapshot_Dir, casename, name):
        """
        對比圖片並標出差異，保存差異圖片
        :param basesnapshot_png:
        :param runningsnapshot_png:
        :param DiffSnapshot_Dir:
        :param casename:
        :param name:
        :return:
        """
        # 加載兩張圖片並將他們轉換為灰度：
        image_a = self.cv_imread(basesnapshot_png)
        image_b = self.cv_imread(runningsnapshot_png)
        gray_a = cv2.cvtColor(image_a, cv2.COLOR_BGR2GRAY)
        gray_b = cv2.cvtColor(image_b, cv2.COLOR_BGR2GRAY)

        # 計算兩個灰度圖像之間的結構相似度指數：
        (score, diff) = compare_ssim(gray_a, gray_b, full=True)
        diff = (diff * 255).astype("uint8")
        print("SSIM:{}".format(score))

        # 找到不同點的輪廓以致於我們可以在被標識為“不同”的區域周圍放置矩形：
        thresh = cv2.threshold(diff, 0, 255, cv2.THRESH_BINARY_INV | cv2.THRESH_OTSU)[1]
        cnts = cv2.findContours(thresh.copy(), cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
        cnts = imutils.grab_contours(cnts)

        # 找到一系列區域，在區域周圍放置矩形：
        for c in cnts:
            x, y, w, h = cv2.boundingRect(c)
            cv2.rectangle(image_a, (x, y), (x + w, y + h), (255, 0, 0), 2)
            cv2.rectangle(image_b, (x, y), (x + w, y + h), (255, 0, 0), 2)

        # 基礎快照標出與運行時快照的差異 圖片
        diffsnapshot_png_a = DiffSnapshot_Dir + casename + '/' + name + '_base.png'
        # 運行時快照標出與基礎快照的差異 圖片
        diffsnapshot_png_b = DiffSnapshot_Dir + casename + '/' + name + '_running.png'
        # 保存差異圖片
        cv2.imencode('.jpg', image_a)[1].tofile(diffsnapshot_png_a)
        cv2.imencode('.jpg', image_b)[1].tofile(diffsnapshot_png_b)
        result["對比快照-基礎快照路徑"] = diffsnapshot_png_a
        result["對比快照-運行時快照路徑"] = diffsnapshot_png_b

        return result