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
RailsConf 2023
tenderlove
30
1.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Documentation Writing (for coders)
carmenintech
75
5k
How to Think Like a Performance Engineer
csswizardry
27
2k
Automating Front-end Workflow
addyosmani
1371
200k
Side Projects
sachag
455
43k
Unsuck your backbone
ammeep
671
58k
GitHub's CSS Performance
jonrohan
1032
470k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
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 ׀幠耮ָ֮הֲ׀ְׂת׃կ