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

Transcript

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.