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

E5ab6eb9fc8de68bf1610c7ad0c86155?s=47 texdeath
February 05, 2020

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

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

E5ab6eb9fc8de68bf1610c7ad0c86155?s=128

texdeath

February 05, 2020
Tweet

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.