# 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 >> space-before-after - Location: visual/mfc-corporate-de.spec.ts:131:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed 14740 pixels (ratio 0.01 of all image pixels) are different. Snapshot: content-space-before-after.png Call log: - Expect "toHaveScreenshot(content-space-before-after.png)" with timeout 15000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 14740 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 - 14740 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 "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: / - img [ref=e35] - listitem [ref=e37]: - text: / - link "Inhaltselemente" [ref=e38] [cursor=pointer]: - /url: /inhaltselemente/ - generic [ref=e39]: Inhaltselemente - listitem [ref=e40]: - text: / - generic [ref=e41]: Space before/after - main [ref=e42]: - heading "Space before/after" [level=1] [ref=e46] - heading "Space before" [level=2] [ref=e50] - generic [ref=e52]: - 'heading "Space before: Standard" [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. - paragraph [ref=e56]: 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=e58]: - 'heading "Space before: Extra Small" [level=3] [ref=e60]' - paragraph [ref=e61]: 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. - paragraph [ref=e62]: 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=e64]: - 'heading "Space before: Small" [level=3] [ref=e66]' - paragraph [ref=e67]: 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. - paragraph [ref=e68]: 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=e70]: - 'heading "Space before: Medium" [level=3] [ref=e72]' - paragraph [ref=e73]: 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. - paragraph [ref=e74]: 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=e76]: - 'heading "Space before: Large" [level=3] [ref=e78]' - paragraph [ref=e79]: 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. - paragraph [ref=e80]: 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=e82]: - 'heading "Space before: Extra Large" [level=3] [ref=e84]' - paragraph [ref=e85]: 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. - 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. - generic [ref=e88]: - 'heading "Space before: No space" [level=3] [ref=e90]' - paragraph [ref=e91]: 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. - paragraph [ref=e92]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - heading "Space after" [level=2] [ref=e96] - generic [ref=e98]: - 'heading "Space after: Standard" [level=3] [ref=e100]' - 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. - paragraph [ref=e102]: 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 "Space after: Extra Small" [level=3] [ref=e106]' - paragraph [ref=e107]: 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. - paragraph [ref=e108]: 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=e110]: - 'heading "Space after: Small" [level=3] [ref=e112]' - paragraph [ref=e113]: 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. - paragraph [ref=e114]: 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=e116]: - 'heading "Space after: Medium" [level=3] [ref=e118]' - paragraph [ref=e119]: 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. - paragraph [ref=e120]: 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=e122]: - 'heading "Space after: Large" [level=3] [ref=e124]' - paragraph [ref=e125]: 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. - paragraph [ref=e126]: 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=e128]: - 'heading "Space after: Extra Large" [level=3] [ref=e130]' - paragraph [ref=e131]: 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. - paragraph [ref=e132]: 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=e134]: - 'heading "Space after: No space" [level=3] [ref=e136]' - paragraph [ref=e137]: 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. - paragraph [ref=e138]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - heading "space_after following space_before (CSS margin collapsing)" [level=2] [ref=e142] - generic [ref=e144]: - 'heading "Space after: Large" [level=3] [ref=e146]' - paragraph [ref=e147]: 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. - paragraph [ref=e148]: 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=e150]: - 'heading "Space before: Large" [level=3] [ref=e152]' - paragraph [ref=e153]: 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. - paragraph [ref=e154]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - contentinfo [ref=e155]: - generic [ref=e158]: - navigation [ref=e159]: - list [ref=e160]: - listitem [ref=e161]: - button "Cookie-Einstellungen" [ref=e162] [cursor=pointer] - listitem [ref=e163]: - link "Datenschutzerklärung" [ref=e164] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e165]: - link "Impressum" [ref=e166] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e167]: - paragraph [ref=e168]: © Marketing Factory Digital GmbH - paragraph [ref=e169]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e170] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ ``` # Test source ```ts 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 }) => { 112 | await setup(page, '/inhaltselemente/text-in-columns/'); 113 | await expect(page).toHaveScreenshot(snap('content-text-in-columns')); 114 | }); 115 | 116 | test('menu-sitemap', async ({ page }) => { 117 | await setup(page, '/inhaltselemente/menu-sitemap/'); 118 | await expect(page).toHaveScreenshot(snap('content-menu-sitemap')); 119 | }); 120 | 121 | test('menu-section', async ({ page }) => { 122 | await setup(page, '/inhaltselemente/menu-section/'); 123 | await expect(page).toHaveScreenshot(snap('content-menu-section')); 124 | }); 125 | 126 | test('menu-pages', async ({ page }) => { 127 | await setup(page, '/inhaltselemente/menu-pages/'); 128 | await expect(page).toHaveScreenshot(snap('content-menu-pages')); 129 | }); 130 | 131 | test('space-before-after', async ({ page }) => { 132 | await setup(page, '/inhaltselemente/space-before-after/'); > 133 | await expect(page).toHaveScreenshot(snap('content-space-before-after')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 134 | }); 135 | }); 136 | 137 | test.describe('content › textmedia › pixel-images', () => { 138 | test('1-image-top-bottom-centered', async ({ page }) => { 139 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-oben-unten-zentriert/'); 140 | await hideElements(page, PAGE_HEADER); 141 | await scrollToBottom(page); 142 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-top-bottom-centered')); 143 | }); 144 | 145 | test('1-image-beside-text-centered', async ({ page }) => { 146 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text-zentriert/'); 147 | await hideElements(page, PAGE_HEADER); 148 | await scrollToBottom(page); 149 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text-centered')); 150 | }); 151 | 152 | test('1-image-beside-text', async ({ page }) => { 153 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text/'); 154 | await hideElements(page, PAGE_HEADER); 155 | await scrollToBottom(page); 156 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text')); 157 | }); 158 | 159 | test('2-images-top-bottom-centered', async ({ page }) => { 160 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/2-bilder-oben-unten-zentriert/'); 161 | await hideElements(page, PAGE_HEADER); 162 | await scrollToBottom(page); 163 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-2-images-top-bottom-centered')); 164 | }); 165 | 166 | test('2-images-beside-text-centered', async ({ page }) => { 167 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/2-bilder-neben-text-zentriert/'); 168 | await hideElements(page, PAGE_HEADER); 169 | await scrollToBottom(page); 170 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-2-images-beside-text-centered')); 171 | }); 172 | 173 | test('2-images-beside-text', async ({ page }) => { 174 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/2-bilder-neben-text/'); 175 | await hideElements(page, PAGE_HEADER); 176 | await scrollToBottom(page); 177 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-2-images-beside-text')); 178 | }); 179 | 180 | test('1-image-beside-text-centered-33-percent', async ({ page }) => { 181 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text-zentriert-33-bildbreite/'); 182 | await hideElements(page, PAGE_HEADER); 183 | await scrollToBottom(page); 184 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text-centered-33-percent')); 185 | }); 186 | 187 | test('1-image-beside-text-33-percent', async ({ page }) => { 188 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text-33-bildbreite/'); 189 | await hideElements(page, PAGE_HEADER); 190 | await scrollToBottom(page); 191 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text-33-percent')); 192 | }); 193 | }); 194 | 195 | test.describe('content › textmedia › svg-images', () => { 196 | test('1-image-top-bottom-centered', async ({ page }) => { 197 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-oben-unten-zentriert/'); 198 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-top-bottom-centered')); 199 | }); 200 | 201 | test('1-image-beside-text-centered', async ({ page }) => { 202 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text-zentriert/'); 203 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-centered')); 204 | }); 205 | 206 | test('1-image-beside-text', async ({ page }) => { 207 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text/'); 208 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text')); 209 | await setDarkTheme(page); 210 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-dark')); 211 | }); 212 | 213 | test('2-images-top-bottom-centered', async ({ page }) => { 214 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/2-bilder-oben-unten-zentriert/'); 215 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-2-images-top-bottom-centered')); 216 | }); 217 | 218 | test('2-images-beside-text-centered', async ({ page }) => { 219 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/2-bilder-neben-text-zentriert/'); 220 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-2-images-beside-text-centered')); 221 | }); 222 | 223 | test('2-images-beside-text', async ({ page }) => { 224 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/2-bilder-neben-text/'); 225 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-2-images-beside-text')); 226 | }); 227 | 228 | test('1-image-beside-text-centered-33-percent', async ({ page }) => { 229 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text-zentriert-33-bildbreite/'); 230 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-centered-33-percent')); 231 | }); 232 | 233 | test('1-image-beside-text-33-percent', async ({ page }) => { ```