[鼠年全馬鐵人挑戰23]Selenium IDE 網頁自動化測試-1

｜前言｜最近發現一個很好用的自動化測試，所以就插撥一下～先跟大家介紹下這款好東西，也可以拿來測試你正在練習的作品，那就是Selenium IDE，由於他已經設計圖形用戶介面，所以非常好上手～讓我們直接開始介紹吧！

Selenium IDE 安裝

• 進入 Selenium 官網 的下載頁面：
  https://www.selenium.dev/downloads/
• 往下拉到 Selenium IDE 下載區塊選擇要安裝的瀏覽器版本(Chrome 或 Firefox)

• 進入擴充功能頁面，點選加到 Chrome → 新增擴充功能進行安裝

Selenium IDE 啟用

• 點擊擴充項目→允許存取檔案網址設定

• 開始使用 Selenium IDE ，他會跳出詢問框框

1-Record a new test in a new project : 建立新的測試專案，可立即輸入測試網址進行測試項目錄製。

2-Open an existing project : 開啟現有的測試專案。

3-Create a new project : 建立新的測試專案。

4-Close Selenium IDE : 關閉 Selenium IDE 。

Selenium IDE 建立新專案

• 點擊建立新的測試專案 → 新增專案並命名

• 新增URL(你想測試的網站)，並直接開始錄製

• 測試流程錄製完後，回到 Selenium IDE 點選停止錄影按鈕即可結束，流程命名後會出現在左側列表中，可再進行編輯。

• 點選播放按鈕可對此測試項目進行回放

• 指令區介紹：

1.Command : 指令執行的動作。

(Enable / Disable command → 按鈕 : 註解 / 解除註解 該行指令)

2. Target : 指令執行的目標元素。

(Select target in page → 按鈕 : 從測試頁面選擇元素目標)

( Find target in page → 按鈕 : 顯示選擇元素在測試頁面的位置)

3. Value : 指令執行的值

4. Description : 指令的描述，會直接顯示於該行指令區的位置，滑鼠移上該行時才會顯示指令設定。

• 執行記錄區 :

1. Log : 測試執行的相關紀錄，並顯示是否測試成功。

2. Reference : 點選任一行執行指令，可顯示該指令的相關訊息。

Selenium IDE 新增測試

點擊Tests旁邊＋的符號，即是新增一個測試 → 直接手動新增測試或開啟錄影，這就可以直接在同一專案中新增一筆測試了～

元素定位

用來指定HTML中的位置：

1. id:

• id=input
• css=#input

2. class:

• css=.input
• css=input[class = “inputCss1”]

3. name:

• name=myName
• css=input “myName”

4. xpath:

• @ : 選取元素的屬性
• // : 從當前節點選取所有子節點
• / : 選取當前節點
• … : 選取父節點
• 例如：選取當前子節點中id=”Btn”之鈕
  XPath＝//*[@id=“Btn”]

• 另一種方式可以到goole的開發者工具去查，並複製XPath，就可以迅速取得位置

|後記|

以上方法會的話就可以開始最簡單的跑測試了唷～～～下次會出下一集，講一些進階好用的工能，讓大家可以更好的使用Selenium IDE 這個自動化測試，讓你的開發更順利唷～我們下次見～～謝謝：）