Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
BackstopJSで始める CSSリグレッションテスト / backstopjs-css-test
fortkle
May 22, 2017
Technology
0
1.4k
BackstopJSで始める CSSリグレッションテスト / backstopjs-css-test
fortkle
May 22, 2017
Tweet
Share
More Decks by fortkle
See All by fortkle
fortkle
1
470
fortkle
0
340
fortkle
2
1.5k
fortkle
8
4.5k
fortkle
3
310
fortkle
2
210
fortkle
4
5.3k
fortkle
0
1.7k
fortkle
7
2.7k
Other Decks in Technology
See All in Technology
hmatsu47
1
170
michigari
0
230
oracle4engineer
2
500
ocise
0
120
akakou
2
380
hacker2202
0
100
jaguar_imo
0
120
kaga
0
300
halhira
1
120
tj8000rpm
0
230
legalforce
PRO
0
180
prog893
0
140
Featured
See All Featured
matthewcrist
73
7.5k
brad_frost
157
6.5k
marcelosomers
221
15k
chrislema
231
16k
trallard
15
820
bkeepers
PRO
408
58k
destraynor
146
19k
morganepeng
20
1.3k
nonsquared
81
3.4k
reverentgeek
27
2.1k
imathis
479
150k
myddelton
109
11k
Transcript
ՈͷຖΛͬͱসإʹɻ 1)1#-5 #BDLTUPQ+4Ͱ࢝ΊΔ $44ϦάϨογϣϯςετ
ࣗݾհ ߴߊ !GPSULMF !GPSULMF ίωώτגࣜձࣾͰͨΒ͘1)1FSɻ ࠷ۙ+BWBTDSJQUͱ$44ͷൺ͕ଟ͘ͳ͖ͬͯͨɻ
ࣗݾհ ߴߊ !GPSULMF !GPSULMF ίωώτגࣜձࣾͰͨΒ͘1)1FSɻ ࠷ۙ+BWBTDSJQUͱ $44ͷൺ͕ଟ͘ͳ͖ͬͯͨɻ
ࣗݾհ ߴߊ !GPSULMF !GPSULMF ίωώτגࣜձࣾͰͨΒ͘1)1FSɻ ࠷ۙ+BWBTDSJQUͱ$44ͷൺ͕ଟ͘ͳ͖ͬͯͨɻ $44
1)1#-5Ͱ͕͢ ࠓ$44ͷΛ͠·͢ɻ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
Έͳ͞Μ$44ॻ͍ͯ·͔͢ʁ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
$44ͱ͍͑ʜ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
w ཧ͞Ε͍ͯͳ͍ৄࡉ w ܾ·͍ͬͯͳ͍ఆٛॴʗ໋໊نଇͷํ w 6*ͷมߋͷʹগͣͭ͠૿͑ͯ͘Δະ༻ελΠϧ ΧΦεʹͳΓ͍͢ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
w 8FCαʔϏεΛ։ൃ͍ͯ͠ΔνʔϜͳΒɺ)5.-$44 ΛΤϯδχΞ͕୲͢Δ͜ͱΑ͋͘Δʢʁʣ w ࢲ͕ͦ͏Ͱ͢ w ʮԶͨͪงғؾͰ$44Λ͍ͬͯΔʯ w ͳΜͯͷઈରྑ͘ͳ͍ʂ w
ͷͰͪΌΜͱษڧ͠·͠ΐ͏ʗ͠·ͨ͠ 1)1FS$44ͱԑΛΕΔΘ͚Ͱͳ͍ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
ษڧͯ͠ʮྑ͍$44ʯ͕Կ͔ Θ͔͖ͬͯͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
$44ϦϑΝΫλϦϯάͷํ๏ ϓϩάϥϛϯά΄Ͳॆ࣮͍ͯ͠ͳ͍ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
ͳͷͰࢼߦࡨޡ͠ͳ͕Β $44Λվળ͍͔ͯ͘͠͠ͳ͍ʂ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
վળʁ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
w ʮ͜Εͬͯͳͦ͞͏ͩͳʂʯ w ʮ೦ͷͨΊHSFQͯ͠ιʔείʔυʹͳ͍͜ͱΛ֬ೝʂʯ w ʮΑ͠আʂʯ Αʙ͠ʂͬͯͳ͍ελΠϧফͧ͢ʂ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
w ʮίϯϙʔωϯτ่͕Εͯ·͢ʂʯ w ʮελΠϧ͕ͨͬͯͳ͍ϖʔδ͕͋Γ·͢ʯ w ಈతʹηϨΫλΛࢦఆ͍ͯͨ͠Γʜ ͋ΕΕʜ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
$44ͷվળ͍͠ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
w ςετͳ͠ͷϦϑΝΫλϦϯάා͍ w ϦϑΝΫλϦϯάલͱޙΛൺֱͯ͠ఆ֎ͷҧ͍͕ ൃੜ͍ͯ͠ͳ͍͜ͱΛ֬ೝ͍ͨ͠ w ग़དྷΔ͜ͱͳΒखಈආ͚͍ͨ ϦϑΝΫλϦϯά͢ΔͳΒςετ͕ཉ͍͠ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
w มߋͷલޙͰεΫγϣΛऔͬͯࠩΛνΣοΫͰ͖Δ ϏδϡΞϧϦάϨογϣϯςετπʔϧ w $44͕ҙਤ่ͤͣΕ͍ͯͳ͍͔νΣοΫͰ͖Δ w ݄ͷେ෯ͳόʔδϣϯΞοϓ W Ͱ ͔ͳΓ͍͘͢ͳͬͨ
w HVMQ͔Βͷશ٫ w KTPOͷଞʹOPEFNPEVMFTʹΑΔ$POpHαϙʔτ ͦ͜ͰHBSSJT#BDLTUPQ+4 #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
͜Μͳ෩ʹ͕ࠩݟΕ·͢ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
#BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ มߋલ มߋޙ ࠩ
#BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ มߋલ มߋޙ ࠩ ݟग़͠ͷจݴ͕ มΘ͍ͬͯΔ
#BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ มߋલ มߋޙ ࠩ ը૾͕ʮʯ͔Β ʮωΠϏʔʯʹมΘ͍ͬͯΔ
#BDLTUPQ+4ͷ࢝Ίํ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
w GPSULMFCBDLTUPQKTDTTUFTU w -BSBWFMͰ࡞ͬͨͨͩͷ8FCϖʔδ w ϩάΠϯೝূػೳ͋Γ w ະϩάΠϯɺҰൠϢʔβʔɺཧऀϢʔβʔͰ ݟ͑ํ͕গ͠ҟͳΔ w
ࠂͷΑ͏ʹϥϯμϜʹදࣔ͞ΕΔը૾͕ͰͨΓɺ Ϟʔμϧͷ͋Δϖʔδ͕ଘࡏ αϯϓϧϦϙδτϦΛ࡞ͬͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
w Γ͍ͨ͜ͱ w ֤Ϣʔβʔʢ"ENJO /PSNBM /POMPHJOʣຖʹ ϖʔδ่͕Ε͍ͯͳ͍͔ w 1$ͱϞόΠϧͰϖʔδ่͕Ε͍ͯͳ͍͔ w
ϥϯμϜʹग़ΔࠂಈతͳϞʔμϧͳͲ ͏·͘ରॲ͍ͨ͠ αϯϓϧϦϙδτϦΛ࡞ͬͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
w Γ͍ͨ͜ͱ w ֤Ϣʔβʔʢ"ENJO /PSNBM /POMPHJOʣຖʹ ϖʔδ่͕Ε͍ͯͳ͍͔ w 1$ͱϞόΠϧͰϖʔδ่͕Ε͍ͯͳ͍͔ w
ϥϯμϜʹग़ΔࠂಈతͳϞʔμϧͳͲ ͏·͘ରॲ͍ͨ͠ αϯϓϧϦϙδτϦΛ࡞ͬͨ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ ͜ͷαΠτΛରʹ #BDLTUPQ+4ΛͬͯςετΛॻ͍ͨ
ςετγφϦΦΛॻ͘ ϦϑΝΫλϦϯάલͷσʔλʢ3FGFSFODFʣΛอଘ ϦϑΝΫλϦϯάޙͷσʔλʢ5FTUʣΛอଘ͠ 3FGFSFODFͱൺֱ͢Δ ࠩͱͯ͠ग़ͨ5FTU͕ҙਤͨ͠ͷͰ͋Ε 3FGFSFODFʹऔΓࠐΉʢࠓճ͜͜লུʣ #BDLTUPQ+4ͷ࢝Ίํ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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 ςετέʔεશମʹ͔͔ΘΔ ઃఆΛهड़͢Δ
ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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$ͱϞόΠϧʣ
ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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 } ςετγφϦΦΛΨΨοͱ ಡΈࠐΉػߏΛ࣮ߦͯ͠
ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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ʹ৯ΘͤΔ
ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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"ͷઃఆϩάΠϯʣ
ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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 ࣮ࡍͷςετγφϦΦ͕ ॻ͔ΕͨϑΝΠϧ
ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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-ʯΛઃఆ
ςετγφϦΦΛॻ͘ʢҰ෦লུʣ #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Ͱલॲཧ
ϦϑΝΫλϦϯάલͷσʔλΛอଘ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶄ $ backstop reference --config=./ backstop.config.js ϦϑΝΫλϦϯάલͷσʔλ ʢ3FGFSFODFʣΛอଘ͢ΔίϚ
ϯυ
ϦϑΝΫλϦϯάલͷσʔλΛอଘ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶄ $ backstop reference --config=./ backstop.config.js ࠷ॳʹॻ͍ͨ CBDLTUPQDPOpHKTΛࢦఆ
ϦϑΝΫλϦϯάલͷσʔλΛอଘ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶄ $ backstop reference --config=./ backstop.config.js ࣮ߦ͕ྃͨ͠Β४උ0,
ʙ৻ॏ͔ͭେʹϦϑΝΫλϦϯάʙ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
ϦϑΝΫλϦϯάޙͷσʔλΛอଘ͠ൺֱ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶅ $ backstop test --config=./ backstop.config.js SFGFSFODF͕UFTUʹ มΘ͚ͬͨͩʂ
ϦϑΝΫλϦϯάޙͷσʔλΛอଘ͠ൺֱ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶅ $ backstop test --config=./ backstop.config.js ࣮ߦ͕ऴΘΔͱɾɾɾ
ϦϑΝΫλϦϯάޙͷσʔλΛอଘ͠ൺֱ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶅ Ϩϙʔτ͕ ϒϥβͰ։͘
ϦϑΝΫλϦϯάޙͷσʔλΛอଘ͠ൺֱ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ #BDLTUPQ+4ͷ࢝Ίํᶅ Ϩϙʔτ͕ ϒϥβͰ։͘
wಈతͳཁૉʢࠂϥϯμϜʹදࣔ͞ΕΔը૾ʣ͕ݪҼ wαϯϓϧϦϙδτϦͰ$BTQFSKTΛͬͯআ֎ઃఆΛ ͨ͠Γͯ͠'BJMFE݅ʹͳΔΑ͏ʹͯ͋͠Γ·͢ʂ wͦͷଞɺಈ࡞͕ෆ҆ఆͳͱ͖͕ͨ·ʹ͙͋ͬͯ݅Β͍ 'BJMFEʹͳΔ͜ͱ͕͋Γ·͕͢͜͜ࠓޙʹظʜ w෦Ͱར༻͍ͯ͠Δ1IBOUPN+4ͷ།Ұͷϝϯςφ͕ ࠷ۙҾୀͯ͠͠·ͬͨͷͰ)FBEMFTT$ISPNFαϙʔτ ͷಈΛࢹதʜ 'BJMFE݅ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
w #BDLTUPQ+4Λ͏ͱݱ࣮తͳϨϕϧͷ $44ϦάϨογϣϯςετ͕ॻ͚Δʂ w $BTQFS+4Λ͑ϖʔδಡΈࠐΈޙʹ ৭ʑΫϦοΫͨ͠Γೖྗͨ͠ޙͷը໘ςετͰ͖Δ w ·ͩ·ͩൃల్্ͳͷͰࠓޙʹظ ·ͱΊ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ #BDLTUPQ+4Ͱ࢝ΊΔ$44ϦάϨογϣϯςετ