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

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

Transcript

1. Production E2E test with ProxyServer
   
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
3. Why test against production?
   猘ך⫴ְגְ׷،سذؙأةآؔדכBtoBָً؎ٝחז׶תׅկ ًر؍،瘝ךBtoCךؿٗٝزؒٝس׾㹋鄲ׅ׷堣⠓כ婁ו֮׶תׇ׿կ ׉ך׋׭ծE2Eذأزחꟼ׃ג׮㼰ղ暴婊ז✲䞔ָ㢳ְדׅկ
   
4. Why test against production?
   ׉׿ז鏬ד➙㔐כ剑׮㹋鄲ׅ׷ֿהָ㢳ְծ javascript SDKךE2Eذأزך׀稱➜׾׃׋ְה䙼ְתׅկ
   
5. Why is javascript SDK?
   ׉ך⵸חjavascript SDKהכו׿ז׮ך׾䭷׃גְ׷ַ׾׀铡僇׃תׅկ javascript SDKהכ⚺חծscriptה㼰׃ךةؚךإحزד䲿⣘ׁ׸׷html ػ٦خדׅկ Ⱗ⡤⢽ד鎉ֲהGoogle Analyticsךأصلحز瘝ךֿהדׅկ
6. Special E2E test
   ׁגծֿךjavascript SDKךE2Eذأزָ暴婊ַהְֲהծ 㛇劤涸חؙٓ؎،ٝزךWebل٦آח㙵׭鴥ת׸׷ֿה׾⵸䲿ה׃גְ ׷׋׭ծ涯秵ך橆㞮דE2Eذأز׾׃׋הֿ׹דծ㹋ꥷךذأزחז׵ז ְֿהָ㢳ְךדׅկ ׉ך׋׭…
7. Solution
   ؙٓ؎،ٝزךWEBل٦آ♳ד 㹋ꥷחذأز׾׃תׅ
8. How?
   ֿ׸׾װ׵זְה… ⟃⵸厤طحزغؙٝךؚٗ؎ٝل٦آ׾ォֹ굲ל׃׋ֿהָ… ⾱㔓כؙٓ؎،ٝزךل٦آח֮׏׋document.writeָChromeחـٗح ׁؙ׸גְ׋ךדָׅծJSSDKך⚥דdocument.open׃גְ׋׋׭ծ㹋 遤ׁ׸ג׃ת׏גل٦آָ涯秵חז׏ג׃ת׏גְ׋ַ׵דׅկ
9. How?
   ֲֿז׵זְ׋׭חذأز׾׃׹
10. How?
    ׃ַ׃ؙٓ؎،ٝزךWEBل٦آחכ㹋ꥷח劤殢ךةָؚ㙵ת׏גֶ׶ծ ذأزׅ׷חכֿךةؚ׾رفٗ؎⵸ךdev橆㞮ך׮ךח縧ֹ䳔ִ׷䗳銲 ָ֮׶תׅկ
11. ProxyServer
    ׉ֿדـٓؐؠהWEBل٦آך꟦חProxyServer׾䮠׫ծ Man in the middle(⚥꟦罏余䷼)הְֲ䩛岀׾欽ְג WEBل٦آ׾何ׂ׿׃תׅw
12. ProxyServer
    ➙㔐כNodejs׌׏׋ךדծ node-mitm-proxyהְֲ׉ך׮ך׆ל׶זnpmٌآُ٦ٕ׾崞欽׃תׅկ
13. node-mitm-proxy
    ֿךٌآُ٦ٕכוֲװ׵ծ client => proxy proxy => server server => proxy proxy => client ךぐ穗騟ד剅ֹ䳔ִָ〳腉ז״ֲדׅկזךדծ➙㔐כծ server => proxy client => proxy ך穗騟׾剅ֹ䳔ִגծ劤殢؟٦غפךؙٔؒأز׾Ꟛ涪؟٦غח崧׃ծ ؟٦غַ׵ךٖأهٝأ׾何甑׃גرغحؚ䞔㜠׾㙵׭鴥׫תׅկ
14. Nightwatch.js
    E2Eذأز荈⡤כNightwatch.js׾ⵃ欽׃ג遤ְתׅկ Nightwatch.jsהכSelenium׾⢪׏׋E2Eذأزח暴⻉׃׋ٓ؎ـٓٔדׅկ 湫חSeleniumח鍗׷״׶ַז׶嚂דֹתׅկ ׁ׵חぐـٓؐؠכselenium-docker׾ⵃ欽׃גⴓ侔橆㞮ד遤ְתׅկ
15. Images
    Nightwatch selenium-hub Browser Browser Browser Proxy Proxy Proxy jsךURL剅ֹ䳔ִהWEBل٦آך何甑
    Development Contents Server Production Contents Server 剅ֹ䳔ִ׵׸׋URLד،ؙإأ
    WEB WEBل٦آ׾《䖤
    
16. E2E Test
    ֿ׸ד劤殢橆㞮פך،ؙإأד֮׶זָ׵ծ Ꟛ涪橆㞮ךjsؿ؋؎ٕדE2Eذأز׾㹋遤ׅ׷ֿהָדֹתׅկ
17. Problems
    Nightwatch.jsדFirefoxחProxy׾鏣㹀ׅ׷ְְ倯岀ָזְ׋׭ծ Firefoxדذأزָדֹגְתׇ׿կ 湫䱸Selenium׾⢪ִל〳腉זךדָׅ… ֮הٌغ؎ٕ׮…
18. Summary
    穠㽷荈⹛ذأز׌ֽדؕغ٦דֹ׷眔㔲חכꣲ歲ָ֮׶תׅկ זךדծ➂⸂ד׮嫣鹈ذأزث٦يָذأز׃גְתׅկ 暴חٌغ؎ٕ橆㞮ך劤殢E2Eذأزָ穠圓⿑׃ְךדծז׿ הַז׷傈׾㣄鋅גְתׅ…
19. Summary
    ׀幠耮֮׶ָהֲ׀ְׂת׃׋կ