Upgrade to Pro — share decks privately, control downloads, hide ads and more …

E2Eツール「Nightmare」を使ってみよう

Potato4d(Hanatani Takuma)
September 19, 2016
Programming
1
440

 E2Eツール「Nightmare」を使ってみよう

WordBench京都(#wbkyoto #wordbench) 9月のスライドです。

Potato4d(Hanatani Takuma)

September 19, 2016
Tweet

More Decks by Potato4d(Hanatani Takuma)

See All by Potato4d(Hanatani Takuma)
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
760
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.2k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.1k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい！ / Pokemon recognition from screenshots in browser using web worker
potato4d
0
750
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
2.9k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
10
3.1k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
23k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
2.8k
気軽な Node.js バックエンド開発には TypeORM がちょうどいい #kng7 / introduce-typeorm
potato4d
9
3.8k

Other Decks in Programming

See All in Programming
Kubernetes as a Service の利用者を支える機能 - Platform Engineering Meetup #1 / pfem01-amsy810-k8s
masayaaoyama
0
1k
面倒なのは嫌なのでコンテナのマネージドサービスの極振りしたいと思います。
n1215
PRO
1
140
社内のメンバーに「関数型プログラミングの学習・教育」についていろいろ聞いてみた
j5ik2o
1
420
Laravelプロダクト開発・運用の失敗学
shgishzk
0
120
CSC308 Lecture 23
javiergs
PRO
0
180
#phperkaigi【実録】「PHP_CodeSniffer」で始める快適コードレビューライフ/codereviewlife
mrstsgk
0
130
AWS移行を通して得られた知見と教訓
mthiroshi00excite
0
270
＼ 祝！／AWS 大阪リージョン 2 周年の歩み
track3jyo
PRO
0
160
K/NとNSKeyedArchiverと私
ryunen344
0
170
Kotlinにおける型の世界と エラーハンドリング / Type World and Error Handling in Kotlin
makomakok
0
220
Famm Android改善記
akatsuki174
0
120
ChatGPTによるデータ変換がもたらすインパクト
masahiro_nishimi
3
3.5k

Featured

See All Featured
Building Flexible Design Systems
yeseniaperezcruz
314
35k
Typedesign – Prime Four
hannesfritz
34
1.6k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
WebSockets: Embracing the real-time Web
robhawkes
58
6.1k
Debugging Ruby Performance
tmm1
67
11k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
197
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
Raft: Consensus for Rubyists
vanstee
130
5.7k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Designing Experiences People Love
moore
130
22k

Transcript

  1. E2EπʔϧʮNightmareʯΛ
    ࢖ͬͯΈΑ͏
    WordBench Kyoto 2016.09
    TAKUMA Hanatani(Potato4d)

    View Slide

  2. ࣗݾ঺հ
    • Ֆ୩ɹ୓ຏ(@potato4d)
    • #wbkyoto ͷϞσϨʔλʔ΍ͬͯ·͢
    • #frontkansai ΋΍ͬͯ·͢ɻ
    • ࠷ۙ͸JavaScriptʹͲͬ΀Γ
    • ඞཁ͕ग़͖ͯͯॳΊͯe2e΍ͬͨͷͰ࿩
    ͯ͠Έ·͢

    View Slide

  3. Agenda
    • Nightmareͱ͸ʁ
    • NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ
    • WordPressϓϥάΠϯ։ൃ࣌ʹ໾ཱͭͱ͜Ζ

    View Slide

  4. Nightmareͱ͸ʁ

    View Slide

  5. Nightmareͱ͸ʁ

    View Slide

  6. Nightmareͱ͸ʁ
    • Node.jsϕʔεͷϔουϨεϒϥ΢β
    • ୯ମͰ΋े෼ʹe2eςετπʔϧͱͯ͠ར༻Մೳ
    • ݩʑ͸PhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ
    • ࠓ͸ElectronΛར༻͓ͯ͠Γɺ࠷৽΁ͷରԠ͸όονϦ

    View Slide

  7. Nightmareͱ͸ʁ
    • Node.jsϕʔεͷϔουϨεϒϥ΢β
    • ୯ମͰ΋े෼ʹe2eςετπʔϧͱͯ͠ར༻Մೳ
    • ݩʑ͸PhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ
    • ࠓ͸ElectronΛར༻͓ͯ͠Γɺ࠷৽΁ͷରԠ͸όονϦ

    View Slide

  8. Nightmareͱ͸ʁ
    • Node.jsϕʔεͷϔουϨεϒϥ΢β
    • ୯ମͰ΋े෼ʹe2eςετπʔϧͱͯ͠ར༻Մೳ
    • ݩʑ͸PhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ
    • ࠓ͸ElectronΛར༻͓ͯ͠Γɺ࠷৽΁ͷରԠ͸όονϦ

    View Slide

  9. Nightmareͱ͸ʁ
    • Node.jsϕʔεͷϔουϨεϒϥ΢β
    • ୯ମͰ΋े෼ʹe2eςετπʔϧͱͯ͠ར༻Մೳ
    • ݩʑ͸PhantomJSͱ͍͏JSϥΠϒϥϦͷϥούʔ
    • ࠓ͸ElectronΛར༻͓ͯ͠Γɺ࠷৽΁ͷରԠ͸όονϦ

    View Slide

  10. e2eςετͱ͸ʁ

    View Slide

  11. e2eςετͱ͸ʁ
    • γεςϜͷ୺͔Β୺·ͰΛ໢ཏతʹ֬ೝ͢Δςετͷ͜
    ͱ
    • ઐ༻ͷe2eπʔϧ΍ϔουϨεϒϥ΢βΛར༻͠ɺ୯Ұ
    ͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣ
    ϯΛಈ͔ͯ͠ਐΊ͍ͯ͘
    • ॳΊͯͷόΠτઌͰ͸ΤΫηϧγʔτͰ΍ͬͯͨ

    View Slide

  12. e2eςετͱ͸ʁ
    • γεςϜͷ୺͔Β୺·ͰΛ໢ཏతʹ֬ೝ͢Δςετͷ͜
    ͱ
    • ઐ༻ͷe2eπʔϧ΍ϔουϨεϒϥ΢βΛར༻͠ɺ୯Ұ
    ͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣ
    ϯΛಈ͔ͯ͠ਐΊ͍ͯ͘
    • ॳΊͯͷόΠτઌͰ͸ΤΫηϧγʔτͰ΍ͬͯͨ

    View Slide

  13. e2eςετͱ͸ʁ
    • γεςϜͷ୺͔Β୺·ͰΛ໢ཏతʹ֬ೝ͢Δςετͷ͜
    ͱ
    • ઐ༻ͷe2eπʔϧ΍ϔουϨεϒϥ΢βΛར༻͠ɺ୯Ұ
    ͷϓϩάϥϜͷI/O͚ͩͰͳ͘ɺ࣮ࡍͷΞϓϦέʔγϣ
    ϯΛಈ͔ͯ͠ਐΊ͍ͯ͘
    • ॳΊͯͷόΠτઌͰ͸ΤΫηϧγʔτͰ΍ͬͯͨ

    View Slide

  14. NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ

    View Slide

  15. NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ

    View Slide

  16. NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ
    • ϒϥ΢βͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ
    • DOM͕ີ઀ʹؔΘΔ෦෼ͷςετ
    • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ
    • ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ

    View Slide

  17. NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ
    • ϒϥ΢βͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ
    • DOM͕ີ઀ʹؔΘΔ෦෼ͷςετ
    • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ
    • ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ

    View Slide

  18. NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ
    • ϒϥ΢βͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ
    • DOM͕ີ઀ʹؔΘΔ෦෼ͷςετ
    • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ
    • ୯७ͳWebαΠτͰͷૢ࡞ͷࣗಈԽ

    View Slide

  19. NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ
    • ϒϥ΢βͰͰ͖Δૢ࡞શ͕ͯࣗಈԽͰ͖Δ
    • DOM͕ີ઀ʹؔΘΔ෦෼ͷςετ
    • ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ
    • WebαΠτͰͷ୯७ͳૢ࡞ͷࣗಈԽ

    View Slide

  20. NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ
    DOM͕ີ઀ʹؔΘΔ෦෼ͷςετ
    DOM JavaScript DOM
    Event Event

    View Slide

  21. NightmareΛ࢖͏ͱԿ͕Ͱ͖Δʁ
    ࣮ࡍͷૢ࡞ϑϩʔʹԠͨ͡ಈ࡞ςετ
    Login Dashboard Post
    Event Event

    View Slide

  22. ࣮ࡍ΍ͬͯΈΔ

    View Slide

  23. WordPressϓϥάΠϯ։ൃ࣌ʹ
    ໾ཱͭͱ͜Ζ

    View Slide

  24. WordPressϓϥάΠϯ։ൃ࣌ʹ໾ཱͭͱ͜Ζ
    • Θ͔Γ΍͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫ͠΍
    ͯ࣌͘͢୹ʹ͸ͳ͔ͳ͔ྑ͍
    • ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱ
    ͨ͠΋ͷΑΓ͸Ըܙ͕ബ͍
    • εΫϦʔϯγϣοτͳΜ͔΋औΕΔͷͰɺެࣜʹ্͛Δ
    ͱ͖ʹ͸ͦͷ͋ͨΓ΋ศརʹར༻Ͱ͖Δ͔΋

    View Slide

  25. WordPressϓϥάΠϯ։ൃ࣌ʹ໾ཱͭͱ͜Ζ
    • Θ͔Γ΍͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫ͠΍
    ͯ࣌͘͢୹ʹ͸ͳ͔ͳ͔ྑ͍
    • ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱ
    ͨ͠΋ͷΑΓ͸Ըܙ͕ബ͍
    • εΫϦʔϯγϣοτͳΜ͔΋औΕΔͷͰɺެࣜʹ্͛Δ
    ͱ͖ʹ͸ͦͷ͋ͨΓ΋ศརʹར༻Ͱ͖Δ͔΋

    View Slide

  26. WordPressϓϥάΠϯ։ൃ࣌ʹ໾ཱͭͱ͜Ζ
    • Θ͔Γ΍͍͢ಈ࡞͕ଟ͍ͷͰɺػցతʹνΣοΫ͠΍
    ͯ࣌͘͢୹ʹ͸ͳ͔ͳ͔ྑ͍
    • ͨͩɺPHP͕ϝΠϯͳ͚ͩ͋ͬͯɺJavaScriptΛத৺ͱ
    ͨ͠΋ͷΑΓ͸Ըܙ͕ബ͍
    • εΫϦʔϯγϣοτͳΜ͔΋औΕΔͷͰɺެࣜʹ্͛Δ
    ͱ͖ʹ͸ͦͷ͋ͨΓ΋ศརʹར༻Ͱ͖Δ͔΋

    View Slide

  27. NightmareΛ࢖ͬͯΈͨॴײ(JSͷਓ޲͚)

    View Slide

  28. NightmareΛ࢖ͬͯΈͨॴײ
    • Node੡͔ͭಈ࡞ϒϥ΢β͕ChromiumϕʔεͳͷͰɺ
    ϞμϯJavaScriptΛଘ෼ʹ࢖ͬͯॻ͘͜ͱ͕ग़དྷΔͷ͸
    ޷ҹ৅
    • ͨͩɺੜͰಈ͔͢ʹ΋mochaͳͲͷςεςΟϯάϑ
    ϨʔϜϫʔΫΛ࢖͏৔߹Ͱ΋ɺgeneratorͳͲͷ஌͕ࣝ
    ඞཁʹͳΔͷͰ୭Ͱ΋ѻ͍΍͍͔͢ͱ͍͑͹ඍົ

    View Slide

  29. NightmareΛ࢖ͬͯΈͨॴײ
    • Node੡͔ͭಈ࡞ϒϥ΢β͕ChromiumϕʔεͳͷͰɺ
    ϞμϯJavaScriptΛଘ෼ʹ࢖ͬͯॻ͘͜ͱ͕ग़དྷΔͷ͸
    ޷ҹ৅
    • ͨͩɺੜͰಈ͔͢ʹ΋mochaͳͲͷςεςΟϯάϑ
    ϨʔϜϫʔΫΛ࢖͏৔߹Ͱ΋ɺgeneratorͳͲͷ஌͕ࣝ
    ඞཁʹͳΔͷͰ୭Ͱ΋ѻ͍΍͍͔͢ͱ͍͑͹ඍົ

    View Slide

  30. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide