中期プロジェクトで e2eテストを導入してみて感じたこと

e2eテストを自動化するために、puppeteerを導入してみて感じたことをまとめました。

1. தظϓϩδΣΫτͰ e2eςετΛಋೖͯ͠Έͯײͨ͜͡ͱ גࣜձࣾICS ৿ా উॣ 2020೥2݄5೔
2. ࣗݾ঺հ ৿ా উॣ (΋Γͨ ·͞ͱ͠) @texdeath લ৬: Ϡϑʔגࣜձࣾ → ݱ৬: גࣜձࣾICS ϑϩϯτΤϯυΤϯδχΞ ීஈ͸React / Vue / Node.js ͋ͨΓΛॻ͍͍ͯ·͢
3. Agenda • ಋೖ·ͰͷܦҢ • ಋೖʹ͋ͨͬͯؾΛ͚͍ͭͯΔ͜ͱ / ײͨ͜͡ͱ • ࠓۤ࿑͍ͯ͠Δ͜ͱ • ࠓޙ΍͍͖͍ͬͯͨ͜ͱ / ΍Δ͔Θ͔Βͳ͍͜ͱ
4. ࠓճ͓࿩͢Δ͜ͱ • E2EςετΛࣗಈԽ͢Δʹ͋ͨͬͯɺݱ৔ϨϕϧͰײ͍ͯ͡Δ͜ͱ • ࣮ࡍʹಋೖ͢ΔͨΊʹͲΜͳ͜ͱΛؾΛ͚͍ͭͯΔ͔
5. • ۩ମతͳςετίʔυͷॻ͖ํ • Ҋ݅ͷ͓࿩ʢडୗҊ݅ͷͨΊʣ ࠓճ͓࿩͠ͳ͍͜ͱ
6. ಋೖ·ͰͷܦҢ • SPA։ൃʢReactʣͷडୗҊ݅ • ݁߹ࢼݧ͕ऴ൫ʹֻ͔ࠩ͠ΓɺҰ࿈ͷૢ࡞γφϦΦΛݕ ূ͠ऴ͑ͨ • ϑϩϯτΤϯυଆͷϢχοτςετ͸׬ྃ • ։ൃ΋མͪண͖ɺE2EςετࣗಈԽͷຊ֨ಋೖʹ৐Γग़͢
7. • ޻਺࡟ݮ • ඼࣭޲্ • ςετͷϕετϓϥΫςΟε໛ࡧ ໨తɾϞνϕʔγϣϯ
8. • ޻਺࡟ݮ • ਓྗͰ͸ݫ͍͠έʔεͷݕূΛࣗಈԽ͍ͨ͠ • ͢΂ͯΛE2EςετͰ୲อ͢Δͷ͸ίετ͕͔͔Γ͗͢Δ ͷͰɺͻͱ·ͣඞཁͳγφϦΦ͚ͩΛࣗಈԽ͢Δ • ඼࣭޲্ • ςετͷϕετϓϥΫςΟε໛ࡧ ໨తɾϞνϕʔγϣϯ
9. • ޻਺࡟ݮ • ඼࣭޲্ • ୳ࡧతͳςετʹϦιʔεΛճͤΔΑ͏ʹ͍ͨ͠ • γεςϜՔಈதͰ΋Ұఆͷ඼࣭Λ୲อͰ͖ΔΑ͏ʹ͍ͨ͠ • ςετͷϕετϓϥΫςΟε໛ࡧ ໨తɾϞνϕʔγϣϯ
10. • ޻਺࡟ݮ • ඼࣭޲্ • ςετͷϕετϓϥΫςΟε໛ࡧ • ϑϩϯτΤϯυςετࣗಈԽͷϕετϓϥΫςΟεΛ୳ͬͯɺ ผҊ݅Ͱ΋׆͔͍ͨ͠ ໨తɾϞνϕʔγϣϯ
11. TypeScript React Jest / Enzyme / puppeteer / jest-puppeteer ςετ؀ڥ View Lang Testing
12. TypeScript React Jest / Enzyme / puppeteer / jest-puppeteer ςετ؀ڥ View Lang Testing
13. Puppeteer DevTools ProtocolΛհͯ͠ ϔουϨε ChromeΛ੍ޚ͢ΔͨΊͷNodeϥΠϒϥϦ
14. • E2EςετͷࣗಈԽʹൺॏΛஔ͖͗͢ͳ͍Α͏ʹ͢Δ • ΑΓΫϦςΟΧϧͳ෦෼͚ͩࣗಈԽ͢Δ • ςετϐϥϛουΛҙࣝͨ͠ઃܭΛߦ͏ ಋೖʹ͋ͨͬͯؾΛ͚͍ͭͯΔ͜ͱ
15. ςετϐϥϛου UI Integration Unit Testing
16. • UIςετΑΓ΋ϢχοτςετΛ༏ઌ͢Δ • ϐϥϛουͷԼ૚Ͱߦ͍ͬͯΔςετͰे෼ѻ͑Δ΋ͷ Ͱ͋Ε͹ɺͦͪΒͰ୲อ͢Δ • ҟͳΔ૚Ͱશ͘ಉ͡ςετΛॻ͔ͳ͍Α͏ʹ஫ҙ͢Δ ಋೖʹ͋ͨͬͯؾΛ͚͍ͭͯΔ͜ͱ
17. ։ൃͷͨΊͷ΋ͷ ϑΟʔυόοΫ͕ૣ͍ ԼҐϨϕϧ ࣮ߦ͕ૣ͍ ؤ݈ ݁Ռ͕Ұҙʹܾ·Δ ։ൃऀࢹ఺ͷςετ ϢχοτςετͱE2Eςετͷҧ͍ ग़య: O’Reilly ॳΊͯͷࣗಈςετ ――WebγεςϜͷͨΊͷࣗಈςετجૅ ݕূͷͨΊͷ΋ͷ ϑΟʔυόοΫ͕஗͍ ্ҐϨϕϧ ࣮ߦ͕஗͍ յΕ΍͍͢ ݁Ռ͕Ұҙʹܾ·Βͳ͍ ސ٬ࢹ఺ͷςετ Ϣχοτςετ E2Eςετ
18. • ٯϐϥϛου / ΞΠεΫϦʔϜίʔϯܕͷϐϥϛουʹͳΒ ͳ͍Α͏ʹ͢Δ • E2Eςετ͸ݶఆతʹ࢖༻͢Δ • ໨҆ͱͯ͠͸ɺ Ϣχοτςετ7ׂ / ݁߹ςετ2ׂ / E2Eςετ1ׂ ಋೖʹ͋ͨͬͯؾΛ͚͍ͭͯΔ͜ͱ ग़య: Google Testing Blog https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html
19. • ΠϯϓοτϑΥʔϜͷ௥Ճɾ࡟আɾฤू • ࠷খɾ࠷େέʔεͰͷਖ਼ৗૹड৴ • γφϦΦͷલఏ৚͕݅͋Δέʔε • ෳ਺߲໨ૢ࡞ʹΑͬͯཁૉ͕มΘΔͳͲ • ϑΥʔϜͷόϦσʔγϣϯൃՐޙͷಈ࡞֬ೝ • ૹड৴σʔλͷରশੑ֬ೝ ࣗಈԽ͍ͨ͠؍఺
20. • ಋೖ·ͰͳΒ؆୯ • ࣗಈԽ͚ͨͩ͠ͰϞνϕʔγϣϯ͸্͕ͬͨ • ਖ਼͘͠ॻ͍͍ͯΕ͹ɺϢχοτςετͩͱؾ͚ͮͳ͍ෆ ۩߹΋र͑Δʢ͸ͣʣ ಋೖͯ͠Έͯײͨ͜͡ͱ
21. • E2Eςετίʔυͷந৅Խ͕େม • ݱঢ়ͷίʔυͰ͸ηϨΫλ͕΄ͱΜͲclassଐੑ͔͍ͭ͠ ͍ͯͳ͍ • ౰ॳ͔ΒE2Eςετಋೖͷ࿩͸͋ͬͨͷͰɺίϯϙʔω ϯτ࡞੒ͷ࣌఺ͰdataଐੑΛ෇༩͢ΔͳͲɺରԠΛਐΊ ͍ͯΕ͹Α͔ͬͨ… ۤ࿑͍ͯ͠Δ͜ͱ
22. • E2Eςετ݁Ռग़ྗͷ޻෉ • ςετࣦഊ࣌ɾ࣮ߦʹ͕͔͔͍࣌ؒͬͯΔՕॴͳͲͷՄࢹ Խ • E2Eςετͱ͸௚઀ؔ܎ͳ͍͕ɺVRTʢVisual Regression Testʣͷಋೖ΋ݕ౼͍ͨ͠ ࠓޙ΍͍͖͍ͬͯͨ͜ͱ
23. • Ϋϩεϒϥ΢βͷରԠɺϒϥ΢βؒͰͷVRTͳͲ • IEͳͲଞϒϥ΢βʹରԠ͢ΔͨΊʹ͸Selenium WebDriver΋ݕ౼͢Δඞཁ͕͋Δ • ϥούʔͱͯ͠CodeceptJS΋ྑͦ͞͏ͱײ͍ͯ͡Δ͕ɺ ͦ΋ͦ΋E2EςετΫϩεϒϥ΢βରԠͷҋ͕ਂͦ͏ ࠓޙ΍Δ͔Θ͔Βͳ͍͜ͱ
24. CodeceptJS puppeteer΍Selenium WebDriverͳͲɺ ֤υϥΠόʔΛඞཁʹԠͯ͡౎౓બ୒Ͱ͖ΔϥούʔϥΠϒϥϦ https://codecept.io/
25. ࠷ޙʹ • ϢχοτςετͰͲΕ͚ͩ඼࣭Λ֬อͰ͖͍ͯΔ͔͕େ ࣄ • E2EςετࣗಈԽʹݻࣥ͗ͣ͢͠ɺϓϩμΫτʹ࠷΋߹ͬ ͨܗͰಋೖ͢Δ • Ϋϩεϒϥ΢βରԠ·Ͱ΍Δͱ֮ޛ͕ඞཁͦ͏
26. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Copyright 2020 ICS INC. All rights reserved.