$30 off During Our Annual Pro Sale. View Details »

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

 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