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
29
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
Refactoring in Angular via Metrics, Modularity & Testing
rainerhahnekamp
0
280
Testing in 2024
rainerhahnekamp
0
260
Modern Angular
rainerhahnekamp
0
130
Deep Dive: Change Detection
rainerhahnekamp
0
240
Testing Angular in 2024
rainerhahnekamp
0
91
Towards Modern Change Detection
rainerhahnekamp
0
290
Cypress or Playwright?
rainerhahnekamp
0
240
Powerduo Nx and Sheriff
rainerhahnekamp
0
98
NgRx Signal Store
rainerhahnekamp
0
240
Other Decks in Technology
See All in Technology
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
760
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.2k
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
130
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Docker and Python
trallard
37
2.9k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
The Invisible Side of Design
smashingmag
294
50k
Teambox: Starting and Learning
jrom
130
8.6k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Automating Front-end Workflow
addyosmani
1362
200k
Embracing the Ebb and Flow
colly
81
4.3k
What the flash - Photography Introduction
edds
65
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