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
350
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
340
JSONをパースする.pdf
ooooooo_q
0
140
xlsx出力を Live reloadで(仮)
ooooooo_q
0
400
A-Frameを使って Mobile VRを公開する
ooooooo_q
1
380
Other Decks in Programming
See All in Programming
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
danielsogl
0
120
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.6k
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
180
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
実践 Dev Containers × Claude Code
touyu
1
180
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
130
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.7k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
980
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
460
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
360
AHC051解法紹介
eijirou
0
520
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.6k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
A designer walks into a library…
pauljervisheath
207
24k
Building Adaptive Systems
keathley
43
2.7k
For a Future-Friendly Web
brad_frost
179
9.9k
Visualization
eitanlees
146
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
760
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Documentation Writing (for coders)
carmenintech
73
5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Bash Introduction
62gerente
614
210k
Adopting Sorbet at Scale
ufuk
77
9.5k
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