Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for LINE Developers Taiwan LINE Developers Taiwan PRO
June 19, 2024
Technology
2.5k
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 2026-09-12 國立臺中科技大學 x LINE PROTOSTAR 創新創業競賽- LINE 技術應用說明
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
250
Evan 2026-09-12 國立臺中科技大學 x LINE PROTOSTAR 創新創業競賽- LINE API應用介紹
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
240
Zona Codex Community Meetup 分享
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.3k
Evan & Zona COSCUP 2026 分享
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
290
台大資管營企業參訪-Bowen Chen
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
100
2026TECHFRESH畢業分享會 - AI 時代的人生存檔點
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3.2k
2026TECHFRESH畢業分享會 - 原生還是跨平台? App 開發踩坑實錄
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3.2k
2026TECHFRESH畢業分享會 - 葬送的通靈師：化系統與用戶雜訊成行動訊號
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3.1k
2026 TECHFRESH 畢業分享會 - AI-Native 重塑軟體工程與虛擬講師
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3.2k

Other Decks in Technology

See All in Technology
Genieを崇めよ
Avatar for camay kameitomohiro
0
170
事業課題から技術的負債に向き合う
Avatar for SansanTech sansantech
PRO
2
2.4k
GitHub Agentic Workflows を触ってみる
Avatar for tkym htkym
2
610
【ゲームメーカーズスクランブル2026】『Shadowverse: Worlds Beyond』UIとアニメーションで実現する最高のユーザー体験を叶えるプロトタイピング
Avatar for Cygames, Inc. cygames
PRO
1
490
Amazon Bedrock Agents ClassicからAmazon Bedrock AgentCoreへ移行した際、ガードレール設定が2箇所に割れた話
Avatar for Kohei Matsunobu matsunobu
0
110
Mastering Agentic Development: Harness Engineering for Effective Coding Agents
Avatar for Kyosuke Konishi konippi
3
560
C#未経験の僕がAIに読めるコードを書かせるまで
Avatar for マグロ隊長kinTV maguroalternative
0
300
地方移住と都心キャリアの両立は「金・時間・人」のリソースをフル活用すれば実現できる！〜Snowflake女子会 vol.8
Avatar for SnowflakeLadiesGroup snowwmn0824
0
120
3人で1000GPU超を統合運用する？マルチクラウド＆オンプレを跨ぐ、構築と運用のリアル！
Avatar for kazuki odo kazukun0716
1
170
SREへの勘違いに気づいた後の話
Avatar for yuden tomodakengo
0
160
AI感のないAWS構成図をAIエージェントに描かせたい！
Avatar for さご sagochiko
1
380
Antigravity SDK for the Java Developer
Avatar for Guillaume Laforge glaforge
0
210

Featured

See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
290
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
600
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
410
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
610
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k

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