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

F4d37a67ce86b2f962c79d73a9127d3c?s=47 fortkle
May 22, 2017

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

F4d37a67ce86b2f962c79d73a9127d3c?s=128

fortkle

May 22, 2017
Tweet

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ͷଞʹOPEFNPEVMFTʹΑΔ$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ϦάϨογϣϯςετ