[鼠年全馬鐵人挑戰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中的位置:
- 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 這個自動化測試,讓你的開發更順利唷~我們下次見~~謝謝:)