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
3.1k
Parsing Javascript
brn
14
9.3k
JSON & Object Tips
brn
1
510
CA 1Day Youth Bootcamp for Frontend LT
brn
0
980
Modern TypeScript
brn
2
820
javascript - behind the scene
brn
3
750
tc39 proposals
brn
0
900
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
720
Featured
See All Featured
Designing for Performance
lara
610
69k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Site-Speed That Sticks
csswizardry
13
910
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
The Language of Interfaces
destraynor
162
25k
What's in a price? How to price your products and services
michaelherold
246
12k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Agile that works and the tools we love
rasmusluckow
331
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A Modern Web Designer's Workflow
chriscoyier
697
190k
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 ׀幠耮ָ֮הֲ׀ְׂת׃կ