Slide 1

Slide 1 text

讓測試不再 BB! 從 BDD 到 CI/CD, 不靠人力也能 MVP Joe Lin & Mia Chu

Slide 2

Slide 2 text

QA 如何測試? End-to-End Testing Performance Testing QA 角色與任務 CI/CD CONTENT 監控 Monitoring 01 02 03 04 06 05

Slide 3

Slide 3 text

Joe Lin TECH FRESH QA Dev 2021/09 ~ 2025/06 @NTUT EECS 2024/07 ~ 2025/06 @LINE Taiwan

Slide 4

Slide 4 text

01 QA 角色與任務

Slide 5

Slide 5 text

QA 角色與任務 需求溝通 制定規格 確認行為範例與驗收條件 討論產品目標與價值 開發與測試 依需求實作功能並確保符合情境 完成驗收 通過測試驗證並交付可用產品

Slide 6

Slide 6 text

監控產品狀況 QA 職責與工作 提高產品品質 加速回歸驗證 縮短交付週期 驗證真實情境 QA 職責

Slide 7

Slide 7 text

報告整合與測試監控 QA 職責與工作 測試規劃與安排 自動化測試 CI/CD 手動測試 QA 工作 測試工程師 自動化測試工程師

Slide 8

Slide 8 text

自動化測試 功能性測試 非功能性測試 整合測試 單元測試 端對端測試 安全性測試 相容性測試 效能測試

Slide 9

Slide 9 text

02 QA 如何測試?

Slide 10

Slide 10 text

行為驅動開發 協作與溝通 強調團隊各角色之間的有效溝通 使用者情境 採用簡單格式來描述功能行為 自動化測試 CI/CD 監控/報告

Slide 11

Slide 11 text

行為驅動開發 自動化測試 CI/CD 監控/報告 需求溝通 制定規格 確認行為範例與驗收條件 討論產品目標與價值 開發與測試 依需求實作功能並確保符合情境 完成驗收 通過測試驗證並交付可用產品

Slide 12

Slide 12 text

行為驅動開發 自動化測試 CI/CD 監控/報告 需要開發的功能 具體使用情境 前置條件 執行動作/功能 預期結果 補充

Slide 13

Slide 13 text

行為驅動開發 自動化測試 CI/CD 監控/報告 需求溝通 制定規格 確認行為範例與驗收條件 討論產品目標與價值 開發與測試 依需求實作功能並確保符合情境 完成驗收 通過測試驗證並交付可用產品

Slide 14

Slide 14 text

行為驅動開發 對應到 功能檔案 步驟實作 自動化測試 CI/CD 監控/報告

Slide 15

Slide 15 text

行為驅動開發 (BDD) 01 跨角色合作 開發、測試、業務人員密切溝通 03 活文件 規格同時是測試與文件 02 通用語言 使用大家都能理解的共通語言 04 由外而內的開發 從使用者行為或業務需求出發,再在 進行系統設計與實作 自動化測試 CI/CD 監控/報告

Slide 16

Slide 16 text

03 End-to-End Testing

Slide 17

Slide 17 text

End-to-End Testing 驗證「使用者」體驗 驗證系統整合性 捕捉跨層問題 自動化測試 CI/CD 監控/報告

Slide 18

Slide 18 text

Page Object Model Test Methods Web Element Methods Page Object Test 基本概念與結構: • 每個網頁對應一個類別 (class) • 每個類別包含: • 要操作的元素 (按鈕, 輸入框…) • 可以進行的動作 (login(), search()…) 自動化測試 CI/CD 監控/報告

Slide 19

Slide 19 text

Page Object Model 01 易維護 UI 改變時,只需更新一個地方 03 可重用性 同一頁面類別可在多個測試中使用 02 可讀性高 測試步驟像是在讀操作流程 ex: page.login() 04 可擴展性 隨著應用成長,測試架構依然清晰 自動化測試 CI/CD 監控/報告

Slide 20

Slide 20 text

E2E Testing Tool - Playwright 01 多瀏覽器支援 Chrome、Firefox、Safari 03 內建錄影、截圖、追蹤 測試失敗時能快速回溯與重現問題 02 自動等待 減少 flakiness (測試不穩定) 04 支援現代測試架構 POM、API 測試、並行執行 自動化測試 CI/CD 監控/報告

Slide 21

Slide 21 text

Mia Chu TECH FRESH QA Dev Education • M.S. in Information Management @ NTU • B.S. in Management Information Systems @ NCCU Experience • 2024-2025 TECH FRESH @ LINE TRAVEL • 2023 SDET @ iKala

Slide 22

Slide 22 text

04 Performance Testing

Slide 23

Slide 23 text

為什麼我們需要效能測試? 可用性 API / E2E 測試 效能測試 + → 自動化測試 CI/CD 監控/報告

Slide 24

Slide 24 text

效能測試分類 負載測試 Load Testing 可靠性測試 Reliability Testing 浸泡測試 Soak Testing 壓力測試 Stress Testing 自動化測試 CI/CD 監控/報告 All images sourced from Flaticon

Slide 25

Slide 25 text

壓力測試 Stress Testing 自動化測試 CI/CD 監控/報告 All images sourced from Flaticon 效能測試分類 • 找出系統極限 • 持續提高流量直到系統崩潰 • 像搬箱子不斷加重量直到撐不住

Slide 26

Slide 26 text

負載測試 Load Testing 自動化測試 CI/CD 監控/報告 All images sourced from Flaticon 效能測試分類 • 驗證預期使用量下的穩定性 • 在可預期範圍內逐步增加流量 • 每次加一定重量確認持續工作能力

Slide 27

Slide 27 text

浸泡測試 Soak Testing 自動化測試 CI/CD 監控/報告 All images sourced from Flaticon 效能測試分類 • 檢測長期穩定性問題 • 穩定高負載下執行 48-72 小時 • 像跑馬拉松的持久力測試

Slide 28

Slide 28 text

可靠性測試 Reliability Testing 自動化測試 CI/CD 監控/報告 All images sourced from Flaticon 效能測試分類 • 驗證固定負載下的穩定維持能力 • 持續一段時間的固定負載測試 • 不強調超長時間,重點為穩定性

Slide 29

Slide 29 text

關鍵指標 & 工具 Image sourced from https://sjinnovation.com/fine-tune-your-performance-testing- strategy-learn-how-test-and-optimize-your-application 自動化測試 CI/CD 監控/報告

Slide 30

Slide 30 text

05 CI/CD

Slide 31

Slide 31 text

CI/CD 自動化測試 CI/CD 監控/報告 Image sourced from https://www.mabl.com/blog/what-is-cicd

Slide 32

Slide 32 text

持續整合 Continuous Integration Pull Request Unit Test & Sonar Build Image (Dry Run) PR Notify Ready for Code Review 自動化測試 CI/CD 監控/報告

Slide 33

Slide 33 text

持續整合 Continuous Integration Pull Request Unit Test & Sonar Build Image (Dry Run) PR Notify Ready for Code Review 自動化測試 CI/CD 監控/報告

Slide 34

Slide 34 text

持續整合 Continuous Integration Pull Request Unit Test & Sonar Build Image (Dry Run) PR Notify Ready for Code Review 自動化測試 CI/CD 監控/報告

Slide 35

Slide 35 text

持續整合 Continuous Integration Pull Request Unit Test & Sonar Build Image (Dry Run) PR Notify Ready for Code Review 自動化測試 CI/CD 監控/報告

Slide 36

Slide 36 text

持續整合 Continuous Integration Pull Request Unit Test & Sonar Build Image (Dry Run) PR Notify Ready for Code Review 自動化測試 CI/CD 監控/報告

Slide 37

Slide 37 text

持續整合 Continuous Integration Pull Request Unit Test & Sonar Build Image (Dry Run) PR Notify Ready for Code Review 自動化測試 CI/CD 監控/報告

Slide 38

Slide 38 text

持續部署 Continuous Deployment Merge to Main Branch Update Test Coverage Build Docker Image Push to Harbor Update Image Tag Sync to K8s PostSync Jobs Logos sourced from the official websites of GitHub and ArgoCD. 自動化測試 CI/CD 監控/報告

Slide 39

Slide 39 text

持續部署 Continuous Deployment Merge to Main Branch Update Test Coverage Build Docker Image Push to Harbor Update Image Tag Sync to K8s PostSync Jobs Logos sourced from the official websites of GitHub and ArgoCD. 自動化測試 CI/CD 監控/報告

Slide 40

Slide 40 text

持續部署 Continuous Deployment Merge to Main Branch Update Test Coverage Build Docker Image Push to Harbor Update Image Tag Sync to K8s PostSync Jobs Logos sourced from the official websites of GitHub and ArgoCD. 自動化測試 CI/CD 監控/報告

Slide 41

Slide 41 text

持續部署 Continuous Deployment Merge to Main Branch Update Test Coverage Build Docker Image Push to Harbor Update Image Tag Sync to K8s PostSync Jobs Logos sourced from the official websites of GitHub and ArgoCD. 自動化測試 CI/CD 監控/報告

Slide 42

Slide 42 text

持續部署 Continuous Deployment Merge to Main Branch Update Test Coverage Build Docker Image Push to Harbor Update Image Tag Sync to K8s PostSync Jobs Logos sourced from the official websites of GitHub and ArgoCD. 自動化測試 CI/CD 監控/報告

Slide 43

Slide 43 text

持續部署 Continuous Deployment Merge to Main Branch Update Test Coverage Build Docker Image Push to Harbor Update Image Tag Sync to K8s PostSync Jobs Logos sourced from the official websites of GitHub and ArgoCD. 自動化測試 CI/CD 監控/報告

Slide 44

Slide 44 text

持續部署 Continuous Deployment Merge to Main Branch Update Test Coverage Build Docker Image Push to Harbor Update Image Tag Sync to K8s PostSync Jobs Logos sourced from the official websites of GitHub and ArgoCD. 自動化測試 CI/CD 監控/報告

Slide 45

Slide 45 text

持續部署 Continuous Deployment Merge to Main Branch Update Test Coverage Build Docker Image Push to Harbor Update Image Tag Sync to K8s PostSync Jobs Logos sourced from the official websites of GitHub and ArgoCD. 自動化測試 CI/CD 監控/報告

Slide 46

Slide 46 text

專案分享 : Performance Test in CD Image sourced from https://imgflip.com/i/4f8o46 CI/CD 自動部署至 BETA 環境 Current State 部署成功 ≠ 系統穩定 Challeng e 部署時自動觸發壓測 Objective

Slide 47

Slide 47 text

系統架構 Deployment Manifest YAML Pull Changes Sync Cluster Status Pull Image & Update Container Detect Changed Repo & Execute Tests PostSync Hook Notify Result Send Metrics Logos sourced from the GitHub, Argo CD, Kubernetes, Docker, Python, k6, Slack, and Grafana official websites.

Slide 48

Slide 48 text

系統架構 Deployment Manifest YAML Logos sourced from the GitHub, Argo CD, Kubernetes, Docker, Python, k6, Slack, and Grafana official websites.

Slide 49

Slide 49 text

系統架構 Deployment Manifest YAML Pull Changes Logos sourced from the GitHub, Argo CD, Kubernetes, Docker, Python, k6, Slack, and Grafana official websites.

Slide 50

Slide 50 text

系統架構 Deployment Manifest YAML Pull Changes Sync Cluster Status Logos sourced from the GitHub, Argo CD, Kubernetes, Docker, Python, k6, Slack, and Grafana official websites.

Slide 51

Slide 51 text

系統架構 Deployment Manifest YAML Pull Changes Sync Cluster Status Pull Image & Update Container Logos sourced from the GitHub, Argo CD, Kubernetes, Docker, Python, k6, Slack, and Grafana official websites.

Slide 52

Slide 52 text

系統架構 Deployment Manifest YAML Pull Changes Sync Cluster Status Pull Image & Update Container Detect Changed Repo & Execute Tests PostSync Hook Logos sourced from the GitHub, Argo CD, Kubernetes, Docker, Python, k6, Slack, and Grafana official websites.

Slide 53

Slide 53 text

系統架構 Deployment Manifest YAML Pull Changes Sync Cluster Status Pull Image & Update Container Detect Changed Repo & Execute Tests PostSync Hook Notify Result Send Metrics Logos sourced from the GitHub, Argo CD, Kubernetes, Docker, Python, k6, Slack, and Grafana official websites.

Slide 54

Slide 54 text

Argo CD 在 Sync 成功時觸發 Performance Test

Slide 55

Slide 55 text

K8s 使用 PostSync hook 觸發 Job 執行兩個 container repo-change-detector 判斷哪個 repo 被更新 qa-k6-runner 執行對應的 k6 測試腳本

Slide 56

Slide 56 text

Test Results 測試完成後 自動將結果推送到 Slack 將數據推送至 Grafana 視覺化呈現效能指標

Slide 57

Slide 57 text

06 監控 Monitoring

Slide 58

Slide 58 text

監控 Monitoring 自動化測試 CI/CD 監控/報告 Images sourced from the Grafana, Allure Report, and Stack Overflow official websites.

Slide 59

Slide 59 text

No content