一、Selenium的缺點分析

常用的Web自動化測驗方法往往都是基于元素定位的方式來進行的，比如熱門的selenium、appium都是基于這種方式的，

但隨著react、vue的普及，以及element、antd等組件庫的出現，通過元素定位的方式就顯得有心無力了！

為什么這樣說呢？我們舉一個簡單的例子來說明：

下面是通過antd組件庫來實作的一個小Demo，頁面有兩個按鈕：【添加用戶】、【修改用戶】：

在這里插入圖片描述

它們會打開編輯用戶資料的彈窗，彈窗里他們都有兩個相同的【確認】按鈕，
在這里插入圖片描述

我們知道，通過元素地址來定位元素的第一要點就是這個元素有唯一標識，當然有些小伙伴會說，直接通過Xpath路徑定位不用唯一標識也能定位到！
這里先不做解釋，我們一步一步來分析，告訴你為什么不建議使這么做！
如下圖所示，這兩個確定按鈕的元素地址無論標簽、文本資訊、還是class都是完全一樣的，因為都來源antd組件庫的同一組件，所以它們沒有任何區別！

在這里插入圖片描述

正因為它們沒有唯一的標識，所以如果想通過id、class、甚至是xpath的contains方式來定位，selenium識別不了到底是哪一個按鈕，就會失效！

當然，也正如上文說到的，通過xpath路徑的定位方式也可以定位成功，就算沒有唯一標識也行，

但會帶來什么樣的影響呢？還是舉個例子告訴你：

我們先打開添加用戶的彈窗，獲取【確定】按鈕的xpath地址：

/html/body/div[2]/div/div[2]/div/div[2]/div[3]/button[2]

然后再打開修改用戶彈窗，獲取它的【確定】按鈕的xpath地址：

/html/body/div[3]/div/div[2]/div/div[2]/div[3]/button[2]

可以明顯的發現：它們的div層級不一樣,一個是div[3]一個是div[2]，其他都是一樣的，這樣能夠執行成功，也能區分出兩個按鈕！

但是，如果你先打開的是【修改用戶】的彈窗，那它的【確定】按鈕所在的div層級就不是[3]了，會變成[2]！！
這樣就與【添加用戶】彈窗的【確定】產生了沖突，他們的元素層級都在div[2]了，當你再次執行時就會出現問題！在我們撰寫自動化測驗腳本的時候，不可能一番風順，總會因為各種原因出現一些問題，慢慢修改解決，一次次重跑才能解決！但正因為這樣的操作，以及元素路徑地址的不確定性，會大大加大我們的作業量！

而且必須按照預定的順序執行，對于上述的場景中，我們的執行順序必須是先打開【新建用戶】的彈窗，再打開【修改用戶】的彈窗，如果順序反了，就會定位失敗！
另外，前端調整頁面，哪怕微調，也可能導致相關模塊的整個UI用例全部需要重寫！

一點維護性都沒有，還談什么高效？

在網上也有小伙伴提出了類似的問題：

在這里插入圖片描述

它們的解決方案是讓開發加上id來解決，但實際上開發是不會情愿去為了方便你做自動化測驗來加id的，因為會增加它的作業量，即便開發愿意加入id，我們的作業量依然很大！
首先，上述的兩個【確定】按鈕的樣式和標簽等資訊都是一樣的，但你還是需要寫兩個元素地址來區分他們，如果一個彈窗嵌套的比較深，還有二級彈窗、三級彈窗，那你就需要寫多個【確定】元素地址，這依然很麻煩！

在我實際的專案中，有一個嵌套多層的彈窗，它的確認按鈕就有7個！
在這里插入圖片描述

那有沒有只用一個元素地址，也不用讓開發加唯一標識就能解決這些問題呢？

肯定是有的，不然我也不會寫這篇文章了！

二、解決方案

1. 講解與演示

我們可以使用影像識別來定位它，比如網易團隊開源的airtest，類似于上述彈窗嵌套有多個【確定】按鈕的情況，我們只需要截取一張【確定】按鈕的圖片，就能解決無數重復的確定按鈕的定位了！

這是我通過截圖-影像識別的執行效果:
在這里插入圖片描述

兩個【確定】按鈕完全共用的是一張圖片

2. 實踐教學

現在跟著我一起從0開始利用airtest寫一個簡單的影像識別測驗腳本吧

需求

撰寫一個程式，它會通過影像識別執行點擊百度的【新聞】，然后點擊【互聯網】這兩步操作

具體步驟

1.先安裝airtest

pip install airtest -i https://pypi.tuna.tsinghua.edu.cn/simple

2.創建一個專案，并輸入如下代碼：

from airtest.core.api import *

news_path = 'news.png'
internet_path = 'internet.png'
connect_device('Windows:///')
ST.CVSTRATEGY = ["surf", "tpl"]
ST.FIND_TIMEOUT = 2
touch(Template(news_path))
touch(Template(internet_path))