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
290
Microfrontends: Necessities - Implementations - Challenges
rainerhahnekamp
0
130
Zoneless Testing
rainerhahnekamp
0
160
Towards Modern Change Detection
rainerhahnekamp
0
16
Testing in 2024: A "dynamic" Situation
rainerhahnekamp
0
110
End of Barrel Files: New Modularization Techniques with Sheriff
rainerhahnekamp
0
430
ESLint: Low Hanging Fruits
rainerhahnekamp
0
400
Refactoring in Angular via Metrics, Modularity & Testing
rainerhahnekamp
0
390
Testing in 2024
rainerhahnekamp
0
340
Other Decks in Technology
See All in Technology
Grafanaのvariables機能について
tiina
0
210
ソフトウェア開発現代史:製造業とソフトウェアは本当に共存できていたのか?品質とスピードを問い直す
takabow
15
5.8k
re:Invent Recap (January 2025)
scalefactory
0
350
地方企業がクラウドを活用するヒント
miu_crescent
PRO
1
120
AIエージェントについてまとめてみた
pharma_x_tech
20
13k
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
360
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
120
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
540
Power BI は、レポート テーマにこだわろう!テーマのティア表付き
ohata_ds
0
140
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
350
SCSAから学ぶセキュリティ管理
masakamayama
0
130
Ask! NIKKEI RAG検索技術の深層
hotchpotch
12
2.3k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Automating Front-end Workflow
addyosmani
1367
200k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
7
240
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Rails Girls Zürich Keynote
gr2m
94
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
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