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

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

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