# 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 >> slider-slide2grid - Location: visual/mfc-corporate-de.spec.ts:49:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed 1906 pixels (ratio 0.01 of all image pixels) are different. Snapshot: content-slider-slide2grid.png Call log: - Expect "toHaveScreenshot(content-slider-slide2grid.png)" with timeout 15000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 1906 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 - 1906 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]: Slider (slide2grid) - main [ref=e42]: - generic [ref=e46]: - heading "Aus unseren Leistungen." [level=2] [ref=e47] - generic [ref=e48]: - generic [ref=e49]: slide 1 to 2 of 5 - generic [ref=e52]: - generic [ref=e53]: - img [ref=e55] - generic [ref=e57]: - heading "Seamless CMS Integration" [level=3] [ref=e58] - paragraph [ref=e59]: - text: Erweitern Sie Ihren Online-Shop um einen informativen Ratgeberbereich und schaffen Sie somit ein Markenerlebnis für Ihre Kunden. Durch die Implementierung einer Schnittstelle zwischen dem Shopsystem - link "Shopware" [ref=e60] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/shopware/ - text: und dem Enterprise CMS - link "TYPO3" [ref=e61] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/ - text: sorgen wir für Synergie-Effekte zwischen beiden Systemen und prägen das Markenbild Ihrer Kunden nachhaltig positiv. - link "Mehr erfahren" [ref=e63] [cursor=pointer]: - /url: https://www.marketing-factory.de/leistungen/programmierung/#c207 - generic [ref=e64]: - img [ref=e66] - generic [ref=e69]: - heading "Konzeption" [level=3] [ref=e70] - paragraph [ref=e71]: Mehr als 25 Jahre Erfahrung als Full-Service-Experte helfen uns, Ihre Website ganzheitlich und nachhaltig zu konzipieren und eine passgenaue digitale Lösung für Sie zu entwickeln, mit der Sie Ihre Zielgruppe optimal erreichen und Ihre (Online-)Mission erfüllen können. - link "Mehr erfahren" [ref=e73] [cursor=pointer]: - /url: https://www.marketing-factory.de/leistungen/beratung-und-konzeption/#c271 - generic [ref=e74]: - img [ref=e76] - generic [ref=e78]: - heading [level=3] [ref=e79]: Entwicklung und Integration von Schnittstellen - paragraph [ref=e80]: Mit unserer langjährigen Erfahrung und Kompetenz im Bereich Schnittstellen-Entwicklung und -Integration vernetzen wir Ihre bestehenden internen und externen Systeme zu einer reibungslos funktionierenden IT-Architektur. Durch die Schaffung einer einheitlichen Datenstruktur ist Ihre Systemlandschaft jederzeit skalierbar und überzeugt auch bei verändernden Anforderungen. - link [ref=e82] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/schnittstellen/ - text: Mehr erfahren - generic [ref=e83]: - img [ref=e85] - generic [ref=e91]: - heading [level=3] [ref=e92]: PIM-Integration - paragraph [ref=e93]: Möchten Sie Ihre Website, Ihren Online-Shop, Ihren Produktkatalog oder Produktkonfigurator zentral und (teil-)automatisiert mit Produktinformationen und -medien direkt aus Ihrem PIM-System befüllen? Wir begleiten Sie bei der Implementierung eines PIM-Systems und erstellen die passende Schnittstelle zwischen Ihren Vertriebs- und Kommunikationskanälen und Ihrem PIM. - link [ref=e95] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/schnittstellen/pim-erp-anbindungen/ - text: Mehr erfahren - generic [ref=e96]: - img [ref=e98] - generic [ref=e104]: - heading [level=3] [ref=e105]: Website-Relaunch - paragraph [ref=e106]: "Konzeption, technische Umsetzung, Relaunch: Gemeinsam mit Ihnen definieren wir die für Ihr Unternehmen wichtigen Ziele, legen die technischen und inhaltlichen Anforderungen fest und bringen Ihre in die Jahre gekommene Website auf den neuesten Stand der Technik. Mit optimaler Sicherheit, verkürzter Ladezeit und ohne Rankingverluste in den Suchmaschinen." - link [ref=e108] [cursor=pointer]: - /url: https://www.marketing-factory.de/leistungen/beratung-und-konzeption/ - text: Mehr erfahren - contentinfo [ref=e109]: - generic [ref=e112]: - navigation [ref=e113]: - list [ref=e114]: - listitem [ref=e115]: - button "Cookie-Einstellungen" [ref=e116] [cursor=pointer] - listitem [ref=e117]: - link "Datenschutzerklärung" [ref=e118] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e119]: - link "Impressum" [ref=e120] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e121]: - paragraph [ref=e122]: © Marketing Factory Digital GmbH - paragraph [ref=e123]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e124] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ - generic [ref=e127]: - strong [ref=e128]: Bildnachweise - list ``` # 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')); 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')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 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')); 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 | ```