Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
nds_8_reftest.pdf
Search
ooooooo_q
November 14, 2015
Programming
0
290
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
320
JSONをパースする.pdf
ooooooo_q
0
110
xlsx出力を Live reloadで(仮)
ooooooo_q
0
360
A-Frameを使って Mobile VRを公開する
ooooooo_q
1
360
Other Decks in Programming
See All in Programming
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
660
Scan with Decoupled Look-back and Onesweep Radix Sort
shocker_0x15
0
150
Vue :: Better Testing 2024
up1
1
420
Why I Choose NetBeans for Jakarta EE
ivargrimstad
0
790
Quarto Clean Theme
nicetak
0
220
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
410
Honoの来た道とこれから
yusukebe
6
870
メルカリ ハロ アプリの技術スタック
atsumo
2
880
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
200
Повторное использование кода в ML: почему ML-пайплайны могут помочь?
lamodatech
0
380
テスト駆動開発✅️
akitoshiga
1
170
空間の中でアイドルとレッスンする技術 - 1st "Vision" / Spatial Lesson technologies with my idol - 1st "Vision"
banjun
PRO
0
250
Featured
See All Featured
What's new in Ruby 2.0
geeforr
342
31k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Why Our Code Smells
bkeepers
PRO
334
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
31
1.7k
Optimizing for Happiness
mojombo
375
69k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.8k
GraphQLとの向き合い方2022年版
quramy
43
13k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Statistics for Hackers
jakevdp
796
220k
Adopting Sorbet at Scale
ufuk
73
9k
4 Signs Your Business is Dying
shpigford
180
21k
The Cult of Friendly URLs
andyhume
77
6k
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