Save 37% off PRO during our Black Friday Sale! »

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

A54b31d4ebbce222dff88a5c42bac033?s=47 Potato4d(Hanatani Takuma)
September 19, 2016
Programming
1
420

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

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

A54b31d4ebbce222dff88a5c42bac033?s=128

Potato4d(Hanatani Takuma)

September 19, 2016
Tweet

More Decks by Potato4d(Hanatani Takuma)

See All by Potato4d(Hanatani Takuma)
A54b31d4ebbce222dff88a5c42bac033?s=48 potato4d
9
3.8k
A54b31d4ebbce222dff88a5c42bac033?s=48 potato4d
24
5.1k
A54b31d4ebbce222dff88a5c42bac033?s=48 potato4d
0
520
A54b31d4ebbce222dff88a5c42bac033?s=48 potato4d
8
2.5k
A54b31d4ebbce222dff88a5c42bac033?s=48 potato4d
9
2.4k
A54b31d4ebbce222dff88a5c42bac033?s=48 potato4d
38
20k
A54b31d4ebbce222dff88a5c42bac033?s=48 potato4d
6
2.5k
A54b31d4ebbce222dff88a5c42bac033?s=48 potato4d
10
3.3k
A54b31d4ebbce222dff88a5c42bac033?s=48 potato4d
1
1.7k

Other Decks in Programming

See All in Programming
04a6843ddf4b5a57950cfa2cddf44adc?s=48 vaibhav30699
0
600
42a6a049ac8f5265f31858a9509217fb?s=48 uhooi
0
400
B7424f2bb6afd48c51cf88c2c15c395d?s=48 t2kob
0
180
75486cbfd37125f121cf4a6c5614601c?s=48 hideokamoto
PRO
2
1.9k
7a37d60769f6f3004adee19a8ff2c219?s=48 tunepolo
0
240
020199527cde1a8a9b7a11890894f442?s=48 dordieux
3
260
B04bd8797ce182483a5ded98f7cada6f?s=48 berlysia
14
6.2k
6aaaf03c4f5c681d89c3078bd6070a6f?s=48 rumi_yamaguchi
0
210
9733730b7cb400f72ed99aa28fc1d210?s=48 karszawa
0
560
8a70cbe9a1cb32f9e2286dc1bcf0f3f7?s=48 mimimimizuki
0
630
F21d69109b1c03921abf7d12f0fb6654?s=48 dscs
0
160
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
2
130

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
55
4.9k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
277
17k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
55
3.5k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
61
7.3k
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
48k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
19k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
56
2.1k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.2k
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠