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
33
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
Evolving Architecture
rainerhahnekamp
3
310
Microfrontends: Necessities - Implementations - Challenges
rainerhahnekamp
0
150
Zoneless Testing
rainerhahnekamp
0
170
Towards Modern Change Detection
rainerhahnekamp
0
20
Testing in 2024: A "dynamic" Situation
rainerhahnekamp
0
130
End of Barrel Files: New Modularization Techniques with Sheriff
rainerhahnekamp
0
460
ESLint: Low Hanging Fruits
rainerhahnekamp
0
410
Refactoring in Angular via Metrics, Modularity & Testing
rainerhahnekamp
0
390
Testing in 2024
rainerhahnekamp
0
340
Other Decks in Technology
See All in Technology
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
140
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
220
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
360
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
880
MIMEと文字コードの闇
hirachan
2
1.4k
Share my, our lessons from the road to re:Invent
naospon
0
140
IAMのマニアックな話2025
nrinetcom
PRO
3
310
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
580
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.1k
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
230
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Done Done
chrislema
182
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
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