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

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

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

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

A54b31d4ebbce222dff88a5c42bac033?s=128

Potato4d(Hanatani Takuma)

September 19, 2016
Tweet

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