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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
39
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
Choose your own adventure in agentic design patterns
Avatar for Guillaume Laforge glaforge
0
160
Digital Independence: Why, When and How
Avatar for Wannes Rams wannesrams
0
210
『生成AI時代のクレデンシャルとパーミッション設計 — Claude Code を起点に』の執筆企画
Avatar for Takuro SASAKI takuros
2
1.8k
Microsoft 365 / Microsoft 365 Copilot : 自分の状態を確認する「ラベル」について
Avatar for Taichi Nakamura taichinakamura
0
430
AI時代の品質はテストプロセスの作り直し #scrumniigata
Avatar for kyonmm kyonmm
PRO
2
370
エージェントスキルを作って自分のインプットに役立てよう
Avatar for Yuta Matsumura tsubakimoto_s
0
500
Practical TypeProf: Lessons from Analyzing Optcarrot
Avatar for Yusuke Endoh mame
1
1.6k
これからの「データマネジメント」の話をしよう
Avatar for SansanTech sansantech
PRO
0
180
Shipping AI Agents — Lessons from Production
Avatar for vvatanabe vvatanabe
0
300
Oracle Cloud Infrastructure：2026年4月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
230
Fabric MCPの紹介と使い分け
Avatar for Ryoma Nagata ryomaru0825
1
110
「誰一人取り残されない」 AIエージェント時代のプロダクト設計思想 Product Management Summit 2026
Avatar for mizushimac mizushimac
1
2.4k

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
900
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
170
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
330
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.7k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.8k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
320
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
320
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
340
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k

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