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

by texdeath

Embed

Start on current slide

Slide 1

Slide 1 text

தظϓϩδΣΫτͰ e2eςετΛಋೖͯ͠Έͯײͨ͜͡ͱ גࣜձࣾICS ৿ా উॣ 2020೥2݄5೔

Slide 2

Slide 2 text

ࣗݾ঺հ ৿ా উॣ (΋Γͨ ·͞ͱ͠) @texdeath લ৬: Ϡϑʔגࣜձࣾ → ݱ৬: גࣜձࣾICS ϑϩϯτΤϯυΤϯδχΞ ීஈ͸React / Vue / Node.js ͋ͨΓΛॻ͍͍ͯ·͢

Slide 3

Slide 3 text

Agenda • ಋೖ·ͰͷܦҢ • ಋೖʹ͋ͨͬͯؾΛ͚͍ͭͯΔ͜ͱ / ײͨ͜͡ͱ • ࠓۤ࿑͍ͯ͠Δ͜ͱ • ࠓޙ΍͍͖͍ͬͯͨ͜ͱ / ΍Δ͔Θ͔Βͳ͍͜ͱ

Slide 4

Slide 4 text

ࠓճ͓࿩͢Δ͜ͱ • E2EςετΛࣗಈԽ͢Δʹ͋ͨͬͯɺݱ৔ϨϕϧͰײ͍ͯ͡Δ͜ͱ • ࣮ࡍʹಋೖ͢ΔͨΊʹͲΜͳ͜ͱΛؾΛ͚͍ͭͯΔ͔

Slide 5

Slide 5 text

• ۩ମతͳςετίʔυͷॻ͖ํ • Ҋ݅ͷ͓࿩ʢडୗҊ݅ͷͨΊʣ ࠓճ͓࿩͠ͳ͍͜ͱ

Slide 6

Slide 6 text

ಋೖ·ͰͷܦҢ • SPA։ൃʢReactʣͷडୗҊ݅ • ݁߹ࢼݧ͕ऴ൫ʹֻ͔ࠩ͠ΓɺҰ࿈ͷૢ࡞γφϦΦΛݕ ূ͠ऴ͑ͨ • ϑϩϯτΤϯυଆͷϢχοτςετ͸׬ྃ • ։ൃ΋མͪண͖ɺE2EςετࣗಈԽͷຊ֨ಋೖʹ৐Γग़͢

Slide 7

Slide 7 text

• ޻਺࡟ݮ • ඼࣭޲্ • ςετͷϕετϓϥΫςΟε໛ࡧ ໨తɾϞνϕʔγϣϯ

Slide 8

Slide 8 text

• ޻਺࡟ݮ • ਓྗͰ͸ݫ͍͠έʔεͷݕূΛࣗಈԽ͍ͨ͠ • ͢΂ͯΛE2EςετͰ୲อ͢Δͷ͸ίετ͕͔͔Γ͗͢Δ ͷͰɺͻͱ·ͣඞཁͳγφϦΦ͚ͩΛࣗಈԽ͢Δ • ඼࣭޲্ • ςετͷϕετϓϥΫςΟε໛ࡧ ໨తɾϞνϕʔγϣϯ

Slide 9

Slide 9 text

• ޻਺࡟ݮ • ඼࣭޲্ • ୳ࡧతͳςετʹϦιʔεΛճͤΔΑ͏ʹ͍ͨ͠ • γεςϜՔಈதͰ΋Ұఆͷ඼࣭Λ୲อͰ͖ΔΑ͏ʹ͍ͨ͠ • ςετͷϕετϓϥΫςΟε໛ࡧ ໨తɾϞνϕʔγϣϯ

Slide 10

Slide 10 text

• ޻਺࡟ݮ • ඼࣭޲্ • ςετͷϕετϓϥΫςΟε໛ࡧ • ϑϩϯτΤϯυςετࣗಈԽͷϕετϓϥΫςΟεΛ୳ͬͯɺ ผҊ݅Ͱ΋׆͔͍ͨ͠ ໨తɾϞνϕʔγϣϯ

Slide 11

Slide 11 text

TypeScript React Jest / Enzyme / puppeteer / jest-puppeteer ςετ؀ڥ View Lang Testing

Slide 12

Slide 12 text

TypeScript React Jest / Enzyme / puppeteer / jest-puppeteer ςετ؀ڥ View Lang Testing

Slide 13

Slide 13 text

Puppeteer DevTools ProtocolΛհͯ͠ ϔουϨε ChromeΛ੍ޚ͢ΔͨΊͷNodeϥΠϒϥϦ

Slide 14

Slide 14 text

• E2EςετͷࣗಈԽʹൺॏΛஔ͖͗͢ͳ͍Α͏ʹ͢Δ • ΑΓΫϦςΟΧϧͳ෦෼͚ͩࣗಈԽ͢Δ • ςετϐϥϛουΛҙࣝͨ͠ઃܭΛߦ͏ ಋೖʹ͋ͨͬͯؾΛ͚͍ͭͯΔ͜ͱ

Slide 15

Slide 15 text

ςετϐϥϛου UI Integration Unit Testing

Slide 16

Slide 16 text

• UIςετΑΓ΋ϢχοτςετΛ༏ઌ͢Δ • ϐϥϛουͷԼ૚Ͱߦ͍ͬͯΔςετͰे෼ѻ͑Δ΋ͷ Ͱ͋Ε͹ɺͦͪΒͰ୲อ͢Δ • ҟͳΔ૚Ͱશ͘ಉ͡ςετΛॻ͔ͳ͍Α͏ʹ஫ҙ͢Δ ಋೖʹ͋ͨͬͯؾΛ͚͍ͭͯΔ͜ͱ

Slide 17

Slide 17 text

։ൃͷͨΊͷ΋ͷ ϑΟʔυόοΫ͕ૣ͍ ԼҐϨϕϧ ࣮ߦ͕ૣ͍ ؤ݈ ݁Ռ͕Ұҙʹܾ·Δ ։ൃऀࢹ఺ͷςετ ϢχοτςετͱE2Eςετͷҧ͍ ग़య: O’Reilly ॳΊͯͷࣗಈςετ ――WebγεςϜͷͨΊͷࣗಈςετجૅ ݕূͷͨΊͷ΋ͷ ϑΟʔυόοΫ͕஗͍ ্ҐϨϕϧ ࣮ߦ͕஗͍ յΕ΍͍͢ ݁Ռ͕Ұҙʹܾ·Βͳ͍ ސ٬ࢹ఺ͷςετ Ϣχοτςετ E2Eςετ

Slide 18

Slide 18 text

• ٯϐϥϛου / ΞΠεΫϦʔϜίʔϯܕͷϐϥϛουʹͳΒ ͳ͍Α͏ʹ͢Δ • E2Eςετ͸ݶఆతʹ࢖༻͢Δ • ໨҆ͱͯ͠͸ɺ Ϣχοτςετ7ׂ / ݁߹ςετ2ׂ / E2Eςετ1ׂ ಋೖʹ͋ͨͬͯؾΛ͚͍ͭͯΔ͜ͱ ग़య: Google Testing Blog https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html

Slide 19

Slide 19 text

• ΠϯϓοτϑΥʔϜͷ௥Ճɾ࡟আɾฤू • ࠷খɾ࠷େέʔεͰͷਖ਼ৗૹड৴ • γφϦΦͷલఏ৚͕݅͋Δέʔε • ෳ਺߲໨ૢ࡞ʹΑͬͯཁૉ͕มΘΔͳͲ • ϑΥʔϜͷόϦσʔγϣϯൃՐޙͷಈ࡞֬ೝ • ૹड৴σʔλͷରশੑ֬ೝ ࣗಈԽ͍ͨ͠؍఺

Slide 20

Slide 20 text

• ಋೖ·ͰͳΒ؆୯ • ࣗಈԽ͚ͨͩ͠ͰϞνϕʔγϣϯ͸্͕ͬͨ • ਖ਼͘͠ॻ͍͍ͯΕ͹ɺϢχοτςετͩͱؾ͚ͮͳ͍ෆ ۩߹΋र͑Δʢ͸ͣʣ ಋೖͯ͠Έͯײͨ͜͡ͱ

Slide 21

Slide 21 text

• E2Eςετίʔυͷந৅Խ͕େม • ݱঢ়ͷίʔυͰ͸ηϨΫλ͕΄ͱΜͲclassଐੑ͔͍ͭ͠ ͍ͯͳ͍ • ౰ॳ͔ΒE2Eςετಋೖͷ࿩͸͋ͬͨͷͰɺίϯϙʔω ϯτ࡞੒ͷ࣌఺ͰdataଐੑΛ෇༩͢ΔͳͲɺରԠΛਐΊ ͍ͯΕ͹Α͔ͬͨ… ۤ࿑͍ͯ͠Δ͜ͱ

Slide 22

Slide 22 text

• E2Eςετ݁Ռग़ྗͷ޻෉ • ςετࣦഊ࣌ɾ࣮ߦʹ͕͔͔͍࣌ؒͬͯΔՕॴͳͲͷՄࢹ Խ • E2Eςετͱ͸௚઀ؔ܎ͳ͍͕ɺVRTʢVisual Regression Testʣͷಋೖ΋ݕ౼͍ͨ͠ ࠓޙ΍͍͖͍ͬͯͨ͜ͱ

Slide 23

Slide 23 text

• Ϋϩεϒϥ΢βͷରԠɺϒϥ΢βؒͰͷVRTͳͲ • IEͳͲଞϒϥ΢βʹରԠ͢ΔͨΊʹ͸Selenium WebDriver΋ݕ౼͢Δඞཁ͕͋Δ • ϥούʔͱͯ͠CodeceptJS΋ྑͦ͞͏ͱײ͍ͯ͡Δ͕ɺ ͦ΋ͦ΋E2EςετΫϩεϒϥ΢βରԠͷҋ͕ਂͦ͏ ࠓޙ΍Δ͔Θ͔Βͳ͍͜ͱ

Slide 24

Slide 24 text

CodeceptJS puppeteer΍Selenium WebDriverͳͲɺ ֤υϥΠόʔΛඞཁʹԠͯ͡౎౓બ୒Ͱ͖ΔϥούʔϥΠϒϥϦ https://codecept.io/

Slide 25

Slide 25 text

࠷ޙʹ • ϢχοτςετͰͲΕ͚ͩ඼࣭Λ֬อͰ͖͍ͯΔ͔͕େ ࣄ • E2EςετࣗಈԽʹݻࣥ͗ͣ͢͠ɺϓϩμΫτʹ࠷΋߹ͬ ͨܗͰಋೖ͢Δ • Ϋϩεϒϥ΢βରԠ·Ͱ΍Δͱ֮ޛ͕ඞཁͦ͏