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

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

Avatar for LINE Developers Taiwan LINE Developers Taiwan PRO
June 19, 2024
Technology
2.4k
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
Evan & Zona COSCUP 2026 分享
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
74
台大資管營企業參訪-Bowen Chen
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
63
2026TECHFRESH畢業分享會 - AI 時代的人生存檔點
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3k
2026TECHFRESH畢業分享會 - 原生還是跨平台? App 開發踩坑實錄
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3k
2026TECHFRESH畢業分享會 - 葬送的通靈師：化系統與用戶雜訊成行動訊號
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3k
2026 TECHFRESH 畢業分享會 - AI-Native 重塑軟體工程與虛擬講師
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3k
2026 TECHFRESH 畢業分享會 - 開發日常大解密！從領域驅動到企業級上線
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3k
2026TECHFRESH畢業分享會 - Lightning Talk - E起 See See : 電商推薦讀心術? 數據說了算
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3k
2026TECHFRESH畢業分享會 - Lightning Talk - 資料也要 CI/CD? 用 Airbyte 自動化資料同步
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
2.9k

Other Decks in Technology

See All in Technology
MIRU 2026 チュートリアル
Avatar for Keisuke Fujii keisuke198619
0
880
ブラウザ研修 2026
Avatar for Recruit recruitengineers
PRO
6
860
Forza Horizon 6 のテレメトリ機能で 自動運転に使えそうな学習データを集める話
Avatar for henjin0 henjin0
0
160
20分でわかるセキュアAPI
Avatar for nwiizo nwiizo
2
240
制約理論（ToC）入門　2026版
Avatar for Recruit recruitengineers
PRO
8
2.1k
『三匹の子ぶた』から学ぶネットワークセキュリティの昔と今 / Network Security: Then and Now Through the Lens of The Three Little Pigs
Avatar for NTT docomo Business nttcom
1
1.8k
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
3.2k
ラジオの科学
Avatar for Frieve-A frievea
0
290
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.9k
モダンフロントエンド 開発研修
Avatar for Recruit recruitengineers
PRO
4
590
【AG-UI × A2UI × MCP Apps】Generative UIをやさしく解説する
Avatar for NRI Netcom nrinetcom
PRO
1
110
攻撃と防御で学ぶAI時代のプロダクトセキュリティ演習
Avatar for Recruit recruitengineers
PRO
9
2.4k

Featured

See All Featured
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
380
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
170
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
200
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.5k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.5k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
440
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
270
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.3k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.2k

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