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
570
フロントエンドテストの育て方
quramy
12
3.4k
App Router 悲喜交々
quramy
8
620
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
690
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.3k
Next.js App Router
quramy
15
3.6k
Fragment Composition of GraphQL
quramy
16
4k
reg-viz VRT tools
quramy
4
1.4k
Other Decks in Programming
See All in Programming
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
760
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
320
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
VS Code Update for GitHub Copilot
74th
2
630
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
LINEヤフー データグループ紹介
lycorp_recruit_jp
1
2.4k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
110
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Building Applications with DynamoDB
mza
95
6.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
How GitHub (no longer) Works
holman
314
140k
Navigating Team Friction
lara
187
15k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Designing for Performance
lara
610
69k
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