Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ProxyServerを使った本番環境でのE2Eテスト
Search
Taketoshi Aono(青野健利 a.k.a brn)
June 28, 2017
2
2.4k
ProxyServerを使った本番環境でのE2Eテスト
本番環境でjavascriptのE2Eテストを行った方法の説明です。
Taketoshi Aono(青野健利 a.k.a brn)
June 28, 2017
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
3k
Parsing Javascript
brn
14
9.3k
JSON & Object Tips
brn
1
510
CA 1Day Youth Bootcamp for Frontend LT
brn
0
970
Modern TypeScript
brn
2
820
javascript - behind the scene
brn
3
750
tc39 proposals
brn
0
890
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
710
Featured
See All Featured
Designing for Performance
lara
610
69k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Language of Interfaces
destraynor
161
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Statistics for Hackers
jakevdp
799
220k
A designer walks into a library…
pauljervisheath
207
24k
Transcript
Production E2E test with ProxyServer
せ: @brn (ꫬꅿ⨳ⵃa.k.a ـٕ٦ظ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥iOSؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger
ـؚٗ: http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn
Why test against production? 猘ך⫴ְגְ،سذؙأةآؔדכBtoBָً؎ٝחזתׅկ ًر؍،瘝ךBtoCךؿٗٝزؒٝس㹋鄲ׅ堣⠓כ婁ו֮תׇկ ךծE2Eذأزחꟼ׃ג㼰ղ暴婊ז✲䞔ָ㢳ְדׅկ
Why test against production? ז鏬ד➙㔐כ剑㹋鄲ֿׅהָ㢳ְծ javascript SDKךE2Eذأزך׀稱➜׃ְה䙼ְתׅկ
Why is javascript SDK? ךחjavascript SDKהכוזך䭷׃גְַ׀铡僇׃תׅկ javascript SDKהכ⚺חծscriptה㼰׃ךةؚךإحزד䲿⣘ׁhtml ػ٦خדׅկ
Ⱗ⡤⢽ד鎉ֲהGoogle Analyticsךأصلحز瘝ךֿהדׅկ
Special E2E test ׁגծֿךjavascript SDKךE2Eذأزָ暴婊ַהְֲהծ 㛇劤涸חؙٓ؎،ٝزךWebل٦آח㙵鴥תֿה䲿ה׃גְ ծ涯秵ך橆㞮דE2Eذأز׃הֿדծ㹋ꥷךذأزחזז ְֿהָ㢳ְךדׅկ ך…
Solution ؙٓ؎،ٝزךWEBل٦آ♳ד 㹋ꥷחذأز׃תׅ
How? ֿװזְה… ⟃厤طحزغؙٝךؚٗ؎ٝل٦آォֹ굲ל׃ֿהָ… ⾱㔓כؙٓ؎،ٝزךل٦آח֮document.writeָChromeחـٗح ׁؙגְךדָׅծJSSDKך⚥דdocument.open׃גְծ㹋 遤ׁג׃תגل٦آָ涯秵חזג׃תגְַדׅկ
How? ֲֿזזְחذأز׃
How? ׃ַ׃ؙٓ؎،ٝزךWEBل٦آחכ㹋ꥷח劤殢ךةָؚ㙵תגֶծ ذأزׅחכֿךةؚرفٗ؎ךdev橆㞮ךךח縧ֹ䳔ִ䗳銲 ָ֮תׅկ
ProxyServer ֿדـٓؐؠהWEBل٦آךחProxyServer䮠ծ Man in the middle(⚥罏余䷼)הְֲ䩛岀欽ְג WEBل٦آ何ׂ׃תׅw
ProxyServer ➙㔐כNodejsךדծ node-mitm-proxyהְֲךך׆לזnpmٌآُ٦ٕ崞欽׃תׅկ
node-mitm-proxy ֿךٌآُ٦ٕכוֲװծ client => proxy proxy => server server =>
proxy proxy => client ךぐ穗騟ד剅ֹ䳔ִָ〳腉ז״ֲדׅկזךדծ➙㔐כծ server => proxy client => proxy ך穗騟剅ֹ䳔ִגծ劤殢؟٦غפךؙٔؒأز涪؟٦غח崧׃ծ ؟٦غַךٖأهٝأ何甑׃גرغحؚ䞔㜠㙵鴥תׅկ
Nightwatch.js E2Eذأز荈⡤כNightwatch.jsⵃ欽׃ג遤ְתׅկ Nightwatch.jsהכSelenium⢪E2Eذأزח暴⻉׃ٓ؎ـٓٔדׅկ 湫חSeleniumח鍗״ַז嚂דֹתׅկ ׁחぐـٓؐؠכselenium-dockerⵃ欽׃גⴓ侔橆㞮ד遤ְתׅկ
Images Nightwatch selenium-hub Browser Browser Browser Proxy Proxy Proxy jsךURL剅ֹ䳔ִהWEBل٦آך何甑
Development Contents Server Production Contents Server 剅ֹ䳔ִURLד،ؙإأ WEB WEBل٦آ《䖤
E2E Test ֿד劤殢橆㞮פך،ؙإأד֮זָծ 涪橆㞮ךjsؿ؋؎ٕדE2Eذأز㹋遤ֿׅהָדֹתׅկ
Problems Nightwatch.jsדFirefoxחProxy鏣㹀ְְׅ倯岀ָזְծ Firefoxדذأزָדֹגְתׇկ 湫䱸Selenium⢪ִל〳腉זךדָׅ… ֮הٌغ؎ٕ…
Summary 穠㽷荈⹛ذأزֽדؕغ٦דֹ眔㔲חכꣲ歲ָ֮תׅկ זךדծ➂⸂ד嫣鹈ذأزث٦يָذأز׃גְתׅկ 暴חٌغ؎ٕ橆㞮ך劤殢E2Eذأزָ穠圓⿑׃ְךדծז הַז傈㣄鋅גְתׅ…
Summary ׀幠耮ָ֮הֲ׀ְׂת׃կ