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
640
おさらいVue Composition API
texdeath
0
460
React使いがVueと仲良くなるためにやったこと
texdeath
0
290
Optional Chainingについて
texdeath
3
180
副業として個人事業主をやる場合の メリット・デメリット
texdeath
0
110
Container Componentは必要なのか
texdeath
4
640
Kotlin/JSでReactアプリを作ってみた
texdeath
1
920
Other Decks in Programming
See All in Programming
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.8k
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
190
新しいモバイルアプリ勉強会(仮)について
uetyo
1
260
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
kiroでゲームを作ってみた
iriikeita
0
180
AIエージェント開発、DevOps and LLMOps
ymd65536
1
300
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
570
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
550
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
170
Go製CLIツールをnpmで配布するには
syumai
2
1.2k
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
880
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Documentation Writing (for coders)
carmenintech
73
5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GitHub's CSS Performance
jonrohan
1031
460k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Writing Fast Ruby
sferik
628
62k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Bash Introduction
62gerente
614
210k
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.