Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for potato4d(Takuma HANATANI) potato4d(Takuma HANATANI)
September 19, 2016
Programming
550
1

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

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

Avatar for potato4d(Takuma HANATANI)

potato4d(Takuma HANATANI)

September 19, 2016

More Decks by potato4d(Takuma HANATANI)

See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
Avatar for potato4d(Takuma HANATANI) potato4d
3
470
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
Avatar for potato4d(Takuma HANATANI) potato4d
1
2.6k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
Avatar for potato4d(Takuma HANATANI) potato4d
9
5.1k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
Avatar for potato4d(Takuma HANATANI) potato4d
25
7.2k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい！ / Pokemon recognition from screenshots in browser using web worker
Avatar for potato4d(Takuma HANATANI) potato4d
0
1.4k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
Avatar for potato4d(Takuma HANATANI) potato4d
8
3.8k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
Avatar for potato4d(Takuma HANATANI) potato4d
11
4.5k
私たちはなぜ SPA で開発するのか / Why you choose SPA
Avatar for potato4d(Takuma HANATANI) potato4d
38
29k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
Avatar for potato4d(Takuma HANATANI) potato4d
6
3.7k

Other Decks in Programming

See All in Programming
R8 の設定見直しでアプリサイズ削減
Avatar for ANDPAD inc andpad
0
220
ジョジョの世界をXRで再現する
Avatar for mofurune mofurune
0
160
コードレビューのボトルネックを"する側"と"される側"の両面から解消する
Avatar for yub0n yub0n
2
1.6k
Event is what happens
Avatar for MOROHASHI Kyosuke moro
2
680
JIS keyboard support in Omarchy
Avatar for LEF lef237
0
110
Workers Cache を知る
Avatar for syumai syumai
0
360
残高管理から台帳サービスへの進化
Avatar for kobaryo artoy
1
200
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.9k
contenteditable と日本語入力に向き合う
Avatar for taki colorful12
0
200
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
420
Domain-Driven Transformation
Avatar for Henning Schwentner hschwentner
2
2.3k
すこし踏み込む CancellationToken
Avatar for tkym htkym
2
1.7k

Featured

See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
430
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
310
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
4
540
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.6k
Building an army of robots
Avatar for Kyle Neath kneath
307
47k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
320
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
590
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
350
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
6.1k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
10
1.2k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.8k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
620

Transcript

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

  2. ࣗݾ঺հ • Ֆ୩ɹ୓ຏ(@potato4d) • #wbkyoto ͷϞσϨʔλʔ΍ͬͯ·͢ • #frontkansai ΋΍ͬͯ·͢ɻ •

    ࠷ۙ͸JavaScriptʹͲͬ΀Γ • ඞཁ͕ग़͖ͯͯॳΊͯe2e΍ͬͨͷͰ࿩ ͯ͠Έ·͢

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

  4. Nightmareͱ͸ʁ

  5. Nightmareͱ͸ʁ

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

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

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

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

  10. e2eςετͱ͸ʁ

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

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

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

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

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

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

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

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

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

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

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

  22. ࣮ࡍ΍ͬͯΈΔ

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

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

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

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

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

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

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

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