Domäne
Frontend Development
Skill-Profil
Chromatic, Percy, BackstopJS, pixel-level comparison, snapshot management
Rollen
4
wo dieser Skill vorkommt
Stufen
5
strukturierter Entwicklungspfad
Pflichtanforderungen
20
die anderen 0 optional
Frontend Development
Frontend Testing
17.3.2026
Wählen Sie Ihr aktuelles Level und vergleichen Sie die Erwartungen.
Die Tabelle zeigt, wie die Tiefe von Junior bis Principal wächst.
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Frontend Developer (Angular) | Pflicht | Understands the concept of visual regression testing for Angular components. Takes component screenshots via Storybook, knows about font and animation issues in visual comparison. |
| Frontend Developer (React) | Pflicht | Understands visual regression testing concepts for React components. Creates Storybook stories for main component states, runs basic visual diff tests through Chromatic or Percy for detecting unintended UI changes. |
| Frontend Developer (Svelte) | Pflicht | Understands the visual regression testing concept for Svelte components, runs screenshot tests through Playwright. Sets up basic snapshot tests for key SvelteKit application pages, compares visual differences in pull requests. |
| Frontend Developer (Vue) | Pflicht | Understands visual regression testing concept for Vue components. Configures Storybook for Vue 3 with Histoire, creates stories for UI components as a base for visual snapshots. |
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Frontend Developer (Angular) | Pflicht | Configures visual testing for Angular components: Chromatic or Percy integration with Storybook, testing various component states, responsive screenshots for different viewports. |
| Frontend Developer (React) | Pflicht | Configures visual regression testing for React components: Storybook integration with Chromatic for automatic screenshot comparison, Playwright visual testing for E2E scenarios. Covers key states: responsive breakpoints, dark mode, loading states. |
| Frontend Developer (Svelte) | Pflicht | Configures visual testing system for Svelte: Playwright with pixel comparison, Chromatic for Storybook components. Creates tests for different viewports and themes, integrates visual checks in CI through GitHub Actions, manages baseline snapshots. |
| Frontend Developer (Vue) | Pflicht | Configures visual regression tests for Vue components through Playwright and Percy/Chromatic. Integrates with Storybook — automated screenshot tests for each story, configures threshold and viewport breakpoints. |
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Frontend Developer (Angular) | Pflicht | Designs visual testing system: coverage of all design system components, Playwright integration for full-page screenshots, baseline management strategy, dark theme and RTL testing. |
| Frontend Developer (React) | Pflicht | Designs visual regression testing system for React design system: multi-theme and multi-viewport matrix in Storybook/Chromatic, CI integration for blocking checks. Optimizes test stability: deterministic fonts, fixed dates, mock data. |
| Frontend Developer (Svelte) | Pflicht | Designs visual testing infrastructure for SvelteKit applications: parallel execution, dynamic thresholds, cross-browser coverage. Creates custom reporters for visual diffs, integrates testing with the design system and Skeleton UI components. |
| Frontend Developer (Vue) | Pflicht | Designs visual regression testing system for Vue design system — CI integration, baseline management, multi-browser/device checks. Creates custom test matrix covering themes, RTL and responsive states. |
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Frontend Developer (Angular) | Pflicht | Implements visual testing process in the Angular team: CI-integrated visual diff in PR review, visual change approval policy, budgets for the number of changed screenshots per release. |
| Frontend Developer (React) | Pflicht | Defines visual testing strategy for the team's React projects: coverage targets, visual changes review process, balance between completeness and CI speed. Integrates visual testing into designer workflow for Figma-to-code validation. |
| Frontend Developer (Svelte) | Pflicht | Defines visual testing strategy for the Svelte team: critical UI path coverage, visual change review process. Implements automatic baseline updates, coordinates visual QA between designers and developers. |
| Frontend Developer (Vue) | Pflicht | Defines visual testing strategy for Vue teams — tooling (Chromatic vs Percy vs Playwright), baseline approval governance, code review integration. Introduces visual validation processes when updating design system. |
| Rolle | Pflicht | Beschreibung |
|---|---|---|
| Frontend Developer (Angular) | Pflicht | Defines visual quality strategy at the platform level: automated visual QA for Angular micro-frontends, AI-powered visual testing, integration with accessibility screenshots and performance visualization. |
| Frontend Developer (React) | Pflicht | Shapes visual quality strategy for the React application ecosystem: unified visual testing platform, cross-product consistency checks, automatic design drift detection. Defines investments in tooling and visual QA processes at organizational level. |
| Frontend Developer (Svelte) | Pflicht | Shapes visual quality strategy at the organizational level, researches AI-powered visual testing for the Svelte ecosystem. Defines centralized visual testing platform architecture, integrates it with the design system and CI/CD pipeline. |
| Frontend Developer (Vue) | Pflicht | Shapes visual testing strategy for company's Vue ecosystem — cross-project baseline, automated UI consistency monitoring. Researches AI-powered visual testing and approaches to reducing flaky tests. |