# Instructions - Following Playwright test failed. - Explain why, be concise, respect Playwright best practices. - Provide a snippet of code with the fix, if possible. # Test info - Name: mfc-corporate-de.spec.ts >> other >> styling - Location: visual/mfc-corporate-de.spec.ts:10:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed Expected an image 776px by 1938px, received 768px by 900px. 87733 pixels (ratio 0.06 of all image pixels) are different. Snapshot: other-styling.png Call log: - Expect "toHaveScreenshot(other-styling.png)" with timeout 15000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - Expected an image 776px by 1938px, received 768px by 900px. 87733 pixels (ratio 0.06 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - Expected an image 776px by 1938px, received 768px by 900px. 87733 pixels (ratio 0.06 of all image pixels) are different. ``` # Test source ```ts 1 | import { test, expect } from '@playwright/test'; 2 | import { setup, setDarkTheme } from '../helpers/utils'; 3 | 4 | const snap = (name: string) => ({ 5 | name: `${name}.png`, 6 | fullPage: true, 7 | } as const); 8 | 9 | test.describe('other', () => { 10 | test('styling', async ({ page }) => { 11 | await setup(page, '/design-basiseigenschaften/'); 12 | await page.waitForTimeout(2000); > 13 | await expect(page).toHaveScreenshot(snap('other-styling')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 14 | await setDarkTheme(page); 15 | await expect(page).toHaveScreenshot(snap('other-styling-dark')); 16 | }); 17 | 18 | test('rte', async ({ page }) => { 19 | await setup(page, '/richtext-editor/'); 20 | await expect(page).toHaveScreenshot(snap('other-rte')); 21 | await setDarkTheme(page); 22 | await expect(page).toHaveScreenshot(snap('other-rte-dark')); 23 | }); 24 | 25 | test('rte-syntax-highlighting', async ({ page }) => { 26 | await setup(page, '/richtext-editor/syntax-highlighting/'); 27 | await expect(page).toHaveScreenshot(snap('other-rte-syntax-highlighting')); 28 | }); 29 | }); 30 | 31 | test.describe('content', () => { 32 | test('accordion', async ({ page }) => { 33 | await setup(page, '/inhaltselemente/accordion/'); 34 | await expect(page).toHaveScreenshot(snap('content-accordion')); 35 | }); 36 | 37 | test('keyvisual', async ({ page }) => { 38 | await setup(page, '/inhaltselemente/keyvisual/'); 39 | await expect(page).toHaveScreenshot(snap('content-keyvisual')); 40 | await setDarkTheme(page); 41 | await expect(page).toHaveScreenshot(snap('content-keyvisual-dark')); 42 | }); 43 | 44 | test('hero-image', async ({ page }) => { 45 | await setup(page, '/inhaltselemente/hero-image/'); 46 | await expect(page).toHaveScreenshot(snap('content-hero-image')); 47 | }); 48 | 49 | test('slider-slide2grid', async ({ page }) => { 50 | await setup(page, '/inhaltselemente/slider-slide2grid/'); 51 | await expect(page).toHaveScreenshot(snap('content-slider-slide2grid')); 52 | await setDarkTheme(page); 53 | await expect(page).toHaveScreenshot(snap('content-slider-slide2grid-dark')); 54 | }); 55 | 56 | test('comparison-module', async ({ page }) => { 57 | await setup(page, '/inhaltselemente/comparison-modul/'); 58 | await page.locator('.o-radio-switch__label[for=switchLeft]').click(); 59 | await page.waitForTimeout(2000); 60 | await expect(page).toHaveScreenshot(snap('content-comparison-module-left')); 61 | await page.locator('.o-radio-switch__label[for=switchRight]').click(); 62 | await page.waitForTimeout(2000); 63 | await expect(page).toHaveScreenshot(snap('content-comparison-module-right')); 64 | await setDarkTheme(page); 65 | await expect(page).toHaveScreenshot(snap('content-comparison-module-dark')); 66 | }); 67 | 68 | test('text-full-height-image', async ({ page }) => { 69 | await setup(page, '/inhaltselemente/text-full-height-image/'); 70 | await expect(page).toHaveScreenshot(snap('content-text-full-height-image')); 71 | }); 72 | 73 | test('timeline', async ({ page }) => { 74 | await setup(page, '/inhaltselemente/timeline/'); 75 | await expect(page).toHaveScreenshot(snap('content-timeline')); 76 | }); 77 | 78 | test('divider', async ({ page }) => { 79 | await setup(page, '/inhaltselemente/divider/'); 80 | await expect(page).toHaveScreenshot(snap('content-divider')); 81 | }); 82 | 83 | test('container', async ({ page }) => { 84 | await setup(page, '/inhaltselemente/container/'); 85 | await expect(page).toHaveScreenshot(snap('content-container')); 86 | }); 87 | 88 | test('card-group', async ({ page }) => { 89 | await setup(page, '/inhaltselemente/card-group/'); 90 | await expect(page).toHaveScreenshot(snap('content-card-group')); 91 | }); 92 | 93 | test('quote', async ({ page }) => { 94 | await setup(page, '/inhaltselemente/quote/'); 95 | await expect(page).toHaveScreenshot(snap('content-quote')); 96 | }); 97 | 98 | test('text-icon', async ({ page }) => { 99 | await setup(page, '/inhaltselemente/text-icon/'); 100 | await expect(page).toHaveScreenshot(snap('content-text-icon')); 101 | await setDarkTheme(page); 102 | await expect(page).toHaveScreenshot(snap('content-text-icon-dark')); 103 | }); 104 | 105 | test('text-in-columns', async ({ page }) => { 106 | await setup(page, '/inhaltselemente/text-in-columns/'); 107 | await expect(page).toHaveScreenshot(snap('content-text-in-columns')); 108 | }); 109 | 110 | test('menu-sitemap', async ({ page }) => { 111 | await setup(page, '/inhaltselemente/menu-sitemap/'); 112 | await expect(page).toHaveScreenshot(snap('content-menu-sitemap')); 113 | }); ```