最近工作過(guò)程中，一個(gè)常用的被測(cè)網(wǎng)站突然增加了滑塊驗(yàn)證環(huán)節(jié)，導(dǎo)致整個(gè)自動(dòng)化項(xiàng)目失效了。

為了解決這個(gè)滑塊驗(yàn)證問(wèn)題，在網(wǎng)上查閱了一些資料后，總結(jié)并實(shí)現(xiàn)了解決方案，現(xiàn)記錄如下。

1、滑塊驗(yàn)證思路

被測(cè)對(duì)象的滑塊對(duì)象長(zhǎng)這個(gè)樣子。相對(duì)而言是比較簡(jiǎn)單的一種形式，需要將左側(cè)的拼圖通過(guò)下方的滑塊進(jìn)行拖動(dòng)，嵌入到右側(cè)空槽中，即完成驗(yàn)證。

要自動(dòng)化完成這個(gè)驗(yàn)證過(guò)程，關(guān)鍵點(diǎn)就在于確定滑塊滑動(dòng)的距離。

根據(jù)上面的分析，驗(yàn)證的關(guān)鍵點(diǎn)在于確定滑塊滑動(dòng)的距離。但是看似簡(jiǎn)單的一個(gè)需求，完成起來(lái)卻并不簡(jiǎn)單。

如果使用自然邏輯來(lái)分析這個(gè)過(guò)程，可以拆解如下：

1. 定位到左側(cè)拼圖所在的位置，由于拼圖的形狀和大小固定，那么其實(shí)只需要定位其左邊邊界離背景圖片的左側(cè)距離。（實(shí)際在本例中，拼圖的起始位置也是固定的，節(jié)省了不少工夫）

2. 定位到右側(cè)凹槽所在位置，同樣其形狀和大小是固定的，那么只需要定位其左邊邊界離背景圖片的左側(cè)距離。

3. 用2中探測(cè)到的距離減去1中的距離，既是滑塊需要被拖動(dòng)的距離。

要完成上述的探測(cè)計(jì)算，首先我們想到的是使用元素定位的方法定位到拼圖和凹槽的位置。

然而這一想法是不可行的，原因在于這個(gè)驗(yàn)證模塊是使用兩個(gè)canvas即畫(huà)布元素實(shí)現(xiàn)的：

拼圖和凹槽都是“畫(huà)”在畫(huà)布上的，其本身并不是一個(gè)頁(yè)面元素，不能使用元素定位的方法。

因此我們考慮使用圖片解析的方法，分析畫(huà)布圖像本身，來(lái)確定相應(yīng)圖形的位置。

2、使用OpenCV進(jìn)行圖片解析

這里我們將引入OpenCV庫(kù)，來(lái)幫我完成圖片解析過(guò)程：

OpenCV是一個(gè)基于Apache2.0許可（開(kāi)源）發(fā)行的跨平臺(tái)計(jì)算機(jī)視覺(jué)和機(jī)器學(xué)習(xí)軟件庫(kù)，可以運(yùn)行在Linux、Windows、Android和Mac OS操作系統(tǒng)上。 

它輕量級(jí)而且高效——由一系列 C 函數(shù)和少量 C++ 類構(gòu)成，同時(shí)提供了Python、Ruby、MATLAB等語(yǔ)言的接口，實(shí)現(xiàn)了圖像處理和計(jì)算機(jī)視覺(jué)方面的很多通用算法。
OpenCV用C++語(yǔ)言編寫(xiě)，它具有C ++，Python，Java和MATLAB接口，并支持Windows，Linux，Android和Mac OS，OpenCV主要傾向于實(shí)時(shí)視覺(jué)應(yīng)用，并在可用時(shí)利用MMX和SSE指令， 如今也提供對(duì)于C#、Ch、Ruby，GO的支持。

2.1 OpenCV引入項(xiàng)目

1：下載 OpenCV

進(jìn)入到官網(wǎng) https://opencv.org/releases/ 下載對(duì)應(yīng)系統(tǒng)的 openCV 軟件包后，解壓放置到本地。

使用Maven依賴并不能引入正確的OpenCV外部依賴，這里需使用外部

2：工程中添加 jar 包

Intellij 中選擇 File -> Project Structure -> Modules -> Dependencies

點(diǎn)擊 add -> JARS or directories... 選擇

3. 新建滑塊驗(yàn)證工具類，引入OpenCV動(dòng)態(tài)鏈接庫(kù)文件：opencv_java450.dll

public class slideUtil {
 
    public static String dllPath = "D:\\AutoTest\\src\\main\\resources\\lib\\opencv\\opencv_java450.dll";
 
    public static void main(String[] args) {
 
        //getDistance();//調(diào)試用的main方法，調(diào)用一個(gè)getDistance方法，獲取拼圖和凹槽之間的距離，返回double類型數(shù)值。
    }

2.2 實(shí)現(xiàn)圖片解析，計(jì)算所需距離

由于本項(xiàng)目的特點(diǎn)，拼圖的形狀和位置是固定的，首先我們將拼圖和凹槽圖片下載到本地，方便后續(xù)處理。（其它項(xiàng)目可能出現(xiàn)圖片形狀不固定的情況，可以直接用selenium實(shí)時(shí)下載圖片，這過(guò)程比較簡(jiǎn)單，因此不贅述）。

下載完的圖片如下：

凹槽圖片：

拼圖圖片：

下面直接上代碼再做說(shuō)明：

 public static double getDistance(){
 
        // 加載OpenCV本地庫(kù)
        System.load(dllPath);
        //System.loadLibrary(Core.NATIVE_LIBRARY_NAME);
//對(duì)拼圖圖形進(jìn)行處理，存儲(chǔ)為Mat類型①
        Mat slideBlockMat=Imgcodecs.imread("slide_blk.png");//由于本項(xiàng)目的特點(diǎn)，拼圖的形狀和位置是固定的，因此直接將拼圖圖片保存到本地進(jìn)行使用了
//Step1、灰度化圖片②
        Imgproc.cvtColor(slideBlockMat,slideBlockMat,Imgproc.COLOR_BGR2GRAY);
        imwrite("cvt_blk.png",slideBlockMat);
//Step2、去除周圍黑邊
        for (int row = 0; row < slideBlockMat.height(); row++) {
            for (int col = 0; col < slideBlockMat.width(); col++) {
                if (slideBlockMat.get(row, col)[0] == 0) {
                    slideBlockMat.put(row, col, 96);
                }
            }
        }
        imwrite("nsr_blk.png",slideBlockMat);
//Step3、轉(zhuǎn)黑白圖
        Core.inRange(slideBlockMat, Scalar.all(96), Scalar.all(96), slideBlockMat);
        imwrite("ezh_blk.png",slideBlockMat);<br>
//對(duì)滑動(dòng)背景圖進(jìn)行處理③
        Mat slideBgMat = Imgcodecs.imread("slide_bg.png");//背景凹槽圖片需要?jiǎng)討B(tài)獲取，見(jiàn)下面的解析
//Step1、灰度化圖片④
        Imgproc.cvtColor(slideBgMat,slideBgMat,Imgproc.COLOR_BGR2GRAY);
        imwrite("hdh_bg.png",slideBgMat);
//Step2、二值化
        //Core.inRange(slideBgMat, Scalar.all(96), Scalar.all(96), slideBgMat);
        Imgproc.threshold(slideBgMat,slideBgMat,127,255, Imgproc.THRESH_BINARY);
        imwrite("ezh_bg.png",slideBgMat);
        Mat g_result = new Mat();
        /*
         * 將凹槽背景和拼圖圖形進(jìn)行匹配⑤
         */
        Imgproc.matchTemplate(slideBgMat,slideBlockMat,g_result, Imgproc.TM_CCOEFF_NORMED);
        Point matchLocation= Core.minMaxLoc(g_result).maxLoc;
//返回匹配點(diǎn)的橫向距離
        System.out.println(matchLocation.x);
        return matchLocation.x;
    }

2.3 算法解析說(shuō)明

①什么是Mat類型：

Mat 是 OpenCV 中用來(lái)存儲(chǔ)圖像信息的內(nèi)存對(duì)象。Mat 對(duì)象中除了存儲(chǔ)圖像的像素?cái)?shù)據(jù)外，還包括圖像的其它屬性：寬、高、類型、維度、大小、深度等?？梢哉J(rèn)為在OpenCV中，一個(gè)Mat對(duì)象就定義了一個(gè)圖像。②對(duì)于slide_blk.png的處理經(jīng)過(guò)了以下過(guò)程：灰度化：

去黑邊：

二值化：

最終的目的在于將圖形轉(zhuǎn)化為黑白分明的圖形，便于后續(xù)匹配。

③本項(xiàng)目中，由于背景凹槽圖片，凹槽的位置是動(dòng)態(tài)的，所以需要實(shí)時(shí)動(dòng)態(tài)獲?。海ㄈ绻龅狡磮D也需要?jiǎng)討B(tài)獲取，可以同樣處理）

WebElement bg_canvas = driver.findElement(slide_ver_bg_by);//元素定位，定位到背景圖片
 
        Object base64 = ((JavascriptExecutor) driver)
                .executeScript("return arguments[0].toDataURL('image/png').substring(21);", bg_canvas);//頁(yè)面元素轉(zhuǎn)Base64
        String base64Str = base64.toString();
        generateImage(base64Str , "slide_bg.png");// 將base64把字符串裝換成圖片

④對(duì)于slide_bg.png的處理經(jīng)過(guò)了以下過(guò)程：

灰度化：

二值化：

這里省略了去黑邊這一過(guò)程，因?yàn)閷?shí)踐發(fā)現(xiàn)，經(jīng)過(guò)上述兩部后，我們已經(jīng)能夠進(jìn)行較為準(zhǔn)確的圖片匹配了。

⑤matchTemplate：在模板和輸入圖像之間尋找匹配,獲得匹配結(jié)果圖像

esult：保存匹配的結(jié)果矩陣

TM_CCOEFF_NORMED標(biāo)準(zhǔn)相關(guān)匹配算法

minMaxLoc：在給定的結(jié)果矩陣中尋找最大和最小值，并給出它們的位置

3、Selenium處理滑塊滑動(dòng)

Selenium的滑塊處理是庫(kù)里的標(biāo)準(zhǔn)玩法，使用actions類或者javaScript的方式都可以實(shí)現(xiàn)，本例采用的是actions類方法：

public void slide_verify(WebDriver driver) throws InterruptedException {
 
        double  slideDistance = getDistance();//此處就是調(diào)用2中的OpenCV計(jì)算拼圖和凹槽距離
        System.out.println("滑動(dòng)距離是" + slideDistance);
        WebElement dragElement = driver.findElement(slide_obj_by);//定位到滑塊
        Actions actions = new Actions(driver);
        actions.clickAndHold(dragElement);//模擬鼠標(biāo)動(dòng)作，按住滑塊
        Thread.sleep(300);
<br>//滑動(dòng)，分兩次進(jìn)行①
        actions.moveByOffset(((int)slideDistance - 11)/2,0);
        Thread.sleep(1000);
        Thread.sleep(500);
        actions.release();
        actions.perform();
    }

①這里進(jìn)行滑動(dòng)時(shí)，首先滑動(dòng)距離之所以要減去11，是因?yàn)楸纠衅磮D的初始位置固定離整體圖形的左邊距是11.

分兩次滑行并且中間sleep了一個(gè)時(shí)間，是為了防止全勻速拖動(dòng)而被識(shí)別為機(jī)器人。

其它文章中有提到使用比較復(fù)雜的拖動(dòng)軌跡算法，本項(xiàng)目中實(shí)踐得知，滑動(dòng)軌跡并沒(méi)有太重要，分兩次拖動(dòng)就可以了，沒(méi)必要復(fù)雜化。

4、最終效果

最終的滑動(dòng)效果，因?yàn)楸粶y(cè)網(wǎng)站的敏感性就不放上來(lái)了，最終實(shí)現(xiàn)成果是較為理想的。

到此這篇關(guān)于Java + Selenium + OpenCV解決自動(dòng)化測(cè)試中的滑塊驗(yàn)證的文章就介紹到這了,更多相關(guān)Java滑塊驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論