# 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 >> content >> accordion - Location: visual/mfc-corporate-de.spec.ts:32:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed Expected an image 1288px by 6045px, received 1288px by 5917px. Snapshot: content-accordion.png Call log: - Expect "toHaveScreenshot(content-accordion.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 1288px by 6045px, received 1288px by 5917px. - 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 1288px by 6045px, received 1288px by 5917px. ``` # 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" [ref=e30] [cursor=pointer]: - /url: /design-basiseigenschaften/ - listitem [ref=e31]: - link "Einblendmenü umschalten mit Leertaste" [ref=e32] [cursor=pointer]: - /url: /inhaltselemente/ - text: Inhaltselemente - listitem [ref=e33]: - link "Einblendmenü umschalten mit Leertaste" [ref=e34] [cursor=pointer]: - /url: /richtext-editor/ - text: RTE - listitem [ref=e35]: - link "Einblendmenü umschalten mit Leertaste" [ref=e36] [cursor=pointer]: - /url: /seitentypen/ - text: Seitentypen - listitem [ref=e37]: - link "Einblendmenü umschalten mit Leertaste" [ref=e38] [cursor=pointer]: - /url: /plugins/ - text: Plugins - listitem [ref=e39]: - link "Blog" [ref=e40] [cursor=pointer]: - /url: /blog/ - listitem [ref=e41]: - link "Einblendmenü umschalten mit Leertaste" [ref=e42] [cursor=pointer]: - /url: /formulare/ - text: Formulare - generic [ref=e44]: - button "Suche einblenden" [ref=e46] [cursor=pointer] - button "Farbschema wechseln" [ref=e50] [cursor=pointer] - list "Sprache der Website" [ref=e53]: - listitem [ref=e54]: - link "Deutsch" [ref=e55] [cursor=pointer]: - /url: /inhaltselemente/accordion/ - text: De - listitem [ref=e56]: - generic "An english version of this page is not available." [ref=e57]: En - navigation "Brotkrumen-Navigation" [ref=e58]: - generic [ref=e59]: - paragraph [ref=e60]: "Sie sind here:" - list [ref=e61]: - listitem [ref=e62]: - link "Startseite" [ref=e63] [cursor=pointer]: - /url: / - listitem [ref=e66]: - text: / - link "Inhaltselemente" [ref=e67] [cursor=pointer]: - /url: /inhaltselemente/ - listitem [ref=e69]: - text: / - generic [ref=e70]: Accordion - main [ref=e71]: - generic [ref=e73]: - heading "Accordion (geschlossen)" [level=2] [ref=e75] - generic [ref=e76]: - group [ref=e77]: - generic "Accordion-Element 1" [ref=e78] [cursor=pointer] - group [ref=e81]: - generic "Accordion-Element 2" [ref=e82] [cursor=pointer] - group [ref=e85]: - generic "Accordion-Element 3" [ref=e86] [cursor=pointer] - generic [ref=e90]: - heading "Accordion (nur Text, erstes Element aktiv)" [level=2] [ref=e92] - generic [ref=e93]: - group [ref=e94]: - generic "Accordion-Element 1" [ref=e95] [cursor=pointer] - paragraph [ref=e101]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - group [ref=e102]: - generic "Accordion-Element 2" [ref=e103] [cursor=pointer] - group [ref=e106]: - generic "Accordion-Element 3" [ref=e107] [cursor=pointer] - generic [ref=e111]: - 'heading "Erstes Accordion-Element aktiv: Bildausrichtung links" [level=2] [ref=e113]' - generic [ref=e114]: - group [ref=e115]: - generic "1 Bild links" [ref=e116] [cursor=pointer] - generic [ref=e120]: - figure [ref=e124] - paragraph [ref=e127]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - group [ref=e128]: - generic "1 Bild rechts" [ref=e129] [cursor=pointer] - group [ref=e132]: - generic "2 Bilder oben" [ref=e133] [cursor=pointer] - group [ref=e136]: - generic "1 Bild unten" [ref=e137] [cursor=pointer] - generic [ref=e141]: - 'heading "Zweites Accordion-Element aktiv: Bildausrichtung rechts" [level=2] [ref=e143]' - generic [ref=e144]: - group [ref=e145]: - generic "1 Bild links" [ref=e146] [cursor=pointer] - group [ref=e149]: - generic "1 Bild rechts" [ref=e150] [cursor=pointer] - generic [ref=e154]: - figure [ref=e158] - generic [ref=e160]: - paragraph [ref=e161]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - paragraph [ref=e162]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - group [ref=e163]: - generic "2 Bilder oben" [ref=e164] [cursor=pointer] - group [ref=e167]: - generic "1 Bild unten" [ref=e168] [cursor=pointer] - generic [ref=e172]: - 'heading "Drittes Accordion-Element aktiv: Bildausrichtung oben" [level=2] [ref=e174]' - generic [ref=e175]: - group [ref=e176]: - generic "1 Bild links" [ref=e177] [cursor=pointer] - group [ref=e180]: - generic "1 Bild rechts" [ref=e181] [cursor=pointer] - group [ref=e184]: - generic "2 Bilder oben" [ref=e185] [cursor=pointer] - generic [ref=e189]: - generic [ref=e191]: - figure [ref=e193] - figure [ref=e196] - paragraph [ref=e199]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - group [ref=e200]: - generic "1 Bild unten" [ref=e201] [cursor=pointer] - generic [ref=e205]: - 'heading "Viertes Accordion-Element aktiv: Bildausrichtung unten" [level=2] [ref=e207]' - generic [ref=e208]: - group [ref=e209]: - generic "1 Bild links" [ref=e210] [cursor=pointer] - group [ref=e213]: - generic "1 Bild rechts" [ref=e214] [cursor=pointer] - group [ref=e217]: - generic "2 Bilder oben" [ref=e218] [cursor=pointer] - group [ref=e221]: - generic "1 Bild unten" [ref=e222] [cursor=pointer] - generic [ref=e226]: - figure [ref=e230] - paragraph [ref=e233]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - generic [ref=e235]: - 'heading "Viertes Accordion-Element aktiv: Bildausrichtung unten (1 Bild, zwei Bildspalten)" [level=2] [ref=e237]' - generic [ref=e238]: - group [ref=e239]: - generic "1 Bild links" [ref=e240] [cursor=pointer] - group [ref=e243]: - generic "1 Bild rechts" [ref=e244] [cursor=pointer] - group [ref=e247]: - generic "2 Bilder oben" [ref=e248] [cursor=pointer] - group [ref=e251]: - generic "1 Bild unten (2 Bildspalten)" [ref=e252] [cursor=pointer] - generic [ref=e256]: - figure [ref=e260] - paragraph [ref=e263]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - contentinfo [ref=e264]: - generic [ref=e266]: - navigation [ref=e267]: - list [ref=e268]: - listitem [ref=e269]: - button "Cookie-Einstellungen" [ref=e270] [cursor=pointer] - listitem [ref=e271]: - link "Datenschutzerklärung" [ref=e272] [cursor=pointer]: - /url: https://www.marketing-factory.de.renovate-develop-lock-file-maintenance.review.mfc.gmbh/datenschutzerklaerung/ - listitem [ref=e273]: - link "Impressum" [ref=e274] [cursor=pointer]: - /url: https://www.marketing-factory.de.renovate-develop-lock-file-maintenance.review.mfc.gmbh/impressum/ - generic [ref=e275]: - paragraph [ref=e276]: © Marketing Factory Digital GmbH - paragraph [ref=e277]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e278] [cursor=pointer]: - /url: https://www.marketing-factory.de.renovate-develop-lock-file-maintenance.review.mfc.gmbh/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ - generic [ref=e281]: - strong [ref=e282]: Bildnachweise - list ``` # 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')); 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')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 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 | }); 114 | 115 | test('menu-section', async ({ page }) => { 116 | await setup(page, '/inhaltselemente/menu-section/'); 117 | await expect(page).toHaveScreenshot(snap('content-menu-section')); 118 | }); 119 | 120 | test('menu-pages', async ({ page }) => { 121 | await setup(page, '/inhaltselemente/menu-pages/'); 122 | await expect(page).toHaveScreenshot(snap('content-menu-pages')); 123 | }); 124 | 125 | test('space-before-after', async ({ page }) => { 126 | await setup(page, '/inhaltselemente/space-before-after/'); 127 | await expect(page).toHaveScreenshot(snap('content-space-before-after')); 128 | }); 129 | }); 130 | 131 | test.describe('content › textmedia › pixel-images', () => { 132 | test('1-image-top-bottom-centered', async ({ page }) => { 133 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-oben-unten-zentriert/'); 134 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-top-bottom-centered')); ```