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
Visual Testing in FOLIO-sec
Search
Yosuke Kurami
August 23, 2018
Programming
3
2.2k
Visual Testing in FOLIO-sec
Yosuke Kurami
August 23, 2018
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
TypeScript LSP の今までとこれから
quramy
1
1.2k
フロントエンドテストの育て方
quramy
12
3.6k
App Router 悲喜交々
quramy
8
650
上手に付き合うコンポーネントテスト
quramy
6
2.2k
Patched fetch did not work
quramy
6
720
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.5k
Next.js App Router
quramy
15
3.7k
Fragment Composition of GraphQL
quramy
16
4.2k
reg-viz VRT tools
quramy
4
1.5k
Other Decks in Programming
See All in Programming
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
240
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
130
CSC305 Lecture 04
javiergs
PRO
0
270
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.3k
明日から始めるリファクタリング
ryounasso
0
130
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
820
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
160
Software Architecture
hschwentner
6
2.3k
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
54
9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Making Projects Easy
brettharned
119
6.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Typedesign – Prime Four
hannesfritz
42
2.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Transcript
FOLIOʹը૾ճؼςετΛಋೖ ͨ͠ 2018/8/23 Bonfire Frontend#2
- ݟ ༸ี a.k.a. @Quramy - WebϑϩϯτΤϯυΤϯδχΞ - લʹFOLIOͱ͍͏ωοτূ݊ձࣾʹೖࣾ ࣗݾհ
ಥવͰ͕͢
ը໘ͷςετॻ͍ͯ·͔͢ʁ
- DOMͷΞαʔγϣϯΛॻ͘ͷ໘ - Ͳ͜·ͰΞαʔτ͢Δ͔ɺ։ൃऀ࣍ୈʹͳΓ͕ͪ - Ξαʔτ͕গͳ͚Εɺෆ҆ - Ξαʔτ͕ଟ͗͢Εɺϝϯς͕େม ը໘ςετ͋Δ͋Δ
locale: fr ͷͱ͖ɺԿΛνΣοΫ͠·͔͢ʁ nodeName, textContent, classList શ෦֬ೝ͢Δʁ Ͳ͜·ͰΞαʔτ͠·͔͢ʁ <template> <div
class="greeting"> <div v-if="locale === 'en'"> Good evening, {{name}}. </div> <div v-else-if="locale === 'fr'"> Bon soir, {{name}}. </div> <div v-else>Other...</div> </div> </template>
ʮલճޭͨ͠DOMग़ྗʯΛexpectedʹ͢Εɺ ։ൃऀ͕ΞαʔγϣϯίʔυΛهड़͢Δख͕ؒল͚Δ 4OBQTIPUςετͰָ͕Ͱ͖Δ The latest snapshot (DOM String) The actual
snapshot (DOM String) Update if snapshot is accepted Assertion
DOMϕʔεsnapshotςετಋೖ͕༰қɻ ҰํͰɺDOMϕʔεͰελΠϧͷݕূ͍͠ɻ CSSͷద༻݁Ռ·ͰؚΊͯࣗಈςετͰ͖Δͱخ͍͠ɻ %0.WT*NBHF
͜͜ʹςΩετΛೖΕ·͢ɻ ͻͱͭͷεϥΠυʹ༰Λ٧Ί͗͢ͳ͍Α͏ʹ͠·͠ΐ͏ɻ Կ͏Δ͍͞Α͏Ͱ͕͢ʮ̍ຕͷεϥΠυʹ̍ͭͷҙຯʯ ͕εϥΠυ࡞ΓͷجຊͰ͢ɻ ը૾ͬͨΒ͑͑Μ͚
Ͳ͏Δͷ͔
- UIίϯϙʔωϯτͷΩϟϓνϟը૾ੜ - औಘͨ͠Ωϟϓνϟը૾ͷൺֱݕূ ը૾ճؼςετʹඞཁͳཁૉ
FOLIOͷϑϩϯτΤϯυ React + Reduxߏɻ Reactίϯϙʔωϯτ։ൃͰStorybookΛར༻ɻ ͜ΕΛΘͳ͍खͳ͍ 6*ίϯϙʔωϯτͷΩϟϓνϟը૾ੜ
4UPSZCPPL
- ඳըʹඞཁͳpropsΛ༩͑ΕUIΛ࠶ݱͰ͖Δ Flux / ReduxͷΞʔΩςΫνϟͱ૬ੑ͕Α͍ - ΠϨΪϡϥʔͳέʔεͷݟͨ؆୯ʹ࡞ΕΔ 4UPSZCPPLίϯϙʔωϯτͷςετπʔϧ
Storybook͔ΒΩϟϓνϟը૾Λऔಘ͢Δπʔϧ৭ʑ ex: imageshots / roki / storybook-chrome-screenshot, etc… ※ Ωϟϓνϟऔಘʹ͍ͭͯޙड़
ΩϟϓνϟΛࡱΔͷ༰қ
https://github.com/reg-viz/reg-suit Λར༻ʢ͋Δҙຯࣗલ ը૾ճؼςετͷͨΊͷCLI - ൺֱରͱ͢ΔGit commitͷಛఆ - ը૾ͷࠩΛνΣοΫ͠ɺ݁ՌΛHTMLϨϙʔτͱͯ͠ग़ྗ - ൺֱ݁ՌΛAWS
S3Google Cloud StorageΞοϓϩʔυ - ݁ՌΛSlackGitHub௨ औಘͨ͠Ωϟϓνϟը૾ͷൺֱݕূ
- ReactίϯϙʔωϯτCSSΛมߋͯ͠git push - CIͰStorybookͷ֤story͕Ωϟϓνϟ͞ΕΔ - reg-suitͰը૾ൺֱςετ͕࣮ߦ͞ΕΔ - SlackͱGitLabͷPRʹ௨͕ඈͿ ϫʔΫϑϩʔ·ͱΊ
None
͜͜ʹςΩετΛೖΕ·͢ɻ ͻͱͭͷεϥΠυʹ༰Λ٧Ί͗͢ͳ͍Α͏ʹ͠·͠ΐ͏ɻ Կ͏Δ͍͞Α͏Ͱ͕͢ʮ̍ຕͷεϥΠυʹ̍ͭͷҙຯʯ ͕εϥΠυ࡞ΓͷجຊͰ͢ɻ
ݱͰͷ
ίʔυϕʔεͷมߋʹର͢ΔݟͨͷӨڹ͕ҰྎવͳͷͰɺ ϒϥϯσΟϯά৽ʢ8/8ʹਖ਼ࣜϦϦʔε͠·ͨ͠ʂʣͰ ʹཱͬͨɻ ҰํͰɺҰےೄͰ͍͔ͳ͍՝ු্ɻ ࣮ࡍʹӡ༻ͯ͠Έͯ
ِཅੑޡݕग़(ຊਖ਼͍͠ͷʹɺޡͬͯࠩൃੜ ͱΈͳ͞ΕΔ)͕ଟൃ - ΞηοτಡΈࠐΈͷ͍ӽ͠ - CSSͷద༻ͷ͍ӽ͠ ൃੜͨ͠ᶃεΫγϣ͕ෆ҆ఆ
ը૾ͷಡΈࠐΈલʹεΫγϣ͞Εͯϩΰ͕ܽམ ൵͍ࣦ͠ഊྫͦͷ
webϑΥϯτͷಡΈࠐΈલʹεΫγϣ͞Εͯจࣈ͕ζϨΔ ൵͍ࣦ͠ഊྫͦͷ
PCͱεϚϗ྆ํͷViewportͰεΫγϣΛࡱΔstoryͰɺ Viewportͷมߋʹਵ͢ΔελΠϦϯάܭࢉྃલʹΩϟϓ νϟ͞ΕͯɺຊདྷSP༻ͷΩϟϓνϟ͕PC͚ͷը૾ʹͳͬ ͯ͠·ͬͨɻ ൵͍ࣦ͠ഊྫͦͷ
ൃੜͨ͠ᶄɿ$*͕͍ 1ճpushͯ͠CI͕ճΓ͖Δ·Ͱɺ15Ҏ্ඞཁ
10ఔΛStorybookΩϟϓνϟऔಘ͕Ί͍ͯͨɻ (Ωϟϓνϟରը૾500ఔ) 1ຕ͝ͱʹϒϥβͷϖʔδϩʔυ͕ൃੜ͢Δ࣮Ͱ͋ͬͨ ͨΊɺjsͷධՁ͕࣌ؒਖੵঢ়ଶͰ݁ߏͳϘϦϡʔϜɻ $*͕͍࣌ؒ
ʮ҆ఆͯ͠ྔ࢈͢ΔʯΛߟ͑ͳ͚Εɺͷɻ ҆ఆੑɾੑೳͷ՝ͱʹʮStorybookͷΩϟϓνϟऔಘʯ ʹىҼ͍ͯ͠ΔͨΊɺ͜ͷ෦Λ1͔Βݟ͢͜ͱʹɻ (ॳطଘͷOSSΛར༻͍ͯͨ͠) ΩϟϓνϟΛࡱΔͷ༰қʜ
StorybookͷΩϟϓνϟΛࡱΔCLIΛ࡞Γ·ͨ͠ɿ https://github.com/Quramy/zisui ※ ໋໊ʮࣗͰٵ͍ग़ͧ͢ʂʯͱ͍͏͓ؾ࣋ͪͷද໌Ͱ͢ Α͠ɺࣗͰ࡞Ζ͏
None
- ֤ϝτϦΫε(DOMཁૉ/Ϧϑϩʔճ/ελΠϧ ࠶ܭࢉճ)͕ఆৗঢ়ଶʹͳΔ·ͰΩϟϓνϟऔಘ ΛԆ - CSSΞχϝʔγϣϯͷࣗಈOFF [JTVJͷಛɿ҆ఆੑ
- ෳىಈͨ͠PuppeteerͰฒྻʹը૾औಘ - Storybookͷը໘ϩʔυ1ճͷΈ - storyͷΓସ͑ postMessage [JTVJͷಛɿੑೳ
- Ϧιʔε <link rel=“preload” > ͰઌಡΈ ※ ݱঢ়preview-head.htmlʹgulpͰهड़ ͦͷଞ҆ఆԽͷͨΊͷϙΠϯτ
- StorybookͰը૾ճؼςετΛ͍ͯ͠·͢ - DOMϕʔεͷεφοϓγϣοτςετͱൺΔ ͱɺϋʔυϧߴ͍͚Ͳɺಋೖ͢ΔՁेʹ ͋Δͱࢥ͏ ·ͱΊ
None