E2E test with TestCafe @LT Thursday Vol.20

社内勉強会で使ったTestCafeの紹介資料

Transcript

1. E2E test with LT Thursday Vol.20
2. .me { name: ԕ౻ ޺௕ a.k.a. piro; age : 34; .CA::before { career: Web੡࡞ձࣾ, Πϕϯτ੍࡞ձࣾ; } .CA::after { career: Android Market, SP Ameba Platform, 
 Ameba OWND, AWA, MDH; } }
3. Index • About TestCafe • API • Debug • Page Object Model • ॴײ
4. About TestCafe
6. Demo
7. Features • ES2016Ͱॻ͚ΔͷͰbabelෆཁ • Browser pluginෆཁ • ͍ΖΜͳૢ࡞ΛࣗಈͰ଴ͬͯ͘ΕΔ • TouchσόΠεରԠ • RemoteͰςετ͕࣮ߦͰ͖Δ
8. API
10. Demo
11. Fixtures / Tests • ςετͷ෼ྨͱςετ໊ͷొ࿥ • લޙͷॲཧͷొ࿥ • ͜ͷ෼ྨ΍໊લΛࢦఆͯ͠ςετΛ࣮ߦ͢Δ ͜ͱ΋Ͱ͖Δ
13. Selectors • ཁૉऔಘؔ࿈ͷAPI • Query SelectorͬΆ͘ॻ͚Δʢͱ͍͏ΑΓ΋jQueryͷ$తͳײ͡ʣ • snapshotͳͷͰऔಘޙʹ஗Ԇͯ͠มߋ͞Εͨ ஋͸উखʹมΘͬͯ͘Εͳ͍ • औಘͰ͖Δ·Ͱ଴ͬͯ͘ΕΔ
15. Test Controller • Πϕϯτૢ࡞ʢclick / d&d etcʣ • ը໘ॲཧʢwindow resize / ը໘Ωϟϓνϟ etcʣ • Assertion
17. Assertion • expectܗࣜ • Deep Equal (Not Deep Equal) • Ok (Not Ok) • Contains (Not Contains) • Type of (Not Type of) • Great than (Great than or Equal to) • Less than (Less than or Equal to) • Within (Not Within) • Match (Not Match)
19. Client Function • Clientσʔλͷऔಘؔ࿈ • URLͷऔಘͱ͔ɺlocalStorageͷૢ࡞ͱ͔
21. Debug
22. Debug • t.debug()
 ࣮ߦ؀ڥͷdebug • --inspect --debug-brk
 chrome dev toolsΛ࢖ͬͨdebug
24. Demo
25. Page Object Pattern
26. Page Object Pattern • ը໘ΛҰͭͷObjectͱͯ͠ѻ͏ • Page Class
 ը໘಺ͷཁૉΛఆٛ • Operator Class
 Page ClassͷAPIΛݺΜͰૢ࡞͢ΔΑ͏ͳAPIΛఆٛ • Features
 OperatorΛݺΜͰςετΛఆٛ
27. খωλ
28. খωλ • --qr-code
 εϚϗͷϒϥ΢β֬ೝ༻ʹQRίʔυੜ੒ • --fixture<name> / --fixture-grep <pattern> 
 --test <name> / --test-grep <pattern>
 fixture΍testͷ໊લࢦఆ΍grepͰࢦఆͨ͠testͷ࣮ߦ • --screenshots-on-fails
 ςετΤϥʔ࣌ʹεΫϦʔϯγϣοτΛࡱΔ
29. ॴײ
30. ॴײ • ಋೖ؆୯ • ॻָ͍͍ͯͯ͠ • request΍renderͷ଴ͪΛ΄΅ߟྀͤͣʹ͔͚Δͷ͸ָ • ϦϞʔτͷςετ͸ศར • ςετҎ֎ʹ΋πʔϧͱͯ͠࢖͑ͦ͏
31. Demo
32. ͓͠·͍
33. Links • TestCafe
 http://devexpress.github.io/testcafe/ • Example
 https://github.com/DevExpress/testcafe/ tree/master/examples