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
510
フロントエンドテストの育て方
quramy
12
3.4k
App Router 悲喜交々
quramy
8
620
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
680
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
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
220
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
190
CursorはMCPを使った方が良いぞ
taigakono
0
140
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
920
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
670
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
110
カクヨムAndroidアプリのリブート
numeroanddev
0
430
Is Xcode slowly dying out in 2025?
uetyo
1
180
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
0
130
Using AI Tools Around Software Development
inouehi
0
1.2k
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
390
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
170
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Git: the NoSQL Database
bkeepers
PRO
430
65k
KATA
mclloyd
29
14k
Statistics for Hackers
jakevdp
799
220k
A designer walks into a library…
pauljervisheath
206
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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