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
20
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
Change Detection - Deep Dive
rainerhahnekamp
0
120
NgRx Signal Store
rainerhahnekamp
0
40
Basta Spring 2024 - Cypress und Playwright
rainerhahnekamp
0
280
Powerduo Nx and Sheriff
rainerhahnekamp
0
48
Match Made in Heaven: NgRx SignalStore
rainerhahnekamp
0
20
Server Components, Meta-Frameworks, Signals, Resumability: What the heck?
rainerhahnekamp
0
52
Sheriff: Modularity in TypeScript Applications
rainerhahnekamp
0
75
Cypress Component Testing - Revolution des Testens?
rainerhahnekamp
1
56
Future of Frontend Development
rainerhahnekamp
0
120
Other Decks in Technology
See All in Technology
LLMの現在
pfn
PRO
3
1.3k
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
290
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
120
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
270
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
Why do you get AWS certificates
hirosys
0
120
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
340
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
4
920
Getting started with controlling LEGO using Swift
hcrane
0
140
SaaS型Webサービス「カオナビ」のチーム開発でPackage by Featureを取り入れた話/Implementing Package by Feature in kaonavi
kaonavi
0
100
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
390
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
95
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Adopting Sorbet at Scale
ufuk
66
8.5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Designing Experiences People Love
moore
135
23k
Web Components: a chance to create the future
zenorocha
304
41k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
A Philosophy of Restraint
colly
195
15k
Being A Developer After 40
akosma
56
580k
Rails Girls Zürich Keynote
gr2m
91
13k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Infographics Made Easy
chrislema
237
18k
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