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

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

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

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

Potato4d(Hanatani Takuma)

September 19, 2016
Tweet

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Programming

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