# 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:8:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed 5693 pixels (ratio 0.01 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 - 5693 pixels (ratio 0.01 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 - 5693 pixels (ratio 0.01 of all image pixels) are different. ``` # Page snapshot ```yaml - generic [ref=e2]: - link "Zum Inhalt springen" [ref=e3] [cursor=pointer]: - /url: "#page-content" - banner [ref=e4]: - generic [ref=e5]: - link "Zur Startseite": - /url: / - generic [ref=e6]: - link "Logo Marketing Factory Digital GmbH" [ref=e7] [cursor=pointer]: - /url: / - img "Logo Marketing Factory Digital GmbH" [ref=e8] - navigation [ref=e27]: - list [ref=e28]: - listitem [ref=e29]: - link "Basics (aktuell)" [ref=e30] [cursor=pointer]: - /url: /design-basiseigenschaften/ - text: Basics - generic [ref=e31]: (aktuell) - listitem [ref=e32]: - link "Einblendmenü umschalten mit Leertaste" [ref=e33] [cursor=pointer]: - /url: /inhaltselemente/ - text: Inhaltselemente - listitem [ref=e34]: - link "Einblendmenü umschalten mit Leertaste" [ref=e35] [cursor=pointer]: - /url: /richtext-editor/ - text: RTE - listitem [ref=e36]: - link "Einblendmenü umschalten mit Leertaste" [ref=e37] [cursor=pointer]: - /url: /seitentypen/ - text: Seitentypen - listitem [ref=e38]: - link "Einblendmenü umschalten mit Leertaste" [ref=e39] [cursor=pointer]: - /url: /plugins/ - text: Plugins - listitem [ref=e40]: - link "Blog" [ref=e41] [cursor=pointer]: - /url: /blog/ - listitem [ref=e42]: - link "Einblendmenü umschalten mit Leertaste" [ref=e43] [cursor=pointer]: - /url: /formulare/ - text: Formulare - generic [ref=e45]: - button "Suche einblenden" [ref=e47] [cursor=pointer]: - img [ref=e49] - button "Farbschema wechseln" [ref=e51] [cursor=pointer]: - img [ref=e52] - list "Sprache der Website" [ref=e54]: - listitem [ref=e55]: - link "Deutsch" [ref=e56] [cursor=pointer]: - /url: /design-basiseigenschaften/ - text: De - listitem [ref=e57]: - generic "An english version of this page is not available." [ref=e58]: En - navigation "Brotkrumen-Navigation" [ref=e59]: - generic [ref=e60]: - paragraph [ref=e61]: "Sie sind here:" - list [ref=e62]: - listitem [ref=e63]: - link "Startseite" [ref=e64] [cursor=pointer]: - /url: / - img [ref=e65] - listitem [ref=e67]: - text: / - generic [ref=e68]: Basics - main [ref=e69]: - generic [ref=e71]: - heading "Buttons" [level=2] [ref=e73] - heading "Als Button gestylte Links" [level=4] [ref=e74] - generic [ref=e75]: - link "Default" [ref=e76] [cursor=pointer]: - /url: "#" - link "Primary" [ref=e77] [cursor=pointer]: - /url: "#" - link "Secondary" [ref=e78] [cursor=pointer]: - /url: "#" - link "Success" [ref=e79] [cursor=pointer]: - /url: "#" - link "Warning" [ref=e80] [cursor=pointer]: - /url: "#" - link "Danger" [ref=e81] [cursor=pointer]: - /url: "#" - generic [ref=e82]: - link "Default" [ref=e83] [cursor=pointer]: - /url: "#" - link "Primary" [ref=e84] [cursor=pointer]: - /url: "#" - link "Secondary" [ref=e85] [cursor=pointer]: - /url: "#" - link "Success" [ref=e86] [cursor=pointer]: - /url: "#" - link "Warning" [ref=e87] [cursor=pointer]: - /url: "#" - link "Danger" [ref=e88] [cursor=pointer]: - /url: "#" - generic [ref=e89]: - link "Default (small)" [ref=e90] [cursor=pointer]: - /url: "#" - link "Primary (small)" [ref=e91] [cursor=pointer]: - /url: "#" - link "Secondary (small)" [ref=e92] [cursor=pointer]: - /url: "#" - link "Success (small)" [ref=e93] [cursor=pointer]: - /url: "#" - link "Warning (small)" [ref=e94] [cursor=pointer]: - /url: "#" - link "Danger (small)" [ref=e95] [cursor=pointer]: - /url: "#" - heading "Button-Elemente" [level=4] [ref=e96] - generic [ref=e97]: - button "Default" [ref=e98] [cursor=pointer] - button "Primary" [ref=e99] [cursor=pointer] - button "Secondary" [ref=e100] [cursor=pointer] - button "Success" [ref=e101] [cursor=pointer] - button "Warning" [ref=e102] [cursor=pointer] - button "Danger" [ref=e103] [cursor=pointer] - generic [ref=e104]: - button "Default" [ref=e105] [cursor=pointer] - button "Primary" [ref=e106] [cursor=pointer] - button "Secondary" [ref=e107] [cursor=pointer] - button "Success" [ref=e108] [cursor=pointer] - button "Warning" [ref=e109] [cursor=pointer] - button "Danger" [ref=e110] [cursor=pointer] - generic [ref=e112]: - heading "Alerts" [level=2] [ref=e114] - alert [ref=e115]: A simple success alert—check it out! - alert [ref=e116]: A simple danger alert—check it out! - alert [ref=e117]: A simple warning alert—check it out! - alert [ref=e118]: A simple info alert—check it out! - alert [ref=e119]: - heading "Well done!" [level=4] [ref=e120] - paragraph [ref=e121]: Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. - separator [ref=e122] - paragraph [ref=e123]: Whenever you need to, be sure to use margin utilities to keep things nice and tidy. - generic [ref=e125]: - heading "Badges" [level=2] [ref=e127] - list [ref=e128]: - listitem [ref=e129]: - generic [ref=e130]: Badge (default) - listitem [ref=e131]: - link "Badge (default)" [ref=e132] [cursor=pointer]: - /url: "#" - list [ref=e133]: - listitem [ref=e134]: - generic [ref=e135]: Badge (Blog tag) - listitem [ref=e136]: - link "Badge (Blog tag)" [ref=e137] [cursor=pointer]: - /url: "#" - contentinfo [ref=e138]: - generic [ref=e141]: - navigation [ref=e142]: - list [ref=e143]: - listitem [ref=e144]: - button "Cookie-Einstellungen" [ref=e145] [cursor=pointer] - listitem [ref=e146]: - link "Datenschutzerklärung" [ref=e147] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e148]: - link "Impressum" [ref=e149] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e150]: - paragraph [ref=e151]: © Marketing Factory Digital GmbH - paragraph [ref=e152]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e153] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ ``` # Test source ```ts 1 | import { test, expect } from '@playwright/test'; 2 | import { setup, scrollToBottom, setDarkTheme, hideElements } from '../helpers/utils'; 3 | 4 | const PAGE_HEADER = ['.c-page-header']; 5 | const snap = (name: string) => ({ name: `${name}.png`, fullPage: true } as const); 6 | 7 | test.describe('other', () => { 8 | test('styling', async ({ page }) => { 9 | await setup(page, '/design-basiseigenschaften/'); 10 | await page.waitForTimeout(2000); > 11 | await expect(page).toHaveScreenshot(snap('other-styling')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 12 | await setDarkTheme(page); 13 | await expect(page).toHaveScreenshot(snap('other-styling-dark')); 14 | }); 15 | 16 | test('rte', async ({ page }) => { 17 | await setup(page, '/richtext-editor/'); 18 | await expect(page).toHaveScreenshot(snap('other-rte')); 19 | await setDarkTheme(page); 20 | await expect(page).toHaveScreenshot(snap('other-rte-dark')); 21 | }); 22 | 23 | test('rte-syntax-highlighting', async ({ page }) => { 24 | await setup(page, '/richtext-editor/syntax-highlighting/'); 25 | await expect(page).toHaveScreenshot(snap('other-rte-syntax-highlighting')); 26 | }); 27 | }); 28 | 29 | test.describe('content', () => { 30 | test('accordion', async ({ page }) => { 31 | await setup(page, '/inhaltselemente/accordion/'); 32 | await hideElements(page, PAGE_HEADER); 33 | await scrollToBottom(page); 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 hideElements(page, PAGE_HEADER); 71 | await scrollToBottom(page); 72 | await expect(page).toHaveScreenshot(snap('content-text-full-height-image')); 73 | }); 74 | 75 | test('timeline', async ({ page }) => { 76 | await setup(page, '/inhaltselemente/timeline/'); 77 | await hideElements(page, PAGE_HEADER); 78 | await scrollToBottom(page); 79 | await expect(page).toHaveScreenshot(snap('content-timeline')); 80 | }); 81 | 82 | test('divider', async ({ page }) => { 83 | await setup(page, '/inhaltselemente/divider/'); 84 | await expect(page).toHaveScreenshot(snap('content-divider')); 85 | }); 86 | 87 | test('container', async ({ page }) => { 88 | await setup(page, '/inhaltselemente/container/'); 89 | await hideElements(page, PAGE_HEADER); 90 | await scrollToBottom(page); 91 | await expect(page).toHaveScreenshot(snap('content-container')); 92 | }); 93 | 94 | test('card-group', async ({ page }) => { 95 | await setup(page, '/inhaltselemente/card-group/'); 96 | await expect(page).toHaveScreenshot(snap('content-card-group')); 97 | }); 98 | 99 | test('quote', async ({ page }) => { 100 | await setup(page, '/inhaltselemente/quote/'); 101 | await expect(page).toHaveScreenshot(snap('content-quote')); 102 | }); 103 | 104 | test('text-icon', async ({ page }) => { 105 | await setup(page, '/inhaltselemente/text-icon/'); 106 | await expect(page).toHaveScreenshot(snap('content-text-icon')); 107 | await setDarkTheme(page); 108 | await expect(page).toHaveScreenshot(snap('content-text-icon-dark')); 109 | }); 110 | 111 | test('text-in-columns', async ({ page }) => { ```