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
reg-viz VRT tools
Search
Yosuke Kurami
February 21, 2024
Programming
4
1.3k
reg-viz VRT tools
Yosuke Kurami
February 21, 2024
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
フロントエンドテストの育て方
quramy
8
2.3k
App Router 悲喜交々
quramy
8
560
上手に付き合うコンポーネントテスト
quramy
4
2k
Patched fetch did not work
quramy
6
630
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.1k
Next.js App Router
quramy
15
3.5k
Fragment Composition of GraphQL
quramy
16
3.7k
NoInfer
quramy
0
260
Precondition with schema directives
quramy
0
1.6k
Other Decks in Programming
See All in Programming
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
740
エンジニア未経験が最短で戦力になるためのTips
gokana
0
140
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.1k
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
420
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
110
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
490
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
360
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
490
ベクトル検索システムの気持ち
monochromegane
29
8.5k
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.5k
イベントソーシングによってインピーダンスミスマッチから解放された話
tkawae
1
310
OUPC2024 Day 1 解説
kowerkoint
0
390
Featured
See All Featured
A Tale of Four Properties
chriscoyier
158
23k
Typedesign – Prime Four
hannesfritz
41
2.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Statistics for Hackers
jakevdp
797
220k
Six Lessons from altMBA
skipperchong
27
3.7k
Thoughts on Productivity
jonyablonski
69
4.5k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
460
Bash Introduction
62gerente
611
210k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Transcript
reg-viz and VRT tools 2024.2.21 @Quramy
About me id: @Quramy (GitHub / X ) - Web
ΤϯδχΞ (ϑϩϯτΤϯυଟΊ) - React, Next.js, GraphQL - ։ൃࢧԉπʔϧͷ࡞ - ΤσΟλपΓ, Prisma ORM ؔ࿈, Visual Testing ؔ࿈
͓ॻ͖ - reg-viz Organization ʹ͍ͭͯ - VRT ͷελϯεʹ͍ͭͯ - reg-viz
͕ఏڙ͍ͯ͠Δ tools ͷհ
reg-viz organization ʹ͍ͭͯ https://github.com/reg-viz
reg-viz organization ʹ͍ͭͯ - https://github.com/reg-viz - Visual Testing ʹؔ࿈͢Δ OSS
Λ࡞͍ͬͯΔू·Γ "৫" ͱ͍͏΄Ͳ͔ͬ͠Γͨ͠ͷ͡Όͳ͍ - reg-suit Storycap ͳͲ - ༇շͳؒͨͪ (ओͳϝϯςφ)
reg-viz ͷྺ࢙ 2016 2017 2019 2023 2024 reg-cli ࡞ reg-suit
࡞ SCS / zisui Λ Storycap ౷߹ reg-viz ͷ֤छ UI Λ৽ reg-actions ࡞ storycap-testrun ࡞
reg-viz tools ͷಛ - VRT Λ࣮ݱ͢Δ্ͰඞཁͱͳΔͷΛࣗͨͪͰ։ൃ͖ͯͨ͠ - αʔϏεͰͳ͘πʔϧ - ʮࣗલͷ
CI ڥͰ VRT Λߏங͢Δʯ͕Ϟοτʔ - CI ͷϦιʔεΛ༻ҙ͢ΕແྉͰར༻Ͱ͖Δ
VRT ͷελϯε
Visual Testing ʹର͢Δελϯε ϑϩϯτΤϯυͷ VRT ʹର͢Δߟ͑ํ (8લ͔ΒมΘͬͯͳ͍): - Visual Testing
ͷൣғ: UI Component (React Vue ͷύʔπ୯Ґ) - Component ͷ୯ମςετ ͱΞϓϦέʔγϣϯ E2E ςετͷதؒఔ - Visual Testing ͷత: VRT ͦΕࣗମతͰͳ͘ɺͨͩͷखஈ - ϑϩϯτΤϯυ։ൃͷεϐʔυΛ্͛ΔͨΊͷͷ
Visual Testing ʹର͢Δελϯε - ϑϩϯτΤϯυͷޮతͳ։ൃ - Storybook ͷΑ͏ͳ Component Χλϩά͕͋Εɺڍಈݟͨ
Λ֬ೝ͠ͳ͕Βখ͘͞ Component Λ։ൃͰ͖Δ - ʮComponent Χλϩά͕͋Δͷ͔ͩΒ VRT ͬͯΈΑ͏ʯͱ͍ ͏ൃ ɻ ʮVRT ͷͨΊʹ Component ΧλϩάΛ༻ҙ͠Α͏ʯͰͳ͍
Visual Testing ʹର͢Δελϯε - ϑϩϯτΤϯυͷޮతͳ։ൃ - मਖ਼ͷӨڹ͕ՄࢹԽ͞ΕΔ҆৺ײ͕डೖͷΛอͭ - e.g. Atom
Component ͷ min-width Λมߋͯ͠ɺMolecule Organism Component ͷϨΠΞτ่ΕͯͳΒͳ͍ - ʮݟ͕ͨͲͷΑ͏ʹมߋ͞ΕΔͷ͔ʯ͕ՄࢹԽ͞ΕΔͱɺϨϏϡ Ξͷ֬ೝίετԼ͕Δ
reg-viz tools
Issue breakdown reg-viz tools ͰɺVRT ͷ࣮ݱΛҎԼʹղͯ͠ଊ͍͑ͯΔ - ςετίʔυ͔Βը૾Λग़ྗ͢ΔͨΊͷπʔϧ e.g.
Storycap, storycap-testrun - ग़ྗ͞Εͨը૾Λൺֱ͢ΔͨΊͷπʔϧ e.g. reg-suit, reg-actions
Issue breakdown - ʮը૾ʯͰઃܭΛ͍ͯ͠ΔܦҢ: - 2016 ࣌Ͱɺࣗୡ Component ͷςετʹ SB
Λ͍ͬͯͳ ͔ͬͨ (Angular testing on Karma + Electron ͱ͍͏ߏ) ςετίʔυ্Ͱը૾ग़ྗΛߦ͏ͷൺֱత༰қ - ʮը૾ൺֱʯ෦͚ͩΛ࡞Ε VRT ͕࣮ݱͰ͖Δ - Storybook ͕ᴈ໌ظ (Vue Angular ͷରԠ͕ೖͬͨͷ 2017 )
Combination ʮը૾ʯͰ͍ͯ͠ΔͨΊɺ༻్ʹԠͨ͡Έ߹Θ͕ͤՄೳ - Web ΞϓϦίϯϙʔωϯτͷϏδϡΞϧςετྫ: Storybook x storycap-testrun x
reg-actions - Web ϖʔδͷϏδϡΞϧςετྫ: Playwright (Cypress) x reg-suit - ωΠςΟϒΞϓϦͷϏδϡΞϧςετྫ: iOS Quick x reg-suit
ը૾ͷग़ྗ
Storybook - Storybook - UI Component ։ൃج൫ͷσϑΝΫτελϯμʔυ - ۙ Component
ςετج൫ͱͯ͠ͷػೳڧԽཱͭ - e.g. Play function, @stoybook/test (@storybook/jest, @storybook/ testing-library) - ςετҎ֎Ͱཱͭγʔϯ͕ଟ͍ = ಋೖͷ৺ཧతোน͕͍ - Component Χλϩάͱͯ͠ར༻Մೳ
Storybook ͱ VRT - chromatic Λ༻͍Δ͜ͱͰ Storybook ͷ VRT Λ࣮ݱՄೳ
- Pros: ಋೖ͕༰қ, Storybook ެࣜ, etc... - Cons: VRT ࣮ߦϒϥβ, ࣮ߦ Story ʹΑͬͯແྉ͔Β֎ΕΔ
Storybook ͱ reg-viz - reg-viz Ͱ Storybook VRT Λ࣮ݱ͢ΔͨΊͷπʔϧͱͯ͠ҎԼΛఏڙ: -
https://github.com/reg-viz/storycap - https://github.com/reg-viz/storycap-testrun
Storycap - https://github.com/reg-viz/storycap - Storybook ΛΫϩʔϧ֤ͯ͠ Story ͷը૾Λ PNG Խ͢Δ
CLI - ը૾ͷൺֱ reg-suit reg-actions (ޙड़) ʹ͍ͤͯΔ $ npx storycap <storybook_url>
Storycap ͷΈ - த Puppeteer (Headless Chrome) ʹΑΔ Ϋϩʔϥ -
Storybook preview iframe ʹରͯ͠ Puppeteer ͔Β Post message͢Δ - औಘ͢Δը૾Λ҆ఆԽͤ͞ΔͨΊͷछʑͷϩδοΫΛแ - e.g. DOM Node CSS ͷ Recalculation ͕ఆৗঢ়ଶͱͳΔ·Ͱ ػ
storycap-testrun - https://github.com/reg-viz/storycap-testrun - @storybook/test-runner ্Ͱར༻͢Δલఏ ͷϥΠϒϥϦ - postVisit ʹద༻ͤ͞Δ͜ͱͰ
Story ͷը૾ ͕औಘՄೳ https://zenn.dev/knowledgework/articles/297ccfb866a5b5
Storycap v.s. testrun - storycap-testrun ͷڧΈ = Storybook Test Runner
্Ͱಈ࡞͢Δ͜ͱ - e.g. Playwright αϙʔτ, Play Function ͷػ - Storycap ͔ΒͷҠߦઌͱͯ͠ storycap-testrun Λຊ֨తʹݕ౼͢Δ͔ - storycap-testrun ͕ྼޙ͍ͯ͠ΔՕॴ·ͩ͋Δ
ը૾ͷൺֱ
reg-cli - https://github.com/reg-viz/reg-cli - reg-viz ͷதͰ࠷ݹ͍ύοέʔδ. reg-suit reg-actions
reg-cli ͷϥούʔ - ը૾ΛؚΉσΟϨΫτϦಉ࢜ΛҾͱ͠ɺಉ໊ϑΝΠϧͷࠩൺֱΛߦ ͏ CLI - ʮඞཁͳͷࣄલͱࣄޙͷը૾܈͚ͩʯͱ͍͏γϯϓϧ͕͞ಛ $ npx reg-cli actual-dir expected-dir diff-img-dir
Features of reg-cli: Comparison parameters - ݫີͳ pixel by pixel
ͷൺֱͰ࣮ӡ༻ʹ͑ͳ͍ɻ10 pixel ఔͷޡ ࠩΛِཅੑͱͯ͠ݕग़͢Δ͜ͱ͕͋ΔͨΊɺᮢΛ؇͢ΔΦϓγϣϯ Λ༻ҙ͍ͯ͠Δ - --thresholdRate : ը૾શମʹ͓͚Δ zero diff pixel ͷൺ - --thresholdPixel : ը૾શମʹ͓͚Δ zero diff pixel ͷઈର - ͜ΕΒͷύϥϝʔλ reg-suit reg-actions ͰઃఆՄೳ
Features of reg-cli: Report UI - ൺֱ݁ՌΛ HTML Ϩϙʔτͱͯ͠ग़ྗ͢Δػೳ
reg-cli ͱϫʔΫϑϩʔ - reg-cli ͘·Ͱը૾ͷൺֱͷΈΛߦ͏ CLI - ։ൃϫʔΫϑϩʔʹΈࠐΉʹෆ͍ͯ͠Δ෦͕͋Δ
εφοϓγϣοτͷѻ͍ εφοϓγϣοτςετͷࠩҎԼʹେผ͞ΕΔ: - डೖෆՄೳͳࠩ = ҙਤͤ͵ഁյ - e.g. ϦϑΝΫλϦϯάʹࣦഊͨ͠߹ -
डೖՄೳͳࠩ = ҙਤతͳมߋ - Visual Testing ͷ߹ɺେडೖՄೳͳࠩͱͳΔ e.g. จݴमਖ਼ CSS มߋ, Component ՃͳͲ - ʮडೖՄೳʯor ʮडೖෆՄೳʯ୯७ͳػցఆ͕͍͠ E2E ϓϥοτϑΥʔϜͰ ػցֶशΛ༻͍ͨ Auto Healing ͳͲۙొ͍ͯ͠Δ
VRT εϞʔΫςετͳͷ͔ https://web.dev/learn/testing/get-started/test-types ΑΓ ςετରͷίʔυ͕มߋ͞ΕΔͨͼʹߋ৽͕ඞཁͳςετɺ༗༻ͳ ϑΟʔυόοΫΛఏڙͤͣɺࣦഊ͢ΔՄೳੑ͕ߴ͍ͨΊɺنൣ͕ݫ͗͢͠ Δ͕͋Γ·͢ɻϏδϡΞϧςετɺ͜ͷམͱ݀͠ʹؕΓ͕ͪͰ͢
ʮςετͷߋ৽ʯӡ༻ ҰൠతͳεφοϓγϣοτςετͷϫʔΫϑϩʔ (e.g. jest --update ) - ։ൃऀ - ػೳมߋʹ͏ιʔείʔυमਖ਼
- ϩʔΧϧͰεφοϓγϣοτΛߋ৽ͯ͠ push - CI - τϐοΫϒϥϯν্ͷεφοϓγϣοτΛਖ਼ͱͯࣗ͠ಈςετͷ݁Ռ ΛධՁ
ʮςετͷߋ৽ʯӡ༻ ͦͷ·· VRT ʹద༻ͨ͠߹ - ։ൃऀ - ػೳมߋʹ͏ιʔείʔυमਖ਼ - ϩʔΧϧͰεφοϓγϣοτΛߋ৽ͯ͠
push - CI - τϐοΫϒϥϯν্ͷεφοϓγϣοτΛਖ਼ͱͯࣗ͠ಈςετͷ݁Ռ ΛධՁ खݩͰ7JTVBM5FTUΛ࣮ߦ͢Δखؒ 04ϑΥϯτͷࠩҟʹΑͬͯEJ ff ͕ੜ͍͢͡ QJYFM͕ࠩੜ͡ΔมߋͰ͋ͬͯߋ৽͕ൃੜ͢Δ
ʮςετͷߋ৽ʯӡ༻ reg-viz ͷߟ͑ΔϫʔΫϑϩʔ - ։ൃऀ - ػೳมߋʹ͏ιʔείʔυมߋͷΈpush - CI -
ετϨʔδ্ͷεφοϓγϣοτΛਖ਼ͱ͠ ͯࣗಈςετͷ݁ՌΛධՁ - ࠓճͷࣗಈςετͷ݁ՌΛετϨʔδʹ upload (ʮςετͷߋ৽ʯ૬)
ʮςετͷߋ৽ʯӡ༻ reg-viz ͷߟ͑ΔϫʔΫϑϩʔ - CI - VRT ͷ݁ՌͱࠩͷৄࡉΛ։ൃऀɾϨ ϏϡΞʹ௨ -
ϨϏϡΞ - ࠩৄࡉΛ֬ೝ͠ɺडೖՄ൱அ ࠩ༰௨ͷྫSFHTVJUͷ13ίϝϯτ
ϫʔΫϑϩʔαϙʔτ લड़ͷϫʔΫϑϩʔαϙʔτΛߦ͏πʔϧͱͯ͠ҎԼΛఏڙ: (ͲͪΒ෦తʹ reg-cli Λར༻͍ͯ͠Δ) - https://github.com/reg-viz/reg-suit - छʑͷ
SCM / CI Ͱ VRT Λ࣮ݱ͢ΔͨΊͷ CLI - https://github.com/reg-viz/reg-actions - GitHub Action Work fl ow ͔Βར༻Մೳͳ Action
reg-suit / reg-actions SFHTVJU SFHBDUJPOT ը૾εφοϓγϣοτ༻ ετϨʔδ 4PS($4͕ผ్ඞཁ ༻ҙෆཁ
()""SUJGBDUΛར༻ ར༻Մೳͳ$* ҙ (JU)VC"DUJPOTઐ༻ ࠩݕ࣌ͷ௨ઌ (JU)VC13 ()&413 (JUMBC.3 4MBDL FUD (JU)VC13 3FQPSU6*ӾཡՄ൱ Մ ෆՄ ͨͩ͠13ίϝϯτʹࠩͷը૾͕ల։ ͞ΕΔ
Thank you