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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for LINE Developers Taiwan LINE Developers Taiwan PRO
June 19, 2024
Technology
0
2.1k

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

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

Avatar for LINE Developers Taiwan

LINE Developers Taiwan PRO

June 19, 2024
Tweet

More Decks by LINE Developers Taiwan

See All by LINE Developers Taiwan
Gemini 2025 新功能回顧 LINE Bot 完美結合
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
280
NTUAI企業參訪
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
4.7k
Data TECH FRESH企業參訪- Amber
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
9.1k
Data Team 實習分享
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
8.5k
Backend Intern之旅
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
13k
清大企業參訪- Ben
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
2.4k
LLM 商品規格萃取大冒險- Vila
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.8k
Playwright/MCP/AI -Winter
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.8k
LINE EC Product Catalog Development- Rei
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.8k

Other Decks in Technology

See All in Technology
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
Avatar for 高棹大樹 daitak
1
380
Cosmos World Foundation Model Platform for Physical AI
Avatar for Takuya MINAGAWA takmin
0
970
AI駆動開発を事業のコアに置く
Avatar for 鬼澤輔 tasukuonizawa
1
360
私たち準委任PdEは2つのプロダクトに挑戦する ～ソフトウェア、開発支援という”二重”のプロダクトエンジニアリングの実践～ / 20260212 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
200
OpenShiftでllm-dを動かそう！
Avatar for jpishikawa jpishikawa
0
140
コンテナセキュリティの最新事情 ~ 2026年版 ~
Avatar for Kyohei Mizumoto kyohmizu
6
1.6k
~Everything as Codeを諦めない~ 後からCDK
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
3
500
予期せぬコストの急増を障害のように扱う――「コスト版ポストモーテム」の導入とその後の改善
Avatar for Masahiro Yoshizawa muziyoshiz
1
2k
Red Hat OpenStack Services on OpenShift
Avatar for Tatsuya Amemiya tamemiya
0
130
1,000 にも届く AWS Organizations 組織のポリシー運用をちゃんとしたい、という話
Avatar for kazzpapa3 kazzpapa3
0
160
OWASP Top 10:2025 リリースと 少しの日本語化にまつわる裏話
Avatar for Riotaro OKADA okdt
PRO
3
840
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
Avatar for adachi.ryo rvirus0817
0
350

Featured

See All Featured
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
130
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
190
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
8k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
170
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
500
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
220

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