Upgrade to Pro — share decks privately, control downloads, hide ads and more …

寫出不管地震怎麼搖 網站都不會壞的前端測試

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for LINE Developers Taiwan LINE Developers Taiwan PRO
June 19, 2024
Technology
2.2k
0

寫出不管地震怎麼搖 網站都不會壞的前端測試

Speaker: YU Chen
Event: LINE TECH FRESH 畢業分享會

Avatar for LINE Developers Taiwan

LINE Developers Taiwan PRO

June 19, 2024

More Decks by LINE Developers Taiwan

See All by LINE Developers Taiwan
2026.04.09_台灣客服協會_從資料重新理解客服_ Charlie Wang
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
31
Zona 台北大學 GDG 分享
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
50k
台大資料分析與決策社 機器學習的商業應用＿Rei
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
23
政大數據分析社 機器學習的商業應用_Rei
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
40
Gemini 2025 新功能回顧 LINE Bot 完美結合
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
570
NTUAI企業參訪
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
18k
Data TECH FRESH企業參訪- Amber
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
40k
Data Team 實習分享
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
32k
Backend Intern之旅
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
44k

Other Decks in Technology

See All in Technology
AWS Transform CustomでIaCコードを自由自在に変換しよう
Avatar for k-kun duelist2020jp
0
220
AIが自律的に働く時代へ Amazon Quick で実現するAIエージェント紹介
Avatar for こーへい koheiyoshikawa
0
160
Building a Study Buddy AI Agent from Scratch: From Passive Chatbots to Autonomous Systems
Avatar for Patrick Eichler itchimonji
0
110
GitHub Copilot CLI と VS Code Agent Mode の使い分け
Avatar for tomokusaba tomokusaba
0
120
Percolatorを廃止し、マルチ検索サービスへ刷新した話 / Search Engineering Tech Talk 2026 Spring
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
220
Anthropic「Long-running a gents」をGeminiで再現してみた
Avatar for t-kikuchi tkikuchi
0
750
アクセシビリティはすべての人のもの
Avatar for tomokusaba tomokusaba
0
190
需要創出(Chatwork)×供給(BPaaS) フライホイールとMoat 実行能力の最適配置とAI戦略
Avatar for kubell kubell_hr
0
1.6k
20260423_執筆の工夫と裏側 技術書の企画から刊行まで / From the planning to the publication of technical book
Avatar for nash_efp nash_efp
3
690
運用システムにおけるデータ活用とPlatform
Avatar for SansanTech sansantech
PRO
0
150
基盤を育てる 外部SaaS連携の運用
Avatar for Hiroto Gamo gamonges_dresscode
1
130
AIでAIをテストする - 音声AIエージェントの品質保証戦略
Avatar for Morix morix1500
1
160

Featured

See All Featured
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
120
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.4k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
230
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.9k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Design in an AI World
Avatar for tapps tapps
1
200
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
380
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
820
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.4k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
180

Transcript

  1. 寫出不管地震怎麼搖 網站都不會壞的前端測試

  2. YU Content Dev TECH FRESH 北科資⼯ 圖片來源：LINE CREATIVE、LINE SPOT

  3. 越⾼的 Code Coverage 越好的 程式碼品質 === ?

  4. 什麼是 Code Coverage？

  5. 什麼是 Code Coverage？

  6. 什麼是 Code Coverage？

  7. 什麼是 Code Coverage？

  8. 什麼是 Code Coverage？

  9. 100% 的 Coverage !== 沒有 Bug

  10. 100% 的 Coverage !== 沒有 Bug

  11. 100% 的 Coverage !== 沒有 Bug

  12. 只看 Coverage 想要測什麼不好嗎？

  13. 1 不會涵蓋到 所有的 Use case 只看 Coverage 想要測什麼不好嗎？ 2 會變成在測實作

    ⽽不是在測功能

  14. 那我們應該要怎麼決定要測什麼呢？

  15. 那我們應該要怎麼決定要測什麼呢？ ⽤使⽤者會遇到的 使⽤情境（Use Cases）去想要寫哪些測試 當測試的⽅式越接近使⽤者使⽤的⽅式 就能讓我們對程式的正確性越有信⼼

  16. 程式會遇到的兩種使⽤者

  17. 1 Developer User 程式會遇到的兩種使⽤者 2 End User

  18. Developer User 會有的使⽤情境 l 傳入對應的參數時程式應該怎麼運作 l 當不同的 Side Effect 產⽣時程式應該

    怎麼運作

  19. End User 會有的使⽤情境 l 應該看到什麼樣的 UI l 跟某個 UI 互動後會看到什麼結果

  20. 可以幫助我們想出 Use Case 的⽅法

  21. 1 設計稿中的 User Flow & 需求⽅開的需求 可以幫助我們想出 Use Case 的⽅法

    2 從寫 E2E 測試 的⾓度去想 3 看 Code Coverage 沒有覆蓋到的地⽅

  22. Thank you! yu2001 @justYu2001 圖片來源：Discord、 WIKIPEDIA