Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
nds_8_reftest.pdf
Search
ooooooo_q
November 14, 2015
Programming
410
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
nds_8_reftest.pdf
ooooooo_q
November 14, 2015
Transcript
42 slides
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
More Decks by ooooooo_q
See All by ooooooo_q
Gitlab.comで見つけたXSSの話
ooooooo_q
0
370
JSONをパースする.pdf
ooooooo_q
0
160
xlsx出力を Live reloadで(仮)
ooooooo_q
0
440
A-Frameを使って Mobile VRを公開する
ooooooo_q
1
410
Other Decks in Programming
See All in Programming
baseline으로 마이그레이션, 리팩토링 안전하게 맡기기
fornewid
1
980
Zero-Tap Sign-In対応、結局何をすればいいの?
mitohato14
0
2.1k
作れるエンジニアから、価値を届けるエンジニアへ
ryunakayama
1
290
Growing PicoRuby's Ecosystem on ESP32
yuuu
2
130
AWS CDKを理解するために公式の定義を深掘って解説してみる / Understanding AWS CDK by Digging into Its Official Definition
akihisaikeda
3
300
SFCで実現する病院・医療システムの動的組み立て式UI
koukimiura
1
180
graphql-ruby を Spinel で速くしようとした話
mtsmfm
0
150
protojson における文字化けの扱い
kazuki1023
0
420
Spec-Driven Development - Why Vaadin Is the Perfect Fit
simas
PRO
0
250
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
aoshi
0
670
Vue.jsで作る空間解析アプリとCapacitorプラグインのData Bridge
hal_spidernight
1
170
AI時代のFlutter品質設計 — アプリ品質を守るQuality Layers
omatty198
0
380
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
The Curious Case for Waylosing
cassininazir
1
610
The Art of Programming - Codeland 2020
erikaheidi
57
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
25k
Accessibility Awareness
sabderemane
1
300
How Software Deployment tools have changed in the past 20 years
geshan
3
35k
How to build a perfect <img>
jonoalderson
1
6.2k
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.3k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.4k
Building Flexible Design Systems
yeseniaperezcruz
330
41k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
8.2k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
660