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
Visuelle Regression
Search
Rainer Hahnekamp
September 30, 2021
Technology
0
38
Visuelle Regression
Slides for a talk about Visual Regression at the EnterJS 2021.
Rainer Hahnekamp
September 30, 2021
Tweet
Share
More Decks by Rainer Hahnekamp
See All by Rainer Hahnekamp
Test Fest | Angular Unit Tests Distilled
rainerhahnekamp
0
350
Micro Frontends: Necessity, Implementation, and Challenges
rainerhahnekamp
2
770
Software richtig testen - Ganz praktisch!
rainerhahnekamp
0
94
Quality with Angular: Tools and Processes
rainerhahnekamp
0
320
Evolving Architecture
rainerhahnekamp
3
380
Microfrontends: Necessities - Implementations - Challenges
rainerhahnekamp
0
200
Zoneless Testing
rainerhahnekamp
0
220
Towards Modern Change Detection
rainerhahnekamp
0
37
Testing in 2024: A "dynamic" Situation
rainerhahnekamp
0
210
Other Decks in Technology
See All in Technology
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.3k
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
310
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
730
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
590
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
0
220
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
220
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
140
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
140
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
590
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
170
Model Mondays S2E03: SLMs & Reasoning
nitya
0
240
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How STYLIGHT went responsive
nonsquared
100
5.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
Code Review Best Practice
trishagee
69
18k
Thoughts on Productivity
jonyablonski
69
4.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Documentation Writing (for coders)
carmenintech
72
4.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Adopting Sorbet at Scale
ufuk
77
9.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Transcript
Visuelle Regression enterJs 2021 - 30.9.2021 Rainer Hahnekamp https://github.com/rainerhahnekamp/visual-regression-enterjs
Über mich • Rainer Hahnekamp ANGULARarchitects.io • Trainings and Consultancy
• > 20 Years Experience @RainerHahnekamp https://angulararchitects.io/workshops
None
Demoanwendung
Headless Browser Tests 1 3 4 Frontend Applikation 2
Puppetteer • Inkludiert Headless Browser • Spezielle Jest Konfiguration notwendig
• Debug Modus möglich
Puppeteer Demo
Herausforderungen 1. Pixelabgleich 2. Komponentenisolation
None
Finde den Unterschied
Finde den Unterschied
None
Komponenten Isolation
Storybook
Frontend Applikation 2 Headless Browser Tests 1 3 4
2 Headless Browser Tests 1 3 4 Storybook Code (Komponenten)
Storybook • Rendert Komponenten in Isolation • Frameworkunabhängig • Konfiguration
von Komponenten in verschiedenen Ausprägungen • Kann auch als "Komponentengallerie" verwendet werden
Storybook Setup - "Modul" Konfiguration - 1/2 export default {
title: 'Eternal/HolidayCard', component: HolidayCardComponent, decorators: [moduleMetadata({ imports: [MatButtonModule, MatCardModule] })] } as Meta;
Storybook Setup - Variation - 2/2 export const Default =
() => { props: { holiday: { id: 1, title: 'Holiday', description: 'A holiday', imageUrl: 'https://eternal-app.s3.eu-central-1.amazonaws.com/assets/AngkorWatSmall.jpg' } } }
None
Storybook Demo
2 Headless Browser Tests 1 3 4 Storybook Code (Komponenten)
Pixelabgleich mit Storybook?
2 Headless Browser Test Specs 1 3 4 Storybook Application
Code (Components)
Cloudanbieter
Zusammenfassung • Visuelle Regression als wichtige Testmethode • Spezielle Anforderungen
an Infrastruktur ◦ Docker ◦ Cloudanbieter • Storybook für Komponenten Isolation bzw. Widget Gallerie • Testingtools: ◦ Jest & Puppeteer ◦ Playwright ◦ Cypress • Architektur auf Testen ausrichten