VS Code + Python + Selenium 自動化測試 Part1

前言

在開發一個大型的網站專案過程中，免不了需要針對特定的功能進行重複性的測試，其主要的目的是為了確保系統運作是否合乎規格，並且確認其結果是否合乎預期。但在整個網站測試的過程中，會有很多測試細節或是高度重複性質的測試行為，如果僅仰賴人工測試，往往會測到昏天暗地，並且有可能會隱藏人為的疏失，導致問題不易追蹤。

因此自動化測試在整個專案進行開發的過程中會扮演重要的一環。在進一步去撰寫自動化測試腳本前，我們需要先建立起基本的開發環境，之後再來著手進行撰寫測試腳本的動作。

開發環境的事前準備工作

1. 安裝 VS Code
2. 安裝 VS Code Python extension

3. 安裝 Python3 (version 3.8.2) Download
安裝完成後，可以透過下列指令確認是否安裝完成

# python --version
Python 3.8.2

4. 安裝 Selenium 的 Python 套件

# pip install selenium
# pip show selenium
Name: selenium
Version: 3.141.0
Summary: Python bindings for Selenium
Home-page: https://github.com/SeleniumHQ/selenium/
Author: UNKNOWN
Author-email: UNKNOWN
License: Apache 2.0
Location: c:\users\user\appdata\local\programs\python\python38-32\lib\site-packages
Requires: urllib3
Required-by:

5. 下載 Chrome 的 ChromeDriver Download
下載後，解壓縮將 chromedriver.exe 的執行檔跟系統的 Python 執行檔放在相同的資料夾下就可以全域(Global)使用 chromedriver。
另外也可以把 chromedriver.exe 的執行檔跟專案放在一起，缺點是如果有多個專案，則需要 copy 多份執行檔，會造成專案體積變大。

基本上 Selenuim 之所以能夠控制瀏覽器行為、或是瀏覽器進行溝通，都需要透過 Webdriver 或是 Selenuim RC (Remote Control) 來控制，因此 WebDriver 扮演著不可或缺的角色。

小試身手

1. 目標：利用 Python + Selenium 開啟 Google 首頁

2. 目標：利用前一個範例，在 Google 輸入框中輸入”phone”，並且按下搜尋

常用的 WebDriver API

定位元素
WebDriver提供了幾種元素的定位方式，在Python中對應的方式如下

1. id 定位：find_element_by_id()
   HTML規定，在 HTML 文件中 id 必須是唯一的，因此可以利用這個唯一性來尋找元素
   browser.find_element_by_id(“keyword”)
2. name 定位：find_element_by_name()
   HTML 規定，利用 name 來指定元素的名稱，因此也可以利用這個屬性來尋找元素
   browser.find_element_by_name(“shopping_cart”)
3. class 定位：find_element_by_class_name()
   HTML 規定，class 用來指定元素的類別名稱，其用法與 id、name 類似。
   browser.find_element_by_class_name(“s_super”)
4. tag 定位：find_element_by_tag_name()
   HTML 透過不同的 tag 來定義元素，因此可利用 tag 的名稱來直接找尋，但是這個在實際運用上卻甚少使用，主要的原因是 HTML 文檔中，會有大量的相同 tag 標籤。
   browser.find_element_by_tag_name(“input”)
5. link text 定位：find_element_by_link_text()
   這個專門用來定位有文字的超連結，例如 HTML 文檔為
   <a href=”//shopping.pchome.com.tw” _cid=”shopping_hp”>線上購物</a>
   則使用 link text 定位，可以用下列的方式表示
   browser.find_element_by_link_text(“24H線上購物”)
6. partial link 定位：find_element_by_partial_link_text()
   這個算是 link text 定位的輔助方法，有時候有些文字的超連結過長，這個時候可以取文字的部分文字進行定位，但是由於是取部分文字，因此是否具備唯一性，那就需要依據 HTML 文檔而定，使用方式為
   browser.find_element_by_partial_link_text(“線上購物”)
7. XPath 定位：find_element_by_xpath()
   XPath 有許多種定位策略，最直覺的是絕對路徑定位，其絕對路徑指的是標籤名稱的層級關係來定位元素的絕對路徑
   browser.find_element_by_xpath(“/html/body/div/div[2]/form/input”)
   除了上述的絕對路徑外也可以使用元素的屬性值來定位
   browser.find_element_by_xpath(“//input[@id=’keyword’]”)
   其中//input 表示目前頁面的某個 input 標籤，[@id=’keyword’] 表示這個元素的 id 值為 keyword，因此上述內容的 id 也可以換成 name 或是 class 來進行元素的定位

對於自動化測試來說，學會了元素的定位方式後，基本上已經有50%的功力可以來寫測試腳本。剩下的部分就是去了解 WebDriver 中所提供的各種方法以及真實應用。

控制瀏覽器行為

WebDriver 提供許多可以控制瀏覽器的方式，一般常用的有

控制瀏覽器視窗的大小
有時候我們希望瀏覽器能在指定的大小下執行，通常是為了確認 RWD 的效果是否正常顯示。例如我們會設定瀏覽器為 480 X 800，設定為行動版的網頁，然後瀏覽頁面。這個時候可以使用 set_window_size() 來達成此目的

控制瀏覽器上一頁、下一頁
一般使用者在使用瀏覽器的時候，會使用上一頁跟下一頁，可以在曾經瀏覽過的頁面之間跳轉，因此 WebDriver 也提供了對應的方法 back() 和 forward() 來模擬上一頁和下一頁的使用者行為。

模擬瀏覽器更新
有時候使用者會按下 F5 來刷新頁面，這個可以透過 refresh() 來實現。

總結

僅就 Python 跟 Selenium 基礎的應用來說明並且分享心得，下一篇會再繼續介紹更進階的 WebDriver 應用，並且會分享如何在專案中將自動化測試導入，下回見。