UI自動化基礎知識

一、UI自動化測試介紹

1、什麼是自動化測試

概念：由程式代替人工進行系統校驗的過程

1.1自動化測試能解決的問題？

1. 迴歸測試 (冒煙測試)
   1. 針對之前老的功能進行測試,透過自動化的程式碼來實現。
   2. 針對上一個版本的問題的迴歸
2. 相容性測試:
   1. web例項化不同的瀏覽器驅動相當於對不同的瀏覽器進行操作，從而解決瀏覽器的相容性測試問題

1. 效能測試:透過一些工具來模擬多個使用者實現併發操作
2. 提高工作效率，保障產品質量

1.2自動化測試的優點

1. 自動化測試能在較少的時間內執行更多的測試用例
2. 自動化測試能夠減少人為的錯誤
3. 自動化測試能夠克服手工的侷限性
4. 自動化測試可以重複執行( 註冊使用者 --已註冊)

1.3自動化測試的誤區

1. 自動化測試可以完全代替手工測試 ----針針某些功能（圖片、頁面架構）也是沒有辦法透過自動化來實現
2. 自動化測試一定比手工測試厲害 金融行業更看重業務的積累
3. 自動化測試可以發現更多的BUG 是因為自動化測試主要用來做迴歸測試
4. 自動化測試適用於所有的功能 ---------------頁面的架構、圖片、文字，使用者體驗

1.4自動化測試分類

1. web自動化測試 web系統
2. 移動app自動化 app應用
3. 介面自動化 介面：用來給web或者app前端傳輸資料用的
4. 單元測試-自動化測試 針對開發人員的程式碼進行測試。 一般是由開發自己來做的
5. 安全測試（滲透測試） 針對系統、資料、應用等安全方面進行測試
6. 桌面應用自動化測試 針對windows的桌面應用程式進行自動化測試
7. 嵌入式裝置自動化測試 針對嵌入式裝置的應用程式進行自動化測試

2、什麼是UI自動化測試

概念：UI(user interface)透過對web應用以及app應用進行自動化測試的過程。

2.1 什麼專案適合做ui自動化測試？

1. 需求變動不頻繁 前端程式碼變更維護不方便
2. 專案週期長 ------專案短，上線之後不需要再去測試
3. 專案需要回歸測試 不用迴歸測試的也不需要寫自動化

2.2 UI自動化測試在什麼階段開始？

手工測試完成之後才做自動化測試，相當於是編寫自動化測試程式碼（透過手工測試能夠清楚的知道自動化測試的步驟以及結果）

2.3 UI自動化測試所屬分類

1. 黑盒測試（功能測試）-------- UI自動化測試 模擬人工對web以及app頁面進行操作的過程
2. 白盒測試（單元測試）
3. 灰盒測試（介面測試）

示例：

二、web自動化測試基礎

1、web自動化框架

1.1 主流的web自動化工具

1. QTP 由惠普公司開發的一款自動化工具，支援web、桌面的自動化測試。 收費的商用工具。
2. selenium 主要用來做web自動化測試的，開源的免費的工具。
3. root framework 自動化測試平臺。透過它可以實現web自動化測試、介面自動化測試、桌面的自動化測試。

1.2 selenium特點

selenium中文名是硒，就是用來做web自動化測試的

1. 開源軟體: 原始碼開放，但是不一定免費
2. 跨平臺: 平臺指作業系統。 linux、windows、 mac作業系統
3. 支援多種瀏覽器：firefox、chrome、 ie、edge、opera、safari
4. 支援多語言：python\java\C#\js\Ruby\PHP
5. 成熟穩定功能強大：被大公司使用。google、華為、百度、騰訊

在選擇自動化工具的時，這幾個特點就是選擇工具的依據。

1.3selenium發展史

1. selenium 1.0
   1. selenium IDE
      1. 是firefox的一款外掛，透過它可以記錄使用者的操作並生成對應的自動化指令碼。
   2. selenium grid 透過grid可以將指令碼下發到不同的電腦在不同的瀏覽器上面執行。

• 1. selenium RC
     1. 由JS封裝的一個工具，用來對瀏覽器進行操作的。

1. selenium 2.0
   1. selenium 1.0 + webdriver
   2. 針對瀏覽器的操作都是透過webdriver來實現的。
   3. 支援的語言更多

1. selenium 3.0
   1. 刪除了selenium RC
   2. 全面支援java8
   3. 支援macOS，支援safari瀏覽器
   4. 支援微軟最新的EDGE瀏覽器，支援更多的瀏覽器
2. selenium4.0

2、環境搭建

2.1 selenium工作原理

2.2 selenium環境安裝

2.1 python開發工具安裝（python+pycharm）

2.2 瀏覽器安裝

-需要注意瀏覽器與瀏覽器驅動的版本，不同的瀏覽器有不同的瀏覽器驅動，而且不同的版本也有不同的瀏覽器驅動

2.3selenium工具包安裝

1. 線上安裝方式: 在dos命令列中輸入: pip install selenium
2. 離線安裝方式:
   1. 需要獲取selenium離線安裝包並解壓
   2. 在DOS命令列進入到解壓的目錄，然後執行python setup.py install
3. pycharm進行安裝
   1. 在file選單中選擇setting， 然後選擇"project- interpreter"

1. 如何確認selenium安裝完成：可以透過pip show selenium進行檢視

2.4 瀏覽器驅動安裝

1. 安裝瀏覽器驅動之前，一定要知道自己瀏覽器的版本。

1. 透過https://npm.taobao.org/mirrors/chromedriver/ 獲取對應的瀏覽器驅動
2. 解壓瀏覽器驅動檔案，並將驅動檔案複製到python的根目錄就行了。
3. 檢視python安裝根目錄：透過where python命令

2.4 入門示例

1. 專案建立
   1. 專案名稱不要與第三方的模組名同名
   2. 檔名稱也不要與第三方的模組名或者是類名同名專案
   3. 建立時不要使用虛擬環境

1. 示例展示：

1. 搭建環境問題總結：

1、安裝過程中沒有urllib3這個模組

• • 1. 如果沒有對應的模組，可以透過線上或者離線的方式，安裝一下urllib3這個模組

2、chrome瀏覽器的版本與chrome瀏覽器驅動的版本不一致

• • 1. 先確定瀏覽器的版本，再下載對應的瀏覽器驅動版本

3、chrome瀏覽器安裝有問題，移動了chrome瀏覽器的應用程式目錄 從C盤移到E盤

• • 1. 不要隨便去移動安裝程式的位置，因為在登錄檔中會記錄程式安裝目錄資訊。

4、chrome瀏覽器驅動沒有複製到python安裝的根目錄下

• • 1. python安裝的根目錄不是python安裝檔案的目錄。

5、大家在建立專案時，用的是虛擬環境（包含venv目錄），虛擬環境下找不到selenium模組

• • 1. 切換虛擬環境到正常的環境

3、元素定位

3.1 如何進行元素定位？

元素： 由標籤頭+標籤尾+標籤頭和標籤尾包括的文字內容

元素的資訊就是指元素的標籤名以及元素的屬性

元素的層級結構就是指元素之間相互巢狀的層級結構

元素定位最終就是透過元素的資訊或者元素的層級結構來進行元素定位。

3.2 瀏覽器開發者工具介紹

1. 瀏覽器開發者工具----主要用來檢視元素的資訊, 同時也可以檢視介面的相關資訊。
2. 瀏覽器開發者工具不需要安裝，瀏覽器自帶.
3. 瀏覽器開發者工具的啟動:
   1. 直接按F12 不區分瀏覽器
   2. 透過右鍵的方式來啟動瀏覽器開發者工具 (谷歌瀏覽器右鍵選擇“檢查”, 火狐瀏覽器右鍵選擇“檢查元素”）
4. 瀏覽器開發者工具使用
   1. 點選 瀏覽器開發者工具左上角的 元素檢視器按鈕
   2. 再點選想要檢視的元素

3.3 元素定位

id定位 name定位 class_name定位 tag_name定位 link_text定位 partail_link_text定位 xpath定位 css定位

3.3.1 ID定位

1. 透過元素的ID屬性值來進行元素定位 ，在html標準規範中 ID值是唯一的

說明： 元素要有ID屬性

1. 定位方法：find_element_by_id(id) # id參數列示的是id的屬性值

3.3.2 name定位

1. 透過元素的name屬性值為進行元素定位 name屬性值在HTML頁面中，是可以重複的。

說明：元素要有name屬性

1. 定位方法: find_element_by_name(name) # name 參數列示的是name的屬性值

3.3.3 class_name定位

1. 透過元素的class屬性值進行元素定位 class屬性值是可重複的

說明：元素必須要有class屬性

1. 定位方法：find_element_by_class_name(class_name)

# class_name參數列示的是class的其中一個屬性值

3.3.4 tag_name定位

1. 透過元素的標籤名稱進行定位， 在同一個html頁面當中，相同標籤元素會有很多。

這種定位元素的方式不建議大家在工作當中使用。

1. 定位方法: find_element_by_tag_name(tag_name) #tag_name表示的是元素的標籤名稱。

如果有重複的元素，定位到的元素預設都是第一個元素

3.3.5 link_text定位

1. 透過超連結的全部文字資訊進行元素定位 ,主要用來定位a標籤
2. 定位方法： find_element_by_link_text(link_text) # link_text引數代表的是a標籤的全部文字內容。

3.3.6 partial_link_text定位

1. 透過超連結的區域性文字資訊進行元素定位，主要用來定位a標籤
2. 定位方法：find_element_by_partial_link_text(partial_link_text) # partial_link_text表示的是a標籤的區域性文字內容

3.3.7 定位一組元素

1. 定位一組元素的方法:

find_elements_by_id(id) find_elements_by_tag_name(tag_name)

1. 定位一組元素返回的值是一個列表
2. 可以透過下標來使用列表中的元素
3. 下標是從0開始。

示例：