Cypressを導入してみた

Cypressを導入してみた

Transcript

1. Cypressを導入してみた 鈴木孝之 2019/06/22
2. "HFOEB ࣗݾ঺հɾձࣾ঺հ
   $ZQSFTTͱ͸
   %&.0
3. ࣗݾ঺հɾձࣾ঺հ
4. 1.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾݱࡏ͸ɺडୗ։ൃΛ΍ΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,Laravel5, JavaScript,backbone.js,Angular.js
5. Copyright Re:Build.inc All Rights Reserved. ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 4໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
6. 6 ࣗࣾWebαʔϏεͷ։ൃ ɾαʔϏε໊ Tadoru ɾγεςϜ֓ཁ Ϋϥ΢υιʔγϯά ΫϨδοτܾࡁ ͳͲ ɾ࢖͍ͬͯΔٕज़ ݴޠ : PHP,JavaScript ϑϨʔϜϫʔΫ: laravel5,Nuxt.jsͳͲ
7. $ZQSFTTͱ͸
8. Cypressͱ͸ʁ https://www.kaizenprogrammer.com/entry/2017/12/23/144242 Cypress ͸ɺςετͷηοτΞοϓɺ ࡞੒ɺ࣮ߦɺσόοάͳͲΛγϯϓϧʹ͢Δϒϥ΢βςε τπʔϧͰ͢ɻ E2E ςετΛطଘͷ Selenium ͷΑ͏ͳπʔϧͰ࣮૷ɾӡ ༻͢Δͱ͖ʹ͋Γ͕ͪͳਏ͍ମݧΛվળͯ͠ɺ։ൃऀΛ޾ ͤʹ͢Δ͜ͱ͕໨తͷΑ͏Ͱ͢ɻ
9. Selenium ͱͷҧ͍ https://www.kaizenprogrammer.com/entry/2017/12/23/144242 ·ͣࠜຊతͳҧ͍ͱͯ͠ɺSelenium ͸͋͘·Ͱϒϥ΢βΛࣗಈૢ࡞͢Δπʔϧ Ͱ͋ͬͯςετҎ֎ͷ༻్ʢεΫϨΠϐϯά΍खݩͷૢ࡞ͷࣗಈԽͳͲʣͰ΋࢖ ͑Δͷʹରͯ͠ɺCypress ͸׬શʹςετ໨తʹಛԽ͍ͯ͠·͢ɻ ͳͷͰɺཁૉͷදࣔΛ଴ͬͨΓϖʔδભҠͷ׬ྃΛ଴ͬͨΓͱ͍ͬͨෆ҆ఆͳς ετରࡦ͸ඪ४ͰߦΘΕ·͢ɻ ݱঢ়Ͱ͸ E2E ςετ΍౷߹ςετͷͨΊͷػೳ͕ଟ͍Ͱ͕͢ɺJavaScript ͷϢ χοτςετͷαϙʔτ΋ڧԽ͍ͯ͘͠Α͏Ͱ͢ɻ
10. ը໘Πϝʔδ https://www.kaizenprogrammer.com/entry/2017/12/23/144242
11. ը໘Πϝʔδ https://www.kaizenprogrammer.com/entry/2017/12/23/144242 ϒϥ΢βͷίϚϯυϩά্ͰίϚϯυΛΫ ϦοΫ͢ΔͱɺͦͷίϚϯυ͕࣮ߦ͞Εͨ ࣌఺ͷ DOM εφοϓγϣοτΛݟΔ͜ͱ͕ Ͱ͖Δɻ CLICK Λબ୒͢Δͱ্ͷը૾ͷΑ͏ʹΫ ϦοΫΠϕϯτ͕ൃੜͨ͠৔ॴ͕ϐϯϙΠϯ τͰ੺͘දࣔ͞ΕΔɻ
12. ը໘Πϝʔδ https://www.kaizenprogrammer.com/entry/2017/12/23/144242 ͜ͷঢ়ଶͰ Chrome ͷ Developer Tools Λ։͘͜ͱ͕Մೳ
13. %&.0
14. ϑϩϯτΤϯυ αʔόαΠυ શମߏ੒ Gitlab CI ςετɾLintͳͲ Firebase ςετɾLintͳͲ
15. (1)PUSH (2)GitlabCI࣮ߦ (3)ίϯςφىಈ Gitlab (6)Envoy࣮ߦ ςετ࣮ߦ ίϯςφ σϓϩΠ࣮ߦ ίϯςφ (5)ίϯςφىಈ (4)UnitTest࣮ߦ (7)Pull εςʔδϯά؀ڥ ϦϙδτϦ Gitlab CI
16. DEMO
17. DEMO
18. DEMO
19. DEMO
20. DEMO
21. DEMO ςετͷϏσΦ͕ ੜ੒͞ΕΔ
22. DEMO