ProxyServerを使った本番環境でのE2Eテスト

本番環境でjavascriptのE2Eテストを行った方法の説明です。

Transcript

1. Production E2E test
   with ProxyServer
   

   View Slide

2. せ⵸: @brn (ꫬꅿ⨳ⵃa.k.a ـٕ٦ظ)
   耵噟: ؿٗٝزؒٝسؒٝآص،٥iOSؒٝآص،
   ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger
   ـؚٗ: http://abcdef.gets.b6n.ch/
   Twitter: https://twitter.com/brn227
   GitHub: https://github.com/brn
   
   

   View Slide

3. Why test against production?
   猘ך⫴ְגְ׷،سذؙأةآؔדכBtoBָً؎ٝחז׶תׅկ
   ًر؍،瘝ךBtoCךؿٗٝزؒٝس׾㹋鄲ׅ׷堣⠓כ婁ו֮׶תׇ׿կ
   ׉ך׋׭ծE2Eذأزחꟼ׃ג׮㼰ղ暴婊ז✲䞔ָ㢳ְדׅկ
   

   View Slide

4. Why test against production?
   ׉׿ז鏬ד➙㔐כ剑׮㹋鄲ׅ׷ֿהָ㢳ְծ
   javascript SDKךE2Eذأزך׀稱➜׾׃׋ְה䙼ְתׅկ
   

   View Slide

5. Why is javascript SDK?
   ׉ך⵸חjavascript SDKהכו׿ז׮ך׾䭷׃גְ׷ַ׾׀铡僇׃תׅկ
   javascript SDKהכ⚺חծscriptה㼰׃ךةؚךإحزד䲿⣘ׁ׸׷html
   ػ٦خדׅկ
   
   Ⱗ⡤⢽ד鎉ֲהGoogle Analyticsךأصلحز瘝ךֿהדׅկ
   

   View Slide

6. Special E2E test
   ׁגծֿךjavascript SDKךE2Eذأزָ暴婊ַהְֲהծ
   㛇劤涸חؙٓ؎،ٝزךWebل٦آח㙵׭鴥ת׸׷ֿה׾⵸䲿ה׃גְ
   ׷׋׭ծ涯秵ך橆㞮דE2Eذأز׾׃׋הֿ׹דծ㹋ꥷךذأزחז׵ז
   ְֿהָ㢳ְךדׅկ
   
   ׉ך׋׭…
   

   View Slide

7. Solution
   ؙٓ؎،ٝزךWEBل٦آ♳ד
   㹋ꥷחذأز׾׃תׅ
   

   View Slide

8. How?
   ֿ׸׾װ׵זְה…
   ⟃⵸厤طحزغؙٝךؚٗ؎ٝل٦آ׾ォֹ굲ל׃׋ֿהָ…
   
   ⾱㔓כؙٓ؎،ٝزךل٦آח֮׏׋document.writeָChromeחـٗح
   ׁؙ׸גְ׋ךדָׅծJSSDKך⚥דdocument.open׃גְ׋׋׭ծ㹋
   遤ׁ׸ג׃ת׏גل٦آָ涯秵חז׏ג׃ת׏גְ׋ַ׵דׅկ
   

   View Slide

9. How?
   ֲֿז׵זְ׋׭חذأز׾׃׹
   

   View Slide

10. How?
    ׃ַ׃ؙٓ؎،ٝزךWEBل٦آחכ㹋ꥷח劤殢ךةָؚ㙵ת׏גֶ׶ծ
    ذأزׅ׷חכֿךةؚ׾رفٗ؎⵸ךdev橆㞮ך׮ךח縧ֹ䳔ִ׷䗳銲
    ָ֮׶תׅկ
    

    View Slide

11. ProxyServer
    ׉ֿדـٓؐؠהWEBل٦آך꟦חProxyServer׾䮠׫ծ
    Man in the middle(⚥꟦罏余䷼)הְֲ䩛岀׾欽ְג
    WEBل٦آ׾何ׂ׿׃תׅw
    

    View Slide

12. ProxyServer
    ➙㔐כNodejs׌׏׋ךדծ
    node-mitm-proxyהְֲ׉ך׮ך׆ל׶זnpmٌآُ٦ٕ׾崞欽׃תׅկ
    

    View Slide

13. node-mitm-proxy
    ֿךٌآُ٦ٕכוֲװ׵ծ
    client => proxy
    proxy => server
    server => proxy
    proxy => client
    ךぐ穗騟ד剅ֹ䳔ִָ〳腉ז״ֲדׅկזךדծ➙㔐כծ
    server => proxy
    client => proxy
    ך穗騟׾剅ֹ䳔ִגծ劤殢؟٦غפךؙٔؒأز׾Ꟛ涪؟٦غח崧׃ծ
    ؟٦غַ׵ךٖأهٝأ׾何甑׃גرغحؚ䞔㜠׾㙵׭鴥׫תׅկ
    

    View Slide

14. Nightwatch.js
    E2Eذأز荈⡤כNightwatch.js׾ⵃ欽׃ג遤ְתׅկ
    Nightwatch.jsהכSelenium׾⢪׏׋E2Eذأزח暴⻉׃׋ٓ؎ـٓٔדׅկ
    湫חSeleniumח鍗׷״׶ַז׶嚂דֹתׅկ
    ׁ׵חぐـٓؐؠכselenium-docker׾ⵃ欽׃גⴓ侔橆㞮ד遤ְתׅկ
    

    View Slide

15. Images
    Nightwatch selenium-hub
    Browser
    Browser
    Browser
    Proxy
    Proxy
    Proxy
    jsךURL剅ֹ䳔ִהWEBل٦آך何甑
    Development Contents Server
    Production Contents Server
    剅ֹ䳔ִ׵׸׋URLד،ؙإأ
    WEB
    WEBل٦آ׾《䖤
    

    View Slide

16. E2E Test
    ֿ׸ד劤殢橆㞮פך،ؙإأד֮׶זָ׵ծ
    Ꟛ涪橆㞮ךjsؿ؋؎ٕדE2Eذأز׾㹋遤ׅ׷ֿהָדֹתׅկ
    

    View Slide

17. Problems
    Nightwatch.jsדFirefoxחProxy׾鏣㹀ׅ׷ְְ倯岀ָזְ׋׭ծ
    Firefoxדذأزָדֹגְתׇ׿կ
    湫䱸Selenium׾⢪ִל〳腉זךדָׅ…
    ֮הٌغ؎ٕ׮…
    

    View Slide

18. Summary
    穠㽷荈⹛ذأز׌ֽדؕغ٦דֹ׷眔㔲חכꣲ歲ָ֮׶תׅկ
    זךדծ➂⸂ד׮嫣鹈ذأزث٦يָذأز׃גְתׅկ
    暴חٌغ؎ٕ橆㞮ך劤殢E2Eذأزָ穠圓⿑׃ְךדծז׿
    הַז׷傈׾㣄鋅גְתׅ…
    

    View Slide

19. Summary
    ׀幠耮֮׶ָהֲ׀ְׂת׃׋կ
    

    View Slide