# 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 >> card-group - Location: visual/mfc-corporate-de.spec.ts:88:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed Expected an image 328px by 4758px, received 328px by 4630px. Snapshot: content-card-group.png Call log: - Expect "toHaveScreenshot(content-card-group.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 328px by 4758px, received 328px by 4630px. - 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 328px by 4758px, received 328px by 4630px. ``` # Page snapshot ```yaml - generic [ref=e2]: - link "Zum Inhalt springen" [ref=e3] [cursor=pointer]: - /url: "#page-content" - banner [ref=e4]: - generic [ref=e5]: - link "Marketing Factory Digital GmbH" [ref=e6] [cursor=pointer]: - /url: / - img "Marketing Factory Digital GmbH" [ref=e7] - link "Kontaktformular" [ref=e26] [cursor=pointer]: - /url: /formulare/kontaktformular/ - button "Navigation" [expanded] [ref=e27] [cursor=pointer] - navigation "Brotkrumen-Navigation" [ref=e29]: - generic [ref=e30]: - paragraph [ref=e31]: "Sie sind here:" - list [ref=e32]: - listitem [ref=e33]: - link "Startseite" [ref=e34] [cursor=pointer]: - /url: / - listitem [ref=e37]: - text: / - link "Inhaltselemente" [ref=e38] [cursor=pointer]: - /url: /inhaltselemente/ - listitem [ref=e40]: - text: / - generic [ref=e41]: Card Group - main [ref=e42]: - generic [ref=e44]: - heading "Card Group mit Pixel-Bildern" [level=2] [ref=e46] - generic [ref=e47]: - generic [ref=e49]: - img "Teilnehmer der T3CON 2015" [ref=e52] - generic [ref=e53]: - heading "Card 1" [level=3] [ref=e54] - paragraph [ref=e55]: 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=e57]: - img "Teilnehmer der T3CON 2015" [ref=e60] - generic [ref=e61]: - heading "Card 2" [level=3] [ref=e62] - paragraph [ref=e63]: 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. - generic [ref=e65]: - img "Teilnehmer der T3CON 2015" [ref=e68] - generic [ref=e69]: - heading "Card 3" [level=3] [ref=e70] - paragraph [ref=e71]: 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. - generic [ref=e73]: - heading "Card Group mit SVG-Bildern" [level=2] [ref=e75] - generic [ref=e76]: - generic [ref=e84]: - heading "Card 1" [level=3] [ref=e85] - paragraph [ref=e86]: 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=e94]: - heading "Card 2" [level=3] [ref=e95] - paragraph [ref=e96]: 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. - generic [ref=e104]: - heading "Card 3" [level=3] [ref=e105] - paragraph [ref=e106]: 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. - contentinfo [ref=e107]: - generic [ref=e109]: - navigation [ref=e110]: - list [ref=e111]: - listitem [ref=e112]: - button "Cookie-Einstellungen" [ref=e113] [cursor=pointer] - listitem [ref=e114]: - link "Datenschutzerklärung" [ref=e115] [cursor=pointer]: - /url: https://www.marketing-factory.de.renovate-develop-lock-file-maintenance.review.mfc.gmbh/datenschutzerklaerung/ - listitem [ref=e116]: - link "Impressum" [ref=e117] [cursor=pointer]: - /url: https://www.marketing-factory.de.renovate-develop-lock-file-maintenance.review.mfc.gmbh/impressum/ - generic [ref=e118]: - paragraph [ref=e119]: © Marketing Factory Digital GmbH - paragraph [ref=e120]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e121] [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=e124]: - strong [ref=e125]: Bildnachweise - list [ref=e126]: - listitem [ref=e127]: - link "\"Community\"" [ref=e128] [cursor=pointer]: - /url: https://www.flickr.com/photos/typo3/22591723990/in/album-72157660826109695/ - text: ":" - link "Flo Huber Fotografie" [ref=e129] [cursor=pointer]: - /url: https://www.flickr.com/photos/typo3/ - text: "/ Lizenz:" - link "CC0 1.0" [ref=e130] [cursor=pointer]: - /url: https://creativecommons.org/publicdomain/zero/1.0/ - listitem [ref=e131]: "\"TYPO3\": © TYPO3 Association" ``` # 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')); 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')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 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')); 135 | }); 136 | 137 | test('1-image-beside-text-centered', async ({ page }) => { 138 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text-zentriert/'); 139 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text-centered')); 140 | }); 141 | 142 | test('1-image-beside-text', async ({ page }) => { 143 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text/'); 144 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text')); 145 | }); 146 | 147 | test('2-images-top-bottom-centered', async ({ page }) => { 148 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/2-bilder-oben-unten-zentriert/'); 149 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-2-images-top-bottom-centered')); 150 | }); 151 | 152 | test('2-images-beside-text-centered', async ({ page }) => { 153 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/2-bilder-neben-text-zentriert/'); 154 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-2-images-beside-text-centered')); 155 | }); 156 | 157 | test('2-images-beside-text', async ({ page }) => { 158 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/2-bilder-neben-text/'); 159 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-2-images-beside-text')); 160 | }); 161 | 162 | test('1-image-beside-text-centered-33-percent', async ({ page }) => { 163 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text-zentriert-33-bildbreite/'); 164 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text-centered-33-percent')); 165 | }); 166 | 167 | test('1-image-beside-text-33-percent', async ({ page }) => { 168 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text-33-bildbreite/'); 169 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text-33-percent')); 170 | }); 171 | }); 172 | 173 | test.describe('content › textmedia › svg-images', () => { 174 | test('1-image-top-bottom-centered', async ({ page }) => { 175 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-oben-unten-zentriert/'); 176 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-top-bottom-centered')); 177 | }); 178 | 179 | test('1-image-beside-text-centered', async ({ page }) => { 180 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text-zentriert/'); 181 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-centered')); 182 | }); 183 | 184 | test('1-image-beside-text', async ({ page }) => { 185 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text/'); 186 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text')); 187 | await setDarkTheme(page); 188 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-dark')); 189 | }); 190 | ```