Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
中期プロジェクトで e2eテストを導入してみて感じたこと
texdeath
February 05, 2020
Programming
2
5k
中期プロジェクトで e2eテストを導入してみて感じたこと
e2eテストを自動化するために、puppeteerを導入してみて感じたことをまとめました。
texdeath
February 05, 2020
Tweet
Share
More Decks by texdeath
See All by texdeath
texdeath
0
120
texdeath
0
160
texdeath
3
110
texdeath
0
26
texdeath
4
520
texdeath
1
500
Other Decks in Programming
See All in Programming
77web
2
2.2k
emberconf
0
130
deepu105
1
180
hr01
0
1.9k
kaz29
2
120
doyaaaaaken
1
290
dnskimo
8
1.5k
deepu105
0
230
kaonash
2
1.8k
rockname
1
310
kulkarniankita09
0
260
shun_oshidari
6
2.8k
Featured
See All Featured
mza
80
4.2k
carmenhchung
34
1.6k
notwaldorf
18
2.1k
sferik
612
55k
dougneiner
119
8k
morganepeng
94
14k
tammielis
237
23k
holman
447
140k
trishagee
24
3k
jeffersonlam
330
15k
myddelton
109
11k
skipperchong
8
780
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.