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
E2Eツール「Nightmare」を使ってみよう
Search
potato4d(Takuma HANATANI)
September 19, 2016
Programming
1
520
E2Eツール「Nightmare」を使ってみよう
WordBench京都(#wbkyoto #wordbench) 9月のスライドです。
potato4d(Takuma HANATANI)
September 19, 2016
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
410
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.2k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.6k
Other Decks in Programming
See All in Programming
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.7k
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
310
スマホから Youtube Shortsを見られないようにする
lemolatoon
3
680
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
450
Catch Up: Go Style Guide Update
andpad
0
210
Flutterで分数(Fraction)を表示する方法
koukimiura
0
120
CSC509 Lecture 05
javiergs
PRO
0
300
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
8
1.6k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
450
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Scaling GitHub
holman
463
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
Facilitating Awesome Meetings
lara
56
6.6k
The Language of Interfaces
destraynor
162
25k
Speed Design
sergeychernyshev
32
1.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Making Projects Easy
brettharned
119
6.4k
Into the Great Unknown - MozCon
thekraken
40
2.1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
E2EπʔϧʮNightmareʯΛ ͬͯΈΑ͏ WordBench Kyoto 2016.09 TAKUMA Hanatani(Potato4d)
ࣗݾհ • Ֆ୩ɹຏ(@potato4d) • #wbkyoto ͷϞσϨʔλʔͬͯ·͢ • #frontkansai ͬͯ·͢ɻ •
࠷ۙJavaScriptʹͲͬΓ • ඞཁ͕ग़͖ͯͯॳΊͯe2eͬͨͷͰ ͯ͠Έ·͢
Agenda • Nightmareͱʁ • NightmareΛ͏ͱԿ͕Ͱ͖Δʁ • WordPressϓϥάΠϯ։ൃ࣌ʹཱͭͱ͜Ζ
Nightmareͱʁ
Nightmareͱʁ
Nightmareͱʁ • Node.jsϕʔεͷϔουϨεϒϥβ • ୯ମͰेʹe2eςετπʔϧͱͯ͠ར༻Մೳ • ݩʑPhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ • ࠓElectronΛར༻͓ͯ͠Γɺ࠷৽ͷରԠόονϦ
Nightmareͱʁ • Node.jsϕʔεͷϔουϨεϒϥβ • ୯ମͰेʹe2eςετπʔϧͱͯ͠ར༻Մೳ • ݩʑPhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ • ࠓElectronΛར༻͓ͯ͠Γɺ࠷৽ͷରԠόονϦ
Nightmareͱʁ • Node.jsϕʔεͷϔουϨεϒϥβ • ୯ମͰेʹe2eςετπʔϧͱͯ͠ར༻Մೳ • ݩʑPhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ • ࠓElectronΛར༻͓ͯ͠Γɺ࠷৽ͷରԠόονϦ
Nightmareͱʁ • Node.jsϕʔεͷϔουϨεϒϥβ • ୯ମͰेʹe2eςετπʔϧͱͯ͠ར༻Մೳ • ݩʑPhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ • ࠓElectronΛར༻͓ͯ͠Γɺ࠷৽ͷରԠόονϦ
e2eςετͱʁ
e2eςετͱʁ • γεςϜͷ͔Β·ͰΛཏతʹ֬ೝ͢Δςετͷ͜ ͱ • ઐ༻ͷe2eπʔϧϔουϨεϒϥβΛར༻͠ɺ୯Ұ ͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣ ϯΛಈ͔ͯ͠ਐΊ͍ͯ͘ • ॳΊͯͷόΠτઌͰΤΫηϧγʔτͰͬͯͨ
e2eςετͱʁ • γεςϜͷ͔Β·ͰΛཏతʹ֬ೝ͢Δςετͷ͜ ͱ • ઐ༻ͷe2eπʔϧϔουϨεϒϥβΛར༻͠ɺ୯Ұ ͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣ ϯΛಈ͔ͯ͠ਐΊ͍ͯ͘ • ॳΊͯͷόΠτઌͰΤΫηϧγʔτͰͬͯͨ
e2eςετͱʁ • γεςϜͷ͔Β·ͰΛཏతʹ֬ೝ͢Δςετͷ͜ ͱ • ઐ༻ͷe2eπʔϧϔουϨεϒϥβΛར༻͠ɺ୯Ұ ͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣ ϯΛಈ͔ͯ͠ਐΊ͍ͯ͘ • ॳΊͯͷόΠτઌͰΤΫηϧγʔτͰͬͯͨ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ • ϒϥβͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ • DOM͕ີʹؔΘΔ෦ͷςετ • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ • ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ • ϒϥβͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ • DOM͕ີʹؔΘΔ෦ͷςετ • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ • ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ • ϒϥβͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ • DOM͕ີʹؔΘΔ෦ͷςετ • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ • ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ • ϒϥβͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ • DOM͕ີʹؔΘΔ෦ͷςετ • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ • WebαΠτͰͷ୯७ͳૢ࡞ͷࣗಈԽ
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ DOM͕ີʹؔΘΔ෦ͷςετ DOM JavaScript DOM Event Event
NightmareΛ͏ͱԿ͕Ͱ͖Δʁ ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ Login Dashboard Post Event Event
࣮ࡍͬͯΈΔ
WordPressϓϥάΠϯ։ൃ࣌ʹ ཱͭͱ͜Ζ
WordPressϓϥάΠϯ։ൃ࣌ʹཱͭͱ͜Ζ • Θ͔Γ͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫ͠ ͯ࣌͘͢ʹͳ͔ͳ͔ྑ͍ • ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱ ͨ͠ͷΑΓԸܙ͕ബ͍ • εΫϦʔϯγϣοτͳΜ͔औΕΔͷͰɺެࣜʹ্͛Δ ͱ͖ʹͦͷ͋ͨΓศརʹར༻Ͱ͖Δ͔
WordPressϓϥάΠϯ։ൃ࣌ʹཱͭͱ͜Ζ • Θ͔Γ͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫ͠ ͯ࣌͘͢ʹͳ͔ͳ͔ྑ͍ • ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱ ͨ͠ͷΑΓԸܙ͕ബ͍ • εΫϦʔϯγϣοτͳΜ͔औΕΔͷͰɺެࣜʹ্͛Δ ͱ͖ʹͦͷ͋ͨΓศརʹར༻Ͱ͖Δ͔
WordPressϓϥάΠϯ։ൃ࣌ʹཱͭͱ͜Ζ • Θ͔Γ͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫ͠ ͯ࣌͘͢ʹͳ͔ͳ͔ྑ͍ • ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱ ͨ͠ͷΑΓԸܙ͕ബ͍ • εΫϦʔϯγϣοτͳΜ͔औΕΔͷͰɺެࣜʹ্͛Δ ͱ͖ʹͦͷ͋ͨΓศརʹར༻Ͱ͖Δ͔
NightmareΛͬͯΈͨॴײ(JSͷਓ͚)
NightmareΛͬͯΈͨॴײ • Node͔ͭಈ࡞ϒϥβ͕ChromiumϕʔεͳͷͰɺ ϞμϯJavaScriptΛଘʹͬͯॻ͘͜ͱ͕ग़དྷΔͷ ҹ • ͨͩɺੜͰಈ͔͢ʹmochaͳͲͷςεςΟϯάϑ ϨʔϜϫʔΫΛ͏߹ͰɺgeneratorͳͲͷ͕ࣝ ඞཁʹͳΔͷͰ୭Ͱѻ͍͍͔͢ͱ͍͑ඍົ
NightmareΛͬͯΈͨॴײ • Node͔ͭಈ࡞ϒϥβ͕ChromiumϕʔεͳͷͰɺ ϞμϯJavaScriptΛଘʹͬͯॻ͘͜ͱ͕ग़དྷΔͷ ҹ • ͨͩɺੜͰಈ͔͢ʹmochaͳͲͷςεςΟϯάϑ ϨʔϜϫʔΫΛ͏߹ͰɺgeneratorͳͲͷ͕ࣝ ඞཁʹͳΔͷͰ୭Ͱѻ͍͍͔͢ͱ͍͑ඍົ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠