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
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.3k
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.5k
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
330
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
Le côté obscur des IA génératives
pascallemerrer
0
120
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
940
CSC305 Lecture 02
javiergs
PRO
1
260
dynamic!
moro
9
6.6k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Fireside Chat
paigeccino
40
3.7k
Site-Speed That Sticks
csswizardry
11
880
Typedesign – Prime Four
hannesfritz
42
2.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Designing for Performance
lara
610
69k
Building Adaptive Systems
keathley
43
2.8k
It's Worth the Effort
3n
187
28k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
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.