KARTE開発にマルチブラウザテストを導入・運用した話

Transcript

1. KARTE։ൃʹϚϧνϒϥ΢βςετΛ ಋೖɾӡ༻ͨ͠࿩
2. ࡫৿େ٢(@sdaikichi) ‘14ଔ(จܥ) 3೥໨ 2015/6 ΑΓPLAIDʹJOIN όοΫΤϯυɾϑϩϯτΤϯυͲͪΒ΋ɻ
 গ͠લ͸CXνʔϜͰηʔϧεΤϯδχΞͱͯ͠Ϣʔβʔαϙʔτ ਐḿɿτϨʔφʔϨϕϧ 24 ั·͑ͨ਺ 111ඖ ࠷ۙPokemon Go Plusಋೖ ೰Έɿຫੑతͳ΄͠ͷ͢ͳෆ଍ɻϛχϦϡ΢ͷ͋Ί͕͋ͭ·Βͳ͍ɻ͋ͱߴ CPͷϙέϞϯ͕ح੻తʹGETͰ͖ͨΧΠϦϡʔ͚ͩͳͷͰδϜઓ͕৺΋ͱͳ ͍ɻΧϏΰϯ΋ҰԠ࣋ͬͯΔ͚Ͳݸମ஋͕௿͍ΜͩΑͳɾɾɾ࠷ۙφογʔ
3. http://tech.plaid.co.jp/ PLAID ENGINEER BLOG 40௨ΓҎ্ͷࣗಈϚϧνϒϥ΢βςετΛSelenium x CircleCI x BrowserStackͰ࣮ݱ͢Δ http://tech.plaid.co.jp/multi-browesr-test/
4. ԿނϚϧνϒϥ΢βςετΛʁ
5. Α͘Θ͔ΔKARTEͷ͘͠Έ Tracking Analyze Delivery ݁ߏ଎͍ ઀٬Action
7. ɾ͓٬༷αΠτʹλάΛ
 ຒΊࠐΜͰ͍ͨͩ͘ɻ ɾCDNܦ༝ͰJSϑΝΠϧΛϩʔυɻ
 KARTEαʔόʹσʔλΛૹΔɻ
8. ɾ͓٬༷αΠτʹλάΛ
 ຒΊࠐΜͰ͍ͨͩ͘ɻ ɾCDNܦ༝ͰJSϑΝΠϧΛϩʔυɻ
 KARTEαʔόʹσʔλΛૹΔɻ ίϨ
9. ࣮ߦ؀ڥ=͓٬༷αΠτʹདྷ๚͞ΕΔํશһ
10. ࣮ߦ؀ڥ=͓٬༷αΠτʹདྷ๚͞ΕΔํશһ બ΂ͳ͍
11. IE8ʁ Androidඪ४ϒϥ΢βʁ Operaʁ
12. IE8ʁ Androidඪ४ϒϥ΢βʁ Operaʁ બ΂ͳ͍
 ʢ઀٬ର৅ʹ͢Δ͔Ͳ͏͔͸ผʣ
13. ࠷ۙۤ͠ΊΒΕͨͱ͜Ζ IE8ͷόά document͕XHTML͔Ͳ͏͔ͷ൑ఆ
 document.contentType (Safari, IEࢮ๢)
14. Ϛϧνϒϥ΢βςετɺ΍Βͳ͖Ό
15. BrowserStack https://www.browserstack.com/ Ϛϧνϒϥ΢βςετͷσϑΝΫτʁ Live, Automate, Screenshot…
16. BrowserStack Automate JS TestingʢϢχοτςετʣɺSelenium TestingʢE2Eςετʣ ʹରԠ ݱঢ়ͷςετίʔυΛม͑Δඞཁ͕͋·Γͳ͍ CircleCIͱ࿈ܞ(ͱݴ͏΄ͲେڼͰ΋ͳ͍)͢Δʹ͋ͨͬͯυ Ωϡϝϯτ͋Γ
17. ଟ࠼ͳରԠϒϥ΢βɾOS
18. ςετதͷࡱӨ ࣮ࡍͷಈը
19. ಋೖɾӡ༻ɾςετέʔε
20. Javascript Testing (Unit Test)
21. Unit Test BrowserStack Runner ͱ͍͏npmύοέʔδΛར༻ JSONϑΝΠϧʹTest FileɺTest Framework΍ςετ࣮ߦϒϥ΢βΛࢦఆ
 
 
 
 
 
 
 
 JSONϑΝΠϧΛ෼͚Ε͹ɺ༻్ͷҧ͏ςετΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δɻ
 KARTEͰ͸ɺ઀٬ର৅ϒϥ΢βͱ઀٬ର৅֎ϒϥ΢βͷςετΛ෼͚ͯߦ͍ͬͯΔɻ
22. Trackingର৅֎ϒϥ΢βͷςετ
23. Trackingର৅֎ϒϥ΢βͷςετ ର৅֎ϒϥ΢βͰ͸TrackॲཧΛߦ͏instance͸࡞ΒΕͳ͍ ͔ͳΓૣ͍ஈ֊Ͱreturn͞ΕΔ ʮͳΜͰ΋͍͍͔ΒΤϥʔ͕ى͖ͯͳ͍͔ʁʯ window.onerrorͷར༻
24. Selenium Testing (E2E Test)
25. E2E Test ઀٬ΞΫγϣϯͷ഑৴΍ͦͷΫϦοΫͳͲɺΤϯυϢʔβʔ ͷମݧ෦෼ʹؔΘΔςετ طଘͷςετίʔυ͕͋Δ৔߹ɺ webdriverΛ࡞Δ࣌ʹ BrowserStackͷαʔόΛ࢖͏Α͏ʹॻ͚ͩ͘ɻ
 

26. CI্Ͱͷૢ࡞ ʢCIͷʣϩʔΧϧʹKARTEͷmockαʔόͱళฮΛ໛ͨ͠αʔόΛ ཱͯͯɺళฮʹΞΫηεͯ͠઀٬ΞΫγϣϯͷ഑৴౳͕ߦΘΕΔ ͔Λςετ͢Δɻ BrowserStack͕LocalʹΞΫηεͰ͖ΔΑ͏ʹ͢Δඞཁ͕͋Δɻ BrowserStackLocal ͱ͍͏όΠφϦ͕഑෍͞Ε͍ͯΔͨΊɺςετ ࣌ʹ࣮ߦ͢Δɻ
 

27. ςετέʔε ઀٬ΞΫγϣϯ͕ਖ਼͘͠දࣔ͞Ε͍ͯΔ͔ʁ ݩʑͷϖʔδͷཁૉɾಈ࡞Λյ͍ͯ͠ͳ͍͔ʁ(IE8ͷ൓ল) XHTMLϖʔδ ϒϥ΢βͷconsoleʹΤϥʔ͕ग़͍ͯͳ͍͔Λ֬ೝ͢Δ ʢChrome DriverͷΈՄೳʣ
28. ϋϚͬͨͱ͜Ζ
29. ஗͍ʂ Selenium Test͸ͱʹ͔͕͔͔࣌ؒ͘Δ ίϯςφ͸ҰͭͰɺςετΛฒྻ࣮ͯ͠ߦ͠ɺଞͷCIΛअ ຐ͠ͳ͍Α͏޻෉ Ϧʔδϣϯͷ໰୊ʁ
30. ϞόΠϧ όϦΤʔγϣϯ͸ͪΐͬͱগͳΊ ΤϛϡϨʔλͰ࣮ߦ͞ΕΔͨΊɺͦͷىಈʹࣦഊͯ͠ςε τ͕མͪΔ͜ͱ͕͋Δɻͪ͜ΒͰ͸Ͳ͏͠Α͏΋ͳ͍ͨΊ CIrcleCI্ͰϦτϥΠ͢ΔshellΛॻ͍ͨΓͯ͠ରॲ ࣮ػςετ͕࠷࣮ۙ૷͞ΕͨΒ͍͕͠ɺ͜Ε΋ΤϛϡϨʔ λҎ্ʹىಈ͕ࣦഊͨ͠Γɺಈը͕ࡱΕͳ͍࢓༷ͩͬͨΓ ͯ͠ಋೖ͸ݟૹ͍ͬͯ·͢
31. CircleCIͷΩϡʔͱBrowserStackͷΩϡʔ webdriverͷquit()ΛߦΘͳ͍ͱɺBrowserStackʹΩϡʔ͸࢒ Γଓ͚Δ CircleCIͰςετ͕։࢝͠ɺ్தͰCIͷbuildΛΩϟϯηϧ͠ ͨΓͯ͠΋BrowserStackʹ͸Ωϡʔ͕࢒Δɻ BrowserStackͷܖ໿ϓϥϯʢޙड़ʣʹΑͬͯ͸ࢮ׆໰ ୊ɾɾɾ
32. http://tech.plaid.co.jp/ PLAID ENGINEER BLOG
33. ίετύϑΥʔϚϯε
34. ςετฒྻ਺ɾҰ೔ͷ্ݶ࣌ؒ਺Ͱܾ·Δ
35. ίετύϑΥʔϚϯε ϛογϣϯΫϦςΟΧϧͰͳ͚Ε͹ɺmaster(develop)ʹର͠ ͯͨ·ʹ૸ΒͤΔɺͳͲͷ࢖͍ํͰҰ൪খ͍͞ϓϥϯ͔Βॳ ΊΔͱ͍͍͔΋ ฐࣾ͸Rapid Plus(10ฒྻ/1ฒྻʹ͖ͭ4࣌ؒ)Ͱ͕͢ɺϦϙδτ Ϧ΁ͷPush͕ूத͢Δͱͨ·ʹ্ݶʹୡ͢Δ͜ͱ͕͋Γ· ͢ɻ
 ͜Ε͔Βςετέʔε૿͑ͨΓ͢Δ͜ͱΛߟ͑ΔͱϓϥϯҠ ߦ΋ݕ౼தͰ͢ɻ
36. ࠓޙ
37. ࠓޙ ςετέʔεͷॆ࣮ ςετ࣌ؒ୹ॖ ScreenshotػೳΛར༻ͯ͠ɺ֤ϒϥ΢βຖʹ઀٬ΞΫγϣϯ ͷεΫγϣΛࡱͬͯݟൺ΂Δʢςετ͔KARTEͷػೳʁʣ