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
0
2k

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

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
LINE 與 AI 機器人技術應用現況 
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
4
QA Testing
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1
jcconf_datadev_prod
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
5
jcconf_SPM_prod
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3
jcconf_LINEPay_prod
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
4
Live Activities in LINE
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
13
Neumorphism x Liquid Glass
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
12
猜你喜歡 – 打造高度擴展的個人化電商推薦
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
33
打造新電商搜尋體驗- 搜尋意圖辨識
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
17

Other Decks in Technology

See All in Technology
データ戦略部門 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.7k
AI Agent Dojo #2 watsonx Orchestrateフローの作成
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
120
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
5
43k
AWS Control Tower に学ぶ！ IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
Avatar for Yuta Otani y___u
0
150
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
14k
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
Avatar for Kenichi Kambara korodroid
2
510
JAZUG 15周年記念 × JAT「AI Agent開発者必見："今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
Avatar for KoheiOgawa shisyu_gaku
1
160
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
620
エンタメとAIのための3Dパラレルワールド構築（GPU UNITE 2025 特別講演）
Avatar for Preferred Networks pfn
PRO
0
280
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
Avatar for Masataka Tsukamoto tsukaman
0
120
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
Avatar for Ken'ichirou Kimura kenichirokimura
3
300
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
Avatar for Kurochan kurochan
2
870

Featured

See All Featured
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
139
7.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
20
1.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.1k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
7.9k

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