iT邦幫忙

2023 iThome 鐵人賽

DAY 28
0
Modern Web

手動測試好累喔!一起來寫前端自動化測試吧~系列 第 28

[Day 28] 使用 Jenkins 達成前端自動化測試(ㄧ)

  • 分享至 

  • xImage
  •  

簡介 Jenkins

Jenkins 是一個可以實現持續整合(Continuous Integration, CI)/持續交付或持續部署(Continuous Delivery or Continuous Deployment)的工具。換言之,就是可以藉由這個工具,持續的執行「專案建置 -> 專案測試 -> 專案部署」。也因此,對於想把「前端測試」併入「自動化流程」中的我們,這是一個不錯的選擇。

安裝 Jenkins

可以直接至官網安裝 Jenkins,或是以指令的方式安裝。下載下來會是一個jenkins.war 檔案,此時需要用 java -jar jenkins.war 指令來啟動這個檔案。

https://ithelp.ithome.com.tw/upload/images/20231012/20161783FpM5kDbbBl.png

當看到 INFO Jenkins is fully up and running 就可以在預設端口 http://localhost:8080 看到初始化畫面囉!

https://ithelp.ithome.com.tw/upload/images/20231012/201617830S0EItFh4A.png

初始化 Jenkins

接下來會出現如下的畫面,依照步驟設定即可進入 Jenkins!

https://ithelp.ithome.com.tw/upload/images/20231012/20161783iyNJMkAa4i.png

https://ithelp.ithome.com.tw/upload/images/20231012/20161783d7enu59GHK.png

https://ithelp.ithome.com.tw/upload/images/20231012/201617831su9aNgOmt.png

4.可以選「跳過並以 admin 繼續」
https://ithelp.ithome.com.tw/upload/images/20231012/201617830Sjl76vHyV.png

5.在此可設定 url
https://ithelp.ithome.com.tw/upload/images/20231012/20161783yw8rb1GyAk.png

6.如此一來,Jenkins 便就緒!
https://ithelp.ithome.com.tw/upload/images/20231012/201617838h2wLEr8Vd.png

7.可以看到 Jenkins 畫面囉!
https://ithelp.ithome.com.tw/upload/images/20231012/20161783CVxzHiabI8.png

Projects 與 Pipeline

在 Jenkins「資訊主頁」左側的「新增作業」,點下去可以看到有「建立 Free-Style 軟體專案(Project)」、「Pipeline(流水線)」的選項。
https://ithelp.ithome.com.tw/upload/images/20231012/20161783UBgROLTRY0.png

一般而言,我們會將我們專案主體放入 Project 中,再透過不同的 Pipeline 去執行「建置(build)」、「測試(test)」、「部署(deploy)」等循序漸進的動作。而 Pipeline 中具備 Build Triggers,可以讓我們設定 Trigger 此 Pipeline 的條件。
https://ithelp.ithome.com.tw/upload/images/20231012/20161783iboIqUXUY5.png

Plugins

在 Jenkins「資訊主頁」左側的「管理 Jenkins」點下去可看到如下畫面:
https://ithelp.ithome.com.tw/upload/images/20231012/20161783shTgPl6dXE.png

選擇「Plugins」後,可以去下載需要的套件:
https://ithelp.ithome.com.tw/upload/images/20231012/20161783vtdVKx3e7p.png

例如:NodeJS、HTML Publisher(產生測試報告需要使用到)
https://ithelp.ithome.com.tw/upload/images/20231012/20161783iYSXoAjpf0.png
https://ithelp.ithome.com.tw/upload/images/20231012/20161783JqjWDHuDkl.png


上一篇
[Day 27] 產生測試報告
下一篇
[Day 29] 使用 Jenkins 達成前端自動化測試(二)
系列文
手動測試好累喔!一起來寫前端自動化測試吧~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言