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
LLM時代にデータエンジニアの役割はどう変わるか？
Avatar for Ikki Miyazaki ikkimiyazaki
6
1.3k
能登半島地震で見えた災害対応の課題と組織変革の重要性
Avatar for Masakatsu Sugii ditccsugii
0
670
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
Avatar for Makky12 smt7174
2
130
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
620
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
Avatar for Kenichi Kambara korodroid
2
480
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
Avatar for Ken'ichirou Kimura kenichirokimura
3
300
[Keynote] What do you need to know about DevEx in 2025
Avatar for Salaboy salaboy
0
170
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
Avatar for Sansan R&D sansan_randd
0
130
OCI Network Firewall 概要
Avatar for oracle4engineer oracle4engineer
PRO
2
7.9k
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
600
ACA でMAGI システムを社内で展開しようとした話
Avatar for Yuji Masaoka | まっぴぃ mappie_kochi
1
320
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
Avatar for TAKAKING22 takaking22
8
4.2k

Featured

See All Featured
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.3k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.8k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
870
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5.1k

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