Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

fortkle
May 22, 2017

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

fortkle

May 22, 2017
Tweet

More Decks by fortkle

Other Decks in Technology

Transcript

  1. w GPSULMFCBDLTUPQKTDTTUFTU w -BSBWFMͰ࡞ͬͨͨͩͷ8FCϖʔδ w ϩάΠϯೝূػೳ͋Γ w ະϩάΠϯɺҰൠϢʔβʔɺ؅ཧऀϢʔβʔͰ
 ݟ͑ํ͕গ͠ҟͳΔ w

    ޿ࠂͷΑ͏ʹϥϯμϜʹදࣔ͞ΕΔը૾͕ͰͨΓɺ
 Ϟʔμϧͷ͋Δϖʔδ͕ଘࡏ αϯϓϧϦϙδτϦΛ࡞ͬͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
  2. w ΍Γ͍ͨ͜ͱ w ֤Ϣʔβʔʢ"ENJO /PSNBM /POMPHJOʣຖʹ
 ϖʔδ่͕Ε͍ͯͳ͍͔ w 1$ͱϞόΠϧͰϖʔδ่͕Ε͍ͯͳ͍͔ w

    ϥϯμϜʹग़Δ޿ࠂ΍ಈతͳϞʔμϧͳͲ΋
 ͏·͘ରॲ͍ͨ͠ αϯϓϧϦϙδτϦΛ࡞ͬͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
  3. w ΍Γ͍ͨ͜ͱ w ֤Ϣʔβʔʢ"ENJO /PSNBM /POMPHJOʣຖʹ
 ϖʔδ่͕Ε͍ͯͳ͍͔ w 1$ͱϞόΠϧͰϖʔδ่͕Ε͍ͯͳ͍͔ w

    ϥϯμϜʹग़Δ޿ࠂ΍ಈతͳϞʔμϧͳͲ΋
 ͏·͘ରॲ͍ͨ͠ αϯϓϧϦϙδτϦΛ࡞ͬͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ ͜ͷαΠτΛର৅ʹ
 #BDLTUPQ+4Λ࢖ͬͯςετΛॻ͍ͨ
  4. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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 ςετέʔεશମʹ͔͔ΘΔ ઃఆΛهड़͢Δ
  5. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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$ͱϞόΠϧʣ
  6. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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 } ςετγφϦΦΛΨΨοͱ ಡΈࠐΉػߏΛ࣮ߦͯ͠
  7. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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ʹ৯ΘͤΔ
  8. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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"ͷઃఆ΍ϩάΠϯ౳ʣ
  9. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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 ࣮ࡍͷςετγφϦΦ͕
 ॻ͔ΕͨϑΝΠϧ
  10. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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-ʯΛઃఆ
  11. ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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Ͱલॲཧ