# Selenium UI 測試教學
###### tags: `測試`

## Selenium IDE 安裝

瀏覽器配套UI測試工具

0. 工具支援腳本錄製，可以簡化許多撰寫操作
0. 支援匯出 java/ python/ js mocha 測試程式，提供複雜的測試
0. 腳本檔是 json 格式

安裝連結
[chrome](https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd)
or
[Firefox](https://docs.seleniumhq.org/selenium-ide/)

# 小小心得

0. Selenium IDE，不太適合過於複雜的測試，例如 需要預先準備好 DB 資料的測試

[填入資料->] 點擊按鈕-> 出現 換頁/跳窗/頁面文字狀態 等等可能 <br>
透過預期出現的結果來進行 UI 的測試

  ex :
  例如，當我點擊頁面，帶到下個頁面，應該要正確把值帶過去
      並且當，電話國碼為 886 則 國碼欄位不可以異動

- 參考腳本 sample.side
- click_success
- click_success_886

也可以拿來測試手機版型 command: set window size, 可以指定視窗大小

0. 複雜測試: 預先準備 DB 資料，然後再進行測試操作，再去確認 DB 資料是否如預期

0. 測試基本概念，藉由固定的測試資料，操作後，得到預期的結果

0. 遇到驗證碼問題，則需要透過 萬用驗證碼 機制來進行測試，注意區分正式與測試機配置

0. 登入後頁面的測試，由於是利用瀏覽器，所以只要預先登入測試資料，或者是乾脆直接先執行過 login 測試，讓瀏覽器記住登入狀態，就可以進行測試

0. 偽元素，在 click 事件中是無法被點擊的

  command: assert element presert
  command: click
  判讀可以看到，但是 click 卻無法找到

  所謂偽元素，指 css :befor,:after 語法增加的元素

- 參考腳本 sample.side
- click_fail
- 執行結果會失敗，因為點不到該元素

---

# 建立簡易的 server 進行測試

## java server 建置參考

0. 請使用 sample8080.side 腳本

0. 直接把 public/sample 資料夾丟到 tomcat 部署目錄下，即可

  ex:
    ... /apache-tomcat-9.0.17/webapps/
                                     /sample

## Node server 建置教學

0. 請安裝 [Node.js](https://nodejs.org/en/)
0. 在專案目錄下執行指令

# 進行套件安裝
npm install

# 啟動 server
npm start
    
# 打開登入頁面確認啟動 http://localhost:3000/sample/login.html

## 參考資料

https://learngeb-ebook.readbook.tw/intro/selenium.html

https://linriva.pixnet.net/blog/post/57027213-%5Bsqa%5D-selenium-ide-vs-%E7%82%BA%E4%BB%80%E9%BA%BC%E9%9C%80%E8%A6%81%E8%87%AA%E5%8B%95%E5%8C%96%E6%B8%AC%E8%A9%A6-(%E8%BD%89%E8%B2%BC