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

Slide 1

Slide 1 text

Ո଒ͷຖ೔Λ΋ͬͱসإʹɻ 1)1#-5 #BDLTUPQ+4Ͱ࢝ΊΔ $44ϦάϨογϣϯςετ

Slide 2

Slide 2 text

ࣗݾ঺հ ߴ໺෱ߊ !GPSULMF !GPSULMF ίωώτגࣜձࣾͰ͸ͨΒ͘1)1FSɻ ࠷ۙ͸+BWBTDSJQUͱ$44ͷൺ཰͕ଟ͘ͳ͖ͬͯͨɻ

Slide 3

Slide 3 text

ࣗݾ঺հ ߴ໺෱ߊ !GPSULMF !GPSULMF ίωώτגࣜձࣾͰ͸ͨΒ͘1)1FSɻ ࠷ۙ͸+BWBTDSJQUͱ $44ͷൺ཰͕ଟ͘ͳ͖ͬͯͨɻ

Slide 4

Slide 4 text

ࣗݾ঺հ ߴ໺෱ߊ !GPSULMF !GPSULMF ίωώτגࣜձࣾͰ͸ͨΒ͘1)1FSɻ ࠷ۙ͸+BWBTDSJQUͱ$44ͷൺ཰͕ଟ͘ͳ͖ͬͯͨɻ $44

Slide 5

Slide 5 text

1)1#-5Ͱ͕͢ ࠓ೔͸$44ͷ࿩Λ͠·͢ɻ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 6

Slide 6 text

Έͳ͞Μ$44ॻ͍ͯ·͔͢ʁ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 7

Slide 7 text

$44ͱ͍͑͹ʜ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 8

Slide 8 text

w ؅ཧ͞Ε͍ͯͳ͍ৄࡉ౓ w ܾ·͍ͬͯͳ͍ఆٛ৔ॴʗ໋໊نଇͷํ਑ w 6*ͷมߋͷ౓ʹগͣͭ͠૿͑ͯ͘Δະ࢖༻ελΠϧ ΧΦεʹͳΓ΍͍͢ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 9

Slide 9 text

w 8FCαʔϏεΛ։ൃ͍ͯ͠ΔνʔϜͳΒɺ)5.-$44  ΛΤϯδχΞ͕୲౰͢Δ͜ͱ͸Α͋͘Δʢʁʣ w ࢲ͕ͦ͏Ͱ͢ w ʮԶͨͪ͸งғؾͰ$44Λ΍͍ͬͯΔʯ w ͳΜͯͷ͸ઈରྑ͘ͳ͍ʂ w ͷͰͪΌΜͱษڧ͠·͠ΐ͏ʗ͠·ͨ͠ 1)1FS΋$44ͱԑΛ੾ΕΔΘ͚Ͱ͸ͳ͍ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 10

Slide 10 text

ษڧͯ͠ʮྑ͍$44ʯ͕Կ͔͸  Θ͔͖ͬͯͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 11

Slide 11 text

$44ϦϑΝΫλϦϯάͷํ๏࿦͸  ϓϩάϥϛϯά΄Ͳॆ࣮͍ͯ͠ͳ͍ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 12

Slide 12 text

ͳͷͰࢼߦࡨޡ͠ͳ͕Β  $44Λվળ͍͔ͯ͘͠͠ͳ͍ʂ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 13

Slide 13 text

վળʁ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 14

Slide 14 text

w ʮ͜Ε࢖ͬͯͳͦ͞͏ͩͳʂʯ w ʮ೦ͷͨΊHSFQͯ͠ιʔείʔυʹͳ͍͜ͱΛ֬ೝʂʯ w ʮΑ͠࡟আʂʯ Αʙ͠ʂ࢖ͬͯͳ͍ελΠϧফͧ͢ʂ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 15

Slide 15 text

w ʮίϯϙʔωϯτ่͕Εͯ·͢ʂʯ w ʮελΠϧ͕౰ͨͬͯͳ͍ϖʔδ͕͋Γ·͢ʯ w ಈతʹηϨΫλΛࢦఆ͍ͯͨ͠Γʜ ͋ΕΕʜ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 16

Slide 16 text

$44ͷվળ͸೉͍͠ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 17

Slide 17 text

w ςετͳ͠ͷϦϑΝΫλϦϯά͸ා͍ w ϦϑΝΫλϦϯάલͱޙΛൺֱͯ͠૝ఆ֎ͷҧ͍͕  ൃੜ͍ͯ͠ͳ͍͜ͱΛ֬ೝ͍ͨ͠ w ग़དྷΔ͜ͱͳΒखಈ͸ආ͚͍ͨ ϦϑΝΫλϦϯά͢ΔͳΒςετ͕ཉ͍͠ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 18

Slide 18 text

w มߋͷલޙͰεΫγϣΛऔͬͯࠩ෼ΛνΣοΫͰ͖Δ  ϏδϡΞϧϦάϨογϣϯςετπʔϧ w $44͕ҙਤ่ͤͣΕ͍ͯͳ͍͔νΣοΫͰ͖Δ w ೥݄ͷେ෯ͳόʔδϣϯΞοϓ W Ͱ  ͔ͳΓ࢖͍΍͘͢ͳͬͨ w HVMQ͔Βͷ׬શ୤٫ w KTPOͷଞʹOPEFNPEVMFTʹΑΔ$POpH΋αϙʔτ ͦ͜ͰHBSSJT#BDLTUPQ+4 #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 19

Slide 19 text

͜Μͳ෩ʹࠩ෼͕ݟΕ·͢ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 20

Slide 20 text

#BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ มߋલ มߋޙ ࠩ෼

Slide 21

Slide 21 text

#BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ มߋલ มߋޙ ࠩ෼ ݟग़͠ͷจݴ͕ มΘ͍ͬͯΔ

Slide 22

Slide 22 text

#BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ มߋલ มߋޙ ࠩ෼ ը૾͕ʮ྘ʯ͔Β  ʮωΠϏʔʯʹมΘ͍ͬͯΔ

Slide 23

Slide 23 text

#BDLTUPQ+4ͷ࢝Ίํ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 24

Slide 24 text

w GPSULMFCBDLTUPQKTDTTUFTU w -BSBWFMͰ࡞ͬͨͨͩͷ8FCϖʔδ w ϩάΠϯೝূػೳ͋Γ w ະϩάΠϯɺҰൠϢʔβʔɺ؅ཧऀϢʔβʔͰ  ݟ͑ํ͕গ͠ҟͳΔ w ޿ࠂͷΑ͏ʹϥϯμϜʹදࣔ͞ΕΔը૾͕ͰͨΓɺ  Ϟʔμϧͷ͋Δϖʔδ͕ଘࡏ αϯϓϧϦϙδτϦΛ࡞ͬͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ςετγφϦΦΛॻ͘ ϦϑΝΫλϦϯάલͷσʔλʢ3FGFSFODFʣΛอଘ ϦϑΝΫλϦϯάޙͷσʔλʢ5FTUʣΛอଘ͠  3FGFSFODFͱൺֱ͢Δ ࠩ෼ͱͯ͠ग़ͨ5FTU͕ҙਤͨ͠΋ͷͰ͋Ε͹  3FGFSFODFʹऔΓࠐΉʢࠓճ͜͜͸লུʣ #BDLTUPQ+4ͷ࢝Ίํ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 28

Slide 28 text

ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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 ςετέʔεશମʹ͔͔ΘΔ ઃఆΛهड़͢Δ

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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"ͷઃఆ΍ϩάΠϯ౳ʣ

Slide 33

Slide 33 text

ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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 ࣮ࡍͷςετγφϦΦ͕  ॻ͔ΕͨϑΝΠϧ

Slide 34

Slide 34 text

ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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-ʯΛઃఆ

Slide 35

Slide 35 text

ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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Ͱલॲཧ

Slide 36

Slide 36 text

ϦϑΝΫλϦϯάલͷσʔλΛอଘ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶄ $ backstop reference --config=./ backstop.config.js ϦϑΝΫλϦϯάલͷσʔλ  ʢ3FGFSFODFʣΛอଘ͢ΔίϚ ϯυ

Slide 37

Slide 37 text

ϦϑΝΫλϦϯάલͷσʔλΛอଘ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶄ $ backstop reference --config=./ backstop.config.js ࠷ॳʹॻ͍ͨ CBDLTUPQDPOpHKTΛࢦఆ

Slide 38

Slide 38 text

ϦϑΝΫλϦϯάલͷσʔλΛอଘ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶄ $ backstop reference --config=./ backstop.config.js ࣮ߦ͕׬ྃͨ͠Β४උ0,

Slide 39

Slide 39 text

ʙ৻ॏ͔ͭେ୾ʹϦϑΝΫλϦϯάʙ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 40

Slide 40 text

ϦϑΝΫλϦϯάޙͷσʔλΛอଘ͠ൺֱ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶅ $ backstop test --config=./ backstop.config.js SFGFSFODF͕UFTUʹ  มΘ͚ͬͨͩʂ

Slide 41

Slide 41 text

ϦϑΝΫλϦϯάޙͷσʔλΛอଘ͠ൺֱ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶅ $ backstop test --config=./ backstop.config.js ࣮ߦ͕ऴΘΔͱɾɾɾ

Slide 42

Slide 42 text

ϦϑΝΫλϦϯάޙͷσʔλΛอଘ͠ൺֱ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶅ Ϩϙʔτ͕ ϒϥ΢βͰ։͘

Slide 43

Slide 43 text

ϦϑΝΫλϦϯάޙͷσʔλΛอଘ͠ൺֱ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶅ Ϩϙʔτ͕ ϒϥ΢βͰ։͘

Slide 44

Slide 44 text

wಈతͳཁૉʢ޿ࠂ΍ϥϯμϜʹදࣔ͞ΕΔը૾ʣ͕ݪҼ wαϯϓϧϦϙδτϦͰ͸$BTQFSKTΛ࢖ͬͯআ֎ઃఆΛ  ͨ͠Γͯ͠'BJMFE݅ʹͳΔΑ͏ʹͯ͋͠Γ·͢ʂ wͦͷଞɺಈ࡞͕ෆ҆ఆͳͱ͖͕ͨ·ʹ͙͋ͬͯ݅Β͍  'BJMFEʹͳΔ͜ͱ͕͋Γ·͕͢͜͜͸ࠓޙʹظ଴ʜ w಺෦Ͱར༻͍ͯ͠Δ1IBOUPN+4ͷ།Ұͷϝϯςφ͕  ࠷ۙҾୀͯ͠͠·ͬͨͷͰ)FBEMFTT$ISPNFαϙʔτ  ͷಈ޲Λ஫ࢹதʜ 'BJMFE݅ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 45

Slide 45 text

w #BDLTUPQ+4Λ࢖͏ͱݱ࣮తͳϨϕϧͷ  $44ϦάϨογϣϯςετ͕ॻ͚Δʂ w $BTQFS+4Λ࢖͑͹ϖʔδಡΈࠐΈޙʹ  ৭ʑΫϦοΫͨ͠Γೖྗͨ͠ޙͷը໘΋ςετͰ͖Δ w ·ͩ·ͩൃల్্ͳͷͰࠓޙʹظ଴ ·ͱΊ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ

Slide 46

Slide 46 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ