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ϦάϨογϣϯςετ