BackstopJSで始める CSSリグレッションテスト / backstopjs-css-test

Transcript

1. Ո଒ͷຖ೔Λ΋ͬͱসإʹɻ 
   1)1
   #-5
    #BDLTUPQ+4Ͱ࢝ΊΔ
   $44ϦάϨογϣϯςετ
2. ࣗݾ঺հ ߴ໺
   ෱ߊ !GPSULMF !GPSULMF ίωώτגࣜձࣾͰ͸ͨΒ͘1)1FSɻ
   ࠷ۙ͸+BWBTDSJQUͱ$44ͷൺ཰͕ଟ͘ͳ͖ͬͯͨɻ
3. ࣗݾ঺հ ߴ໺
   ෱ߊ !GPSULMF !GPSULMF ίωώτגࣜձࣾͰ͸ͨΒ͘1)1FSɻ
   ࠷ۙ͸+BWBTDSJQUͱ $44ͷൺ཰͕ଟ͘ͳ͖ͬͯͨɻ
4. ࣗݾ঺հ ߴ໺
   ෱ߊ !GPSULMF !GPSULMF ίωώτגࣜձࣾͰ͸ͨΒ͘1)1FSɻ
   ࠷ۙ͸+BWBTDSJQUͱ$44ͷൺ཰͕ଟ͘ͳ͖ͬͯͨɻ $44
5. 1)1#-5Ͱ͕͢
   ࠓ೔͸$44ͷ࿩Λ͠·͢ɻ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
6. Έͳ͞Μ$44ॻ͍ͯ·͔͢ʁ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
7. $44ͱ͍͑͹ʜ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
8. w ؅ཧ͞Ε͍ͯͳ͍ৄࡉ౓
   w ܾ·͍ͬͯͳ͍ఆٛ৔ॴʗ໋໊نଇͷํ਑
   w 6*ͷมߋͷ౓ʹগͣͭ͠૿͑ͯ͘Δະ࢖༻ελΠϧ ΧΦεʹͳΓ΍͍͢ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
9. w 8FCαʔϏεΛ։ൃ͍ͯ͠ΔνʔϜͳΒɺ)5.-$44
 ΛΤϯδχΞ͕୲౰͢Δ͜ͱ͸Α͋͘Δʢʁʣ
   w ࢲ͕ͦ͏Ͱ͢
   w ʮԶͨͪ͸งғؾͰ$44Λ΍͍ͬͯΔʯ
   w ͳΜͯͷ͸ઈରྑ͘ͳ͍ʂ
   w ͷͰͪΌΜͱษڧ͠·͠ΐ͏ʗ͠·ͨ͠ 1)1FS΋$44ͱԑΛ੾ΕΔΘ͚Ͱ͸ͳ͍ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
10. ษڧͯ͠ʮྑ͍$44ʯ͕Կ͔͸
 Θ͔͖ͬͯͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
11. $44ϦϑΝΫλϦϯάͷํ๏࿦͸
 ϓϩάϥϛϯά΄Ͳॆ࣮͍ͯ͠ͳ͍ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
12. ͳͷͰࢼߦࡨޡ͠ͳ͕Β
 $44Λվળ͍͔ͯ͘͠͠ͳ͍ʂ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
13. վળʁ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
14. w ʮ͜Ε࢖ͬͯͳͦ͞͏ͩͳʂʯ
    w ʮ೦ͷͨΊHSFQͯ͠ιʔείʔυʹͳ͍͜ͱΛ֬ೝʂʯ
    w ʮΑ͠࡟আʂʯ Αʙ͠ʂ࢖ͬͯͳ͍ελΠϧফͧ͢ʂ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
15. w ʮίϯϙʔωϯτ่͕Εͯ·͢ʂʯ
    w ʮελΠϧ͕౰ͨͬͯͳ͍ϖʔδ͕͋Γ·͢ʯ
    w ಈతʹηϨΫλΛࢦఆ͍ͯͨ͠Γʜ ͋ΕΕʜ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
16. $44ͷվળ͸೉͍͠ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
17. w ςετͳ͠ͷϦϑΝΫλϦϯά͸ා͍
    w ϦϑΝΫλϦϯάલͱޙΛൺֱͯ͠૝ఆ֎ͷҧ͍͕
 ൃੜ͍ͯ͠ͳ͍͜ͱΛ֬ೝ͍ͨ͠
    w ग़དྷΔ͜ͱͳΒखಈ͸ආ͚͍ͨ ϦϑΝΫλϦϯά͢ΔͳΒςετ͕ཉ͍͠ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
18. w มߋͷલޙͰεΫγϣΛऔͬͯࠩ෼ΛνΣοΫͰ͖Δ
 ϏδϡΞϧϦάϨογϣϯςετπʔϧ
    w $44͕ҙਤ่ͤͣΕ͍ͯͳ͍͔νΣοΫͰ͖Δ
    w ೥݄ͷେ෯ͳόʔδϣϯΞοϓ W Ͱ
 ͔ͳΓ࢖͍΍͘͢ͳͬͨ
    w HVMQ͔Βͷ׬શ୤٫
    w KTPOͷଞʹOPEF
    NPEVMFTʹΑΔ$POpH΋αϙʔτ ͦ͜ͰHBSSJT#BDLTUPQ+4 #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
19. ͜Μͳ෩ʹࠩ෼͕ݟΕ·͢ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
20. #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ มߋલ มߋޙ ࠩ෼
21. #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ มߋલ มߋޙ ࠩ෼ ݟग़͠ͷจݴ͕
    มΘ͍ͬͯΔ
22. #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ มߋલ มߋޙ ࠩ෼ ը૾͕ʮ྘ʯ͔Β
 ʮωΠϏʔʯʹมΘ͍ͬͯΔ
23. #BDLTUPQ+4ͷ࢝Ίํ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
24. w GPSULMFCBDLTUPQKTDTTUFTU
    w -BSBWFMͰ࡞ͬͨͨͩͷ8FCϖʔδ
    w ϩάΠϯೝূػೳ͋Γ
    w ະϩάΠϯɺҰൠϢʔβʔɺ؅ཧऀϢʔβʔͰ
 ݟ͑ํ͕গ͠ҟͳΔ
    w ޿ࠂͷΑ͏ʹϥϯμϜʹදࣔ͞ΕΔը૾͕ͰͨΓɺ
 Ϟʔμϧͷ͋Δϖʔδ͕ଘࡏ αϯϓϧϦϙδτϦΛ࡞ͬͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
25. w ΍Γ͍ͨ͜ͱ
    w ֤Ϣʔβʔʢ"ENJO
    /PSNBM
    /POMPHJOʣຖʹ
 ϖʔδ่͕Ε͍ͯͳ͍͔
    w 1$ͱϞόΠϧͰϖʔδ่͕Ε͍ͯͳ͍͔
    w ϥϯμϜʹग़Δ޿ࠂ΍ಈతͳϞʔμϧͳͲ΋
 ͏·͘ରॲ͍ͨ͠ αϯϓϧϦϙδτϦΛ࡞ͬͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
26. w ΍Γ͍ͨ͜ͱ
    w ֤Ϣʔβʔʢ"ENJO
    /PSNBM
    /POMPHJOʣຖʹ
 ϖʔδ่͕Ε͍ͯͳ͍͔
    w 1$ͱϞόΠϧͰϖʔδ่͕Ε͍ͯͳ͍͔
    w ϥϯμϜʹग़Δ޿ࠂ΍ಈతͳϞʔμϧͳͲ΋
 ͏·͘ରॲ͍ͨ͠ αϯϓϧϦϙδτϦΛ࡞ͬͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ ͜ͷαΠτΛର৅ʹ
 #BDLTUPQ+4Λ࢖ͬͯςετΛॻ͍ͨ
27. ςετγφϦΦΛॻ͘
    ϦϑΝΫλϦϯάલͷσʔλʢ3FGFSFODFʣΛอଘ
    ϦϑΝΫλϦϯάޙͷσʔλʢ5FTUʣΛอଘ͠
 3FGFSFODFͱൺֱ͢Δ
    
    ࠩ෼ͱͯ͠ग़ͨ5FTU͕ҙਤͨ͠΋ͷͰ͋Ε͹
 3FGFSFODFʹऔΓࠐΉʢࠓճ͜͜͸লུʣ #BDLTUPQ+4ͷ࢝Ίํ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
28. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶃ loadScenarios('backstop_data/scenarios/') module.exports = { 'viewports': [ { 'name': 'PC', 'width': 1920, 'height': 1080 }, { 'name': 'Mobile', 'width': 375, 'height': 667 } ], 'scenarios': allScenarios, 'onBeforeScript': 'onBefore.js', 'debug': false } CBDLTUPQDPOpHKT
    ςετέʔεશମʹ͔͔ΘΔ
    ઃఆΛهड़͢Δ
29. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶃ loadScenarios('backstop_data/scenarios/') module.exports = { 'viewports': [ { 'name': 'PC', 'width': 1920, 'height': 1080 }, { 'name': 'Mobile', 'width': 375, 'height': 667 } ], 'scenarios': allScenarios, 'onBeforeScript': 'onBefore.js', 'debug': false } ςετ͢Δ7JFXQPSUΛࢦఆ
    ʢࠓճ͸1$ͱϞόΠϧʣ
30. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶃ loadScenarios('backstop_data/scenarios/') module.exports = { 'viewports': [ { 'name': 'PC', 'width': 1920, 'height': 1080 }, { 'name': 'Mobile', 'width': 375, 'height': 667 } ], 'scenarios': allScenarios, 'onBeforeScript': 'onBefore.js', 'debug': false } ςετγφϦΦΛΨΨοͱ
    ಡΈࠐΉػߏΛ࣮ߦͯ͠
31. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶃ loadScenarios('backstop_data/scenarios/') module.exports = { 'viewports': [ { 'name': 'PC', 'width': 1920, 'height': 1080 }, { 'name': 'Mobile', 'width': 375, 'height': 667 } ], 'scenarios': allScenarios, 'onBeforeScript': 'onBefore.js', 'debug': false } ͦͷ݁ՌΛDPOpHʹ৯ΘͤΔ
32. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶃ loadScenarios('backstop_data/scenarios/') module.exports = { 'viewports': [ { 'name': 'PC', 'width': 1920, 'height': 1080 }, { 'name': 'Mobile', 'width': 375, 'height': 667 } ], 'scenarios': allScenarios, 'onBeforeScript': 'onBefore.js', 'debug': false } ֤ςετͷલʹ΍Γ͍ͨॲཧΛ ·ͱΊͯࢦఆͰ͖Δ
    ʢ6"ͷઃఆ΍ϩάΠϯ౳ʣ
33. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶃ [ { "label": "ADMIN_none_welcome", "url": "http://localhost:8000/", "delay": 500, "loginAs": "Admin" }, { "label": "Normal_none_welcome", "url": "http://localhost:8000/", "delay": 500, "loginAs": "Normal" }, { "label": "NON-LOGIN_none_welcome", "url": "http://localhost:8000/", "delay": 500 } ] XFMDPNFKTPO
    ࣮ࡍͷςετγφϦΦ͕
 ॻ͔ΕͨϑΝΠϧ
34. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶃ [ { "label": "ADMIN_none_welcome", "url": "http://localhost:8000/", "delay": 500, "loginAs": "Admin" }, { "label": "Normal_none_welcome", "url": "http://localhost:8000/", "delay": 500, "loginAs": "Normal" }, { "label": "NON-LOGIN_none_welcome", "url": "http://localhost:8000/", "delay": 500 } ] ςετຖʹ໊લͱͳΔʮϥϕϧʯ ͱʮςετ͢Δ63-ʯΛઃఆ
35. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶃ [ { "label": "ADMIN_none_welcome", "url": "http://localhost:8000/", "delay": 500, "loginAs": "Admin" }, { "label": "Normal_none_welcome", "url": "http://localhost:8000/", "delay": 500, "loginAs": "Normal" }, { "label": "NON-LOGIN_none_welcome", "url": "http://localhost:8000/", "delay": 500 } ] ࠓճ͸ʮMPHJO"TʯͰࢦఆͨ͠
    ݖݶͷϢʔβʔͰϩάΠϯ͢Δ Α͏ʹPO#FGPSFKTͰલॲཧ
36. ϦϑΝΫλϦϯάલͷσʔλΛอଘ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶄ $ backstop reference --config=./ backstop.config.js ϦϑΝΫλϦϯάલͷσʔλ
 ʢ3FGFSFODFʣΛอଘ͢ΔίϚ ϯυ
37. ϦϑΝΫλϦϯάલͷσʔλΛอଘ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶄ $ backstop reference --config=./ backstop.config.js ࠷ॳʹॻ͍ͨ CBDLTUPQDPOpHKTΛࢦఆ
38. ϦϑΝΫλϦϯάલͷσʔλΛอଘ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶄ $ backstop reference --config=./ backstop.config.js ࣮ߦ͕׬ྃͨ͠Β४උ0,
39. ʙ৻ॏ͔ͭେ୾ʹϦϑΝΫλϦϯάʙ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
40. ϦϑΝΫλϦϯάޙͷσʔλΛอଘ͠ൺֱ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶅ $ backstop test --config=./ backstop.config.js SFGFSFODF
    ͕
    UFTU
    ʹ
 มΘ͚ͬͨͩʂ
41. ϦϑΝΫλϦϯάޙͷσʔλΛอଘ͠ൺֱ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶅ $ backstop test --config=./ backstop.config.js ࣮ߦ͕ऴΘΔͱɾɾɾ
42. ϦϑΝΫλϦϯάޙͷσʔλΛอଘ͠ൺֱ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶅ Ϩϙʔτ͕
    ϒϥ΢βͰ։͘
43. ϦϑΝΫλϦϯάޙͷσʔλΛอଘ͠ൺֱ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶅ Ϩϙʔτ͕
    ϒϥ΢βͰ։͘
44. wಈతͳཁૉʢ޿ࠂ΍ϥϯμϜʹදࣔ͞ΕΔը૾ʣ
    ͕ݪҼ
    wαϯϓϧϦϙδτϦͰ͸$BTQFSKTΛ࢖ͬͯআ֎ઃఆΛ
 ͨ͠Γͯ͠'BJMFE
    
    ݅ʹͳΔΑ͏ʹͯ͋͠Γ·͢ʂ
    wͦͷଞɺಈ࡞͕ෆ҆ఆͳͱ͖͕ͨ·ʹ͙͋ͬͯ݅Β͍
 'BJMFEʹͳΔ͜ͱ͕͋Γ·͕͢͜͜͸ࠓޙʹظ଴ʜ
    w಺෦Ͱར༻͍ͯ͠Δ
    1IBOUPN+4ͷ།Ұͷϝϯςφ͕
 ࠷ۙҾୀͯ͠͠·ͬͨͷͰ)FBEMFTT
    $ISPNF
    αϙʔτ
 ͷಈ޲Λ஫ࢹதʜ 'BJMFE
    ݅ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
45. w #BDLTUPQ+4Λ࢖͏ͱݱ࣮తͳϨϕϧͷ
 $44ϦάϨογϣϯςετ͕ॻ͚Δʂ
    w $BTQFS+4Λ࢖͑͹ϖʔδಡΈࠐΈޙʹ
 ৭ʑΫϦοΫͨ͠Γೖྗͨ͠ޙͷը໘΋ςετͰ͖Δ
    w ·ͩ·ͩൃల్্ͳͷͰࠓޙʹظ଴ ·ͱΊ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
46. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ