Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
中期プロジェクトで e2eテストを導入してみて感じたこと
Search
texdeath
February 05, 2020
Programming
2
7.8k
中期プロジェクトで e2eテストを導入してみて感じたこと
e2eテストを自動化するために、puppeteerを導入してみて感じたことをまとめました。
texdeath
February 05, 2020
Tweet
Share
More Decks by texdeath
See All by texdeath
コードメトリクス計測による課題可視化と品質確保 / Visualize issues and ensure quality by measuring code metrics
texdeath
0
340
クライアントワークと管理画面の話
texdeath
0
230
次世代ヘッドレス開発室が提供するヘッドレスEC
texdeath
0
650
おさらいVue Composition API
texdeath
0
460
React使いがVueと仲良くなるためにやったこと
texdeath
0
290
Optional Chainingについて
texdeath
3
190
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
110
Container Componentは必要なのか
texdeath
4
640
Kotlin/JSでReactアプリを作ってみた
texdeath
1
930
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
Model Pollution
hschwentner
1
180
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
400
CSC305 Lecture 02
javiergs
PRO
1
260
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
480
Serena MCPのすすめ
wadakatu
4
900
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
プログラマのための作曲入門
cheebow
0
540
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
930
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The World Runs on Bad Software
bkeepers
PRO
71
11k
RailsConf 2023
tenderlove
30
1.2k
Become a Pro
speakerdeck
PRO
29
5.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
How GitHub (no longer) Works
holman
315
140k
Being A Developer After 40
akosma
91
590k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Visualization
eitanlees
148
16k
A designer walks into a library…
pauljervisheath
209
24k
Transcript
தظϓϩδΣΫτͰ e2eςετΛಋೖͯ͠Έͯײͨ͜͡ͱ גࣜձࣾICS ా উॣ 20202݄5
ࣗݾհ ా উॣ (Γͨ ·͞ͱ͠) @texdeath લ৬: Ϡϑʔגࣜձࣾ → ݱ৬:
גࣜձࣾICS ϑϩϯτΤϯυΤϯδχΞ ීஈReact / Vue / Node.js ͋ͨΓΛॻ͍͍ͯ·͢
Agenda • ಋೖ·ͰͷܦҢ • ಋೖʹ͋ͨͬͯؾΛ͚͍ͭͯΔ͜ͱ / ײͨ͜͡ͱ • ࠓۤ࿑͍ͯ͠Δ͜ͱ •
ࠓޙ͍͖͍ͬͯͨ͜ͱ / Δ͔Θ͔Βͳ͍͜ͱ
ࠓճ͓͢Δ͜ͱ • E2EςετΛࣗಈԽ͢Δʹ͋ͨͬͯɺݱϨϕϧͰײ͍ͯ͡Δ͜ͱ • ࣮ࡍʹಋೖ͢ΔͨΊʹͲΜͳ͜ͱΛؾΛ͚͍ͭͯΔ͔
• ۩ମతͳςετίʔυͷॻ͖ํ • Ҋ݅ͷ͓ʢडୗҊ݅ͷͨΊʣ ࠓճ͓͠ͳ͍͜ͱ
ಋೖ·ͰͷܦҢ • SPA։ൃʢReactʣͷडୗҊ݅ • ݁߹ࢼݧ͕ऴ൫ʹֻ͔ࠩ͠ΓɺҰ࿈ͷૢ࡞γφϦΦΛݕ ূ͠ऴ͑ͨ • ϑϩϯτΤϯυଆͷϢχοτςετྃ • ։ൃམͪண͖ɺE2EςετࣗಈԽͷຊ֨ಋೖʹΓग़͢
• ݮ • ্࣭ • ςετͷϕετϓϥΫςΟεࡧ తɾϞνϕʔγϣϯ
• ݮ • ਓྗͰݫ͍͠έʔεͷݕূΛࣗಈԽ͍ͨ͠ • ͯ͢ΛE2EςετͰ୲อ͢Δͷίετ͕͔͔Γ͗͢Δ ͷͰɺͻͱ·ͣඞཁͳγφϦΦ͚ͩΛࣗಈԽ͢Δ • ্࣭ •
ςετͷϕετϓϥΫςΟεࡧ తɾϞνϕʔγϣϯ
• ݮ • ্࣭ • ୳ࡧతͳςετʹϦιʔεΛճͤΔΑ͏ʹ͍ͨ͠ • γεςϜՔಈதͰҰఆͷ࣭Λ୲อͰ͖ΔΑ͏ʹ͍ͨ͠ • ςετͷϕετϓϥΫςΟεࡧ
తɾϞνϕʔγϣϯ
• ݮ • ্࣭ • ςετͷϕετϓϥΫςΟεࡧ • ϑϩϯτΤϯυςετࣗಈԽͷϕετϓϥΫςΟεΛ୳ͬͯɺ ผҊ݅Ͱ׆͔͍ͨ͠ తɾϞνϕʔγϣϯ
TypeScript React Jest / Enzyme / puppeteer / jest-puppeteer ςετڥ
View Lang Testing
TypeScript React Jest / Enzyme / puppeteer / jest-puppeteer ςετڥ
View Lang Testing
Puppeteer DevTools ProtocolΛհͯ͠ ϔουϨε ChromeΛ੍ޚ͢ΔͨΊͷNodeϥΠϒϥϦ
• E2EςετͷࣗಈԽʹൺॏΛஔ͖͗͢ͳ͍Α͏ʹ͢Δ • ΑΓΫϦςΟΧϧͳ෦͚ͩࣗಈԽ͢Δ • ςετϐϥϛουΛҙࣝͨ͠ઃܭΛߦ͏ ಋೖʹ͋ͨͬͯؾΛ͚͍ͭͯΔ͜ͱ
ςετϐϥϛου UI Integration Unit Testing
• UIςετΑΓϢχοτςετΛ༏ઌ͢Δ • ϐϥϛουͷԼͰߦ͍ͬͯΔςετͰेѻ͑Δͷ Ͱ͋ΕɺͦͪΒͰ୲อ͢Δ • ҟͳΔͰશ͘ಉ͡ςετΛॻ͔ͳ͍Α͏ʹҙ͢Δ ಋೖʹ͋ͨͬͯؾΛ͚͍ͭͯΔ͜ͱ
։ൃͷͨΊͷͷ ϑΟʔυόοΫ͕ૣ͍ ԼҐϨϕϧ ࣮ߦ͕ૣ͍ ؤ݈ ݁Ռ͕Ұҙʹܾ·Δ ։ൃऀࢹͷςετ ϢχοτςετͱE2Eςετͷҧ͍ ग़య: O’Reilly
ॳΊͯͷࣗಈςετ ――WebγεςϜͷͨΊͷࣗಈςετجૅ ݕূͷͨΊͷͷ ϑΟʔυόοΫ͕͍ ্ҐϨϕϧ ࣮ߦ͕͍ յΕ͍͢ ݁Ռ͕Ұҙʹܾ·Βͳ͍ ސ٬ࢹͷςετ Ϣχοτςετ E2Eςετ
• ٯϐϥϛου / ΞΠεΫϦʔϜίʔϯܕͷϐϥϛουʹͳΒ ͳ͍Α͏ʹ͢Δ • E2Eςετݶఆతʹ༻͢Δ • ҆ͱͯ͠ɺ Ϣχοτςετ7ׂ
/ ݁߹ςετ2ׂ / E2Eςετ1ׂ ಋೖʹ͋ͨͬͯؾΛ͚͍ͭͯΔ͜ͱ ग़య: Google Testing Blog https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html
• ΠϯϓοτϑΥʔϜͷՃɾআɾฤू • ࠷খɾ࠷େέʔεͰͷਖ਼ৗૹड৴ • γφϦΦͷલఏ͕݅͋Δέʔε • ෳ߲ૢ࡞ʹΑͬͯཁૉ͕มΘΔͳͲ • ϑΥʔϜͷόϦσʔγϣϯൃՐޙͷಈ࡞֬ೝ
• ૹड৴σʔλͷରশੑ֬ೝ ࣗಈԽ͍ͨ͠؍
• ಋೖ·ͰͳΒ؆୯ • ࣗಈԽ͚ͨͩ͠ͰϞνϕʔγϣϯ্͕ͬͨ • ਖ਼͘͠ॻ͍͍ͯΕɺϢχοτςετͩͱؾ͚ͮͳ͍ෆ ۩߹र͑Δʢͣʣ ಋೖͯ͠Έͯײͨ͜͡ͱ
• E2EςετίʔυͷநԽ͕େม • ݱঢ়ͷίʔυͰηϨΫλ͕΄ͱΜͲclassଐੑ͔͍ͭ͠ ͍ͯͳ͍ • ॳ͔ΒE2Eςετಋೖͷ͋ͬͨͷͰɺίϯϙʔω ϯτ࡞ͷ࣌ͰdataଐੑΛ༩͢ΔͳͲɺରԠΛਐΊ ͍ͯΕΑ͔ͬͨ… ۤ࿑͍ͯ͠Δ͜ͱ
• E2Eςετ݁Ռग़ྗͷ • ςετࣦഊ࣌ɾ࣮ߦʹ͕͔͔͍࣌ؒͬͯΔՕॴͳͲͷՄࢹ Խ • E2Eςετͱؔͳ͍͕ɺVRTʢVisual Regression Testʣͷಋೖݕ౼͍ͨ͠ ࠓޙ͍͖͍ͬͯͨ͜ͱ
• ΫϩεϒϥβͷରԠɺϒϥβؒͰͷVRTͳͲ • IEͳͲଞϒϥβʹରԠ͢ΔͨΊʹSelenium WebDriverݕ౼͢Δඞཁ͕͋Δ • ϥούʔͱͯ͠CodeceptJSྑͦ͞͏ͱײ͍ͯ͡Δ͕ɺ ͦͦE2EςετΫϩεϒϥβରԠͷҋ͕ਂͦ͏ ࠓޙΔ͔Θ͔Βͳ͍͜ͱ
CodeceptJS puppeteerSelenium WebDriverͳͲɺ ֤υϥΠόʔΛඞཁʹԠͯ͡બͰ͖ΔϥούʔϥΠϒϥϦ https://codecept.io/
࠷ޙʹ • ϢχοτςετͰͲΕ͚࣭ͩΛ֬อͰ͖͍ͯΔ͔͕େ ࣄ • E2EςετࣗಈԽʹݻࣥ͗ͣ͢͠ɺϓϩμΫτʹ࠷߹ͬ ͨܗͰಋೖ͢Δ • ΫϩεϒϥβରԠ·ͰΔͱ֮ޛ͕ඞཁͦ͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Copyright 2020 ICS INC. All rights reserved.