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
330
クライアントワークと管理画面の話
texdeath
0
220
次世代ヘッドレス開発室が提供するヘッドレス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
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
210
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
510
TypeScriptでDXを上げろ! Hono編
yusukebe
4
900
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
720
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1k
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.3k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
240
Reactの歴史を振り返る
tutinoko
1
150
QA x AIエコシステム段階構築作戦
osu
0
220
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
730
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
210
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Mobile First: as difficult as doing things right
swwweet
223
9.8k
How STYLIGHT went responsive
nonsquared
100
5.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Embracing the Ebb and Flow
colly
86
4.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How to train your dragon (web standard)
notwaldorf
96
6.1k
Bash Introduction
62gerente
613
210k
Producing Creativity
orderedlist
PRO
346
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
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.