Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
nds_8_reftest.pdf
ooooooo_q
November 14, 2015
Programming
0
240
nds_8_reftest.pdf
ooooooo_q
November 14, 2015
Tweet
Share
More Decks by ooooooo_q
See All by ooooooo_q
Gitlab.comで見つけたXSSの話
ooooooo_q
0
300
JSONをパースする.pdf
ooooooo_q
0
68
xlsx出力を Live reloadで(仮)
ooooooo_q
0
280
A-Frameを使って Mobile VRを公開する
ooooooo_q
1
310
Other Decks in Programming
See All in Programming
Get Ready for Jakarta EE 10
ivargrimstad
0
2.5k
書籍『良いコード/悪いコードで学ぶ設計入門』でエンジニアリングの当たり前を変える
minodriven
3
1.1k
WindowsコンテナDojo:第2回 Windowsコンテナアプリのビルド、公開、デプロイ
oniak3ibm
PRO
0
150
近況PHP / PHP in now a days
uzulla
4
1.8k
Monadic Java
mariofusco
4
260
TechFeed Conference 2022 - Kotlin Experimental
jmatsu
0
810
Better Reliability through Observability (and Experimentation)
ksatirli
PRO
1
270
競プロへの誘 -いざな-
u76ner
0
370
GraphQL+KMM開発でわかったこと / What we learned from GraphQL+KMM development
kubode
0
130
質とスピード(2022春版、質疑応答用資料付き) / Quality and Speed 2022 Spring Edition
twada
PRO
29
18k
脱オブジェクト指向講座(5分LT資料)
kishida
8
11k
How useEvent would change our applications
koba04
1
1.7k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1351
200k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
Bash Introduction
62gerente
596
210k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
What's new in Ruby 2.0
geeforr
336
30k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
Bootstrapping a Software Product
garrettdimon
295
110k
Six Lessons from altMBA
skipperchong
14
1.3k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Transcript
REFTEST-RUNNERͰ UIͷREVIEWΛ NDS in Niigata #8 @ooooooo_q 1
!PPPPPPP@Rʢͳͳ͓͘ʣ झຯͰηΩϡϦςΟ େମKT ϑϩϯτΤϯυ αʔόαΠυ 2
։ൃٕज़ +4ʹΑΔ41"ͷ։ൃ .7 ʹΑΔઃܭ ࣗಈςετ ։ൃϑϩʔ ίʔυϨϏϡʔ $*ʢܧଓతΠϯςάϨʔγϣϯʣ (*5'-08 (*5)6#'-08
લఏࣝ 3
6*ͷϨϏϡʔ Ͳ͏ͯ͠·͔͢ʁ 4
ʼ6*ͷϨϏϡʔͲ͏ͯ͠·͢ʁ ΩϟϓνϟΛͷͤͯΒ͏ ίʔυελΠϧͱಈ࡞ΛνΣοΫ ίʔυελΠϧͷΈνΣοΫ ϨϏϡʔ͍ͯ͠ͳ͍PS͢ΔจԽ͕ͳ͍ ʜʜ 5
ίʔυελΠϧͷνΣοΫͰ͖Δ ίʔυͷมԽͱ6*ͷมԽͲ͏݁ͼ͍͍ͭͯΔʁ $44ଞͷͱ͜ΖʹӨڹ͠ͳ͍ʁ ΫϩεϒϥβͰͪΌΜͱಈ͘ʁ 6
Ωϟϓνϟͷ%*''Ͱ ݟ͍ͨʂʂ 7
3&'5&45 36//&3 8
3&'5&4536//&3 OQNͰ͞Ε͍ͯΔOPEFKT༻Ϟδϡʔϧ !B[V͞Μ࡞ OQNHJOTUBMMSFGUFTUSVOOFS OPEFKTWܥҎ্͕ඞཁ 9
“ SFGUFTUSVOOFSͱ͍͏ϒϥβͰඳը༰ϨΠΞ τͱ͍ͬͨදࣔ݁ՌΛςετ͢ΔͨΊͷϥΠϒϥϦΛ ࡞Γ·ͨ͠ɻ ཁૉٕज़ͱͯ͠ϒϥβɺ8FC%SJWFS"1*ɺϨϯμ ϦϯάΩϟϓνϟɺը૾%J⒎ͱ͍͏ײ͡Ͱ͢ɻ ϒϥβͰϏδϡΞϧςετΛ͢Δreftest-runnerΛ࡞ͬͨ http://efcl.info/2015/05/14/reftest-runner/ 10
\ OBNFSFGUFTUSVOOFS BVUIPSB[V FNBJMB[VDJBP!HNBJMDPN IPNFQBHFIUUQTHJUIVCDPNB[VSFGUFTUSVOOFS MJDFOTF.*5
WFSTJPO EFTDSJQUJPO3FGUFTUSVOOFSXJUI8FC%SJWFS"1*z ʜ 11 QBDLBHFKTPO͔Βൈਮ
ʜ EFQFOEFODJFT\ CMJOLEJGG? CMVFCJSE? EBUFGPSNBU? ʜ ʜ
PQUJPOBUPS? SFGUFTUMJTUQBSTFS? TFMFOJVNEPXOMPBE? TFMFOJVNXFCESJWFS? ^ 12
#-*/,%*'' :BIPPࣾͷը૾ൺֱπʔϧ ̎ͭͷը૾Λൺֱͯ͠ɺEJ⒎͕͋Δͱ͜Ζ͘ͳΔ 13 https://github.com/yahoo/blink-diff
8&#%3*7&3 㲈TFMFOJVN OPEFKTͳͲ͔ΒϒϥβΛૢ࡞Ͱ͖Δ *&ɺ'JSFGPYɺ$ISPNFɺ4BGBSJɺ0QFSBɺ 1IBOUPN+4ͳͲͷϒϥβΛαϙʔτ 14
15 reftest-runner browser A browser B capture A (canvas) output
png webdriver webdriver static server blink-diff capture B (canvas) URL A, URL B
هड़ྫ 16
ଞ ΩϟϓνϟΛऔΔλΠϛϯάΛඇಉظʹͰ͖Δ IUNMλάʹΫϥεΛ͚͓͍ͭͯͯɺ֎͢ ֎෦63-ࢦఆͰ͖Δ VTF&YUFSNBM4FSWFS DMJ͔ΒΑΓOPEFKT͔Βͷݺͼग़͠ਪ CMJOLEJ⒎ͷPQUJPOͤΔΑ͏ʹͳΔ 17
3&'5&45 18
3&'5&45 ϦϑΝϨϯεςετ ϒϥβ։ൃ͚ͷٕज़ ςετ༻ͱϦϑΝϨϯε༻ͷϑΝΠϧΛͦΕͧΕ༻ҙ ผʑͷػೳΛͬͯɺಉ͡ද͕ࣔग़Δ͜ͱΛ֬ೝ͢Δ IUUQBEPCFHJUIVCJPXFCQMBUGPSNQSFTFOUBUJPOT UFTUUXGIPXUPXSJUFBSFGUFTUKQ 19
“ ը૾ൺֱϕʔεͷςετมԽʹऑ͘อक͕େม ͳͷͰɺҰ΄Ͳલʹ3FGUFTUTͱݺΕΔ৽͠ ͍λΠϓͷςετ͕αϙʔτ͞Εͨ -- ͷఉࢣ - steps to phantasien
http://steps.dodgson.org/b/2012/05/20/gardening-with-canaries/ 20
3&'5&4536//&3 '03 6*3&7*&8 21
22 reftest-runner git push ci runner pull request add png
files output png
ʜ%*'' 23
ݟ͍ͨͷϒϥϯνؒͷ%*'' ϚʔδઌͷϒϥϯνͱͷEJ⒎͕ཉ͍͠ ෳϒϥϯν͕ಉ࣌ʹଘࡏ͠ͳ͍ͱ͍͚ͳ͍ $*্ͰҰͭͷϒϥϯν͔͔͋ͭ͑͠ͳ͍ ࣗࣗΛίϐʔͤ͞Α͏ STZOD HJUJHOPSF HJUDIFDLPVU 24
࣮ԋ (BACKBONE.JS+GITHUB+CIRCLECI) https://github.com/ooooooo-q/reftest-branch-sample 25
ςετ͍ͨ͠ STATEҰͭʁ 26
45"5&ΛΓସ͑Δʹ %#αʔόͷσʔλΛςετͷͨͼʹΓସ͑ "1*ͷϞοΫαʔόΛཱͯͯΓସ͑ ςετίʔυΛೖΕͯϏϧυ࣌ʹΓସ͑ ʜ 27
ݟ͍ͨͷ 7*&8ͱ45"5&ͷ Έ߹Θͤ ʜ'-69 28
3&'5&4536//&3 8*5)'-69 '03 6*3&7*&8 29
FLUXͱͷΈ߹Θͤ ඞཁͳͷ63-ͱςετσʔλͷΈ߹Θͤ 'MVYͰ͋Εσʔλ͕Ͳ͔͜Βདྷ͍ͯΔ͔Θͳ͍ SFUFTUSVOOFSతʹ63-͔ΒͤΔͱָ MPDBUJPOIBTI l EBUBAFODPEF63*$PNQPOFOU +40/4USJOHJGZ EBUB Az
30
࣮ԋʢؒʹ߹͍·ͤΜͰͨ͠ʣ react.js 31
6* Πϕϯτ υϝΠϯ VOJUUFTU VOJUUFTU SFGUFTU SFWJFX &&UFTU
3&(3&44*0/ 33
ςετͷੑ࣭ VOJUUFTUͱҧͬͯಉ͑͡Λอূ͠ͳ͍ SFGUFTUͦͷͷͱ͍ํ͕ҧ͏ 6*͕ͪΐͬͱมΘΔͨͼʹςετΛॻ͖͢ͷਏ͍ ਓ͕ݟͯ0,ͳΒେମ0,ʁ 34
3&'5&4536//&3 '03 6*3&7*&8 "/%(*5'-08 35
36 master development feature branch A feature branch B ػೳ͝ͱͷϚʔδ
ϦϦʔεϚʔδ
ϦϦʔε༰͕Ѳ͍͢͠ ʜΤϯδχΞ͡Όͳͯ͘ ϨϏϡʔʹࢀՃͰ͖Δʜ 37
PROBLEM? 38
ςετͮ͠Β͍༰ ϚεΦʔό࣌ͷσβΠϯมߋͳͲ $44Ξχϝʔγϣϯͷಈ࡞ ςετ࣌ͷॲཧΛ+4ଆʹॻ͘ SFGUFTUSVOOFSΛಈըʹରԠͤ͞Δʜʁ ςετͱͯ͠ΦʔόεϖοΫʹͳΓ͕ͪ 39
ڥߏங $*αʔό༻ͷڥߏங͍͠ ̎ͭͷϒϥϯνΛڞଘ͢Δϊϋ͕ಛघ +4ͷϏϧυγεςϜߏ͕བྷΉ ෳϒϥβͷڥߏங "NB[PO-BNEBXFCIPPLͰઐ༻αʔόʹඈ͢ TFMFOJVN(SJEͱ͔4BVDF-BCTͱ͔ 40
ςετͷอक '-69ͷͱ͖ɺશମͷTUBUFΛຖճهड़͢Δʁ ͏ςετσʔλϚʔδݩʁϚʔδઌʁ σʔλߏ͕มΘΔͱ࣮ߦͰ͖ͳ͍ $PNQPOFOU͝ͱʹςετͰ͖Ε ʜʜ·ͩΘ͔Βͳ͍ 41
REFTEST-RUNNERΛͬͯ UI REVIEWָ͕ʹͳΔ͔ ͠Εͳ͍ ͕·ͩͪΐͬͱԕ͍ 42