# 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: A snapshot doesn't exist at /Users/mfdrunner/builds/pDk_92X_S/0/mfc/corporate/typo3/playwright/visual/mfc-corporate-de.spec.ts-snapshots/content-slider-slide2grid-de-desktop-darwin.png, writing actual. ``` ``` Error: A snapshot doesn't exist at /Users/mfdrunner/builds/pDk_92X_S/0/mfc/corporate/typo3/playwright/visual/mfc-corporate-de.spec.ts-snapshots/content-slider-slide2grid-dark-de-desktop-darwin.png, writing actual. ``` # 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]: - img [ref=e48] - button "Farbschema wechseln" [ref=e50] [cursor=pointer]: - img [ref=e51] - list "Sprache der Website" [ref=e53]: - listitem [ref=e54]: - link "Deutsch" [ref=e55] [cursor=pointer]: - /url: /inhaltselemente/slider-slide2grid/ - text: De - listitem [ref=e56]: - link "English" [ref=e57] [cursor=pointer]: - /url: https://www.marketing-factory.com.styleguide.mfc.gmbh/content-elements/slider-slide2grid/ - text: 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: / - img [ref=e64] - listitem [ref=e66]: - text: / - link "Inhaltselemente" [ref=e67] [cursor=pointer]: - /url: /inhaltselemente/ - generic [ref=e68]: Inhaltselemente - listitem [ref=e69]: - text: / - generic [ref=e70]: Slider (slide2grid) - main [ref=e71]: - generic [ref=e76]: - generic [ref=e77]: - img [ref=e79] - generic [ref=e81]: - heading "Seamless CMS Integration" [level=3] [ref=e82] - paragraph [ref=e83]: - 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=e84] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/shopware/ - text: und dem Enterprise CMS - link "TYPO3" [ref=e85] [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=e87] [cursor=pointer]: - /url: https://www.marketing-factory.de/leistungen/programmierung/#c207 - generic [ref=e88]: - img [ref=e90] - generic [ref=e93]: - heading "Konzeption" [level=3] [ref=e94] - paragraph [ref=e95]: 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=e97] [cursor=pointer]: - /url: https://www.marketing-factory.de/leistungen/beratung-und-konzeption/#c271 - generic [ref=e98]: - img [ref=e100] - generic [ref=e102]: - heading "Entwicklung und Integration von Schnittstellen" [level=3] [ref=e103] - paragraph [ref=e104]: 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 "Mehr erfahren" [ref=e106] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/schnittstellen/ - generic [ref=e107]: - img [ref=e109] - generic [ref=e115]: - heading "PIM-Integration" [level=3] [ref=e116] - paragraph [ref=e117]: 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 "Mehr erfahren" [ref=e119] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/schnittstellen/pim-erp-anbindungen/ - generic [ref=e120]: - img [ref=e122] - generic [ref=e127]: - heading "Website-Relaunch" [level=3] [ref=e128] - paragraph [ref=e129]: "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 "Mehr erfahren" [ref=e131] [cursor=pointer]: - /url: https://www.marketing-factory.de/leistungen/beratung-und-konzeption/ - heading "Aus unseren Leistungen." [level=2] [ref=e132] - contentinfo [ref=e133]: - generic [ref=e136]: - navigation [ref=e137]: - list [ref=e138]: - listitem [ref=e139]: - button "Cookie-Einstellungen" [ref=e140] [cursor=pointer] - listitem [ref=e141]: - link "Datenschutzerklärung" [ref=e142] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e143]: - link "Impressum" [ref=e144] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e145]: - paragraph [ref=e146]: © Marketing Factory Digital GmbH - paragraph [ref=e147]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e148] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ - generic [ref=e151]: - strong [ref=e152]: 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')); 52 | await setDarkTheme(page); > 53 | await expect(page).toHaveScreenshot(snap('content-slider-slide2grid-dark')); | ^ Error: A snapshot doesn't exist at /Users/mfdrunner/builds/pDk_92X_S/0/mfc/corporate/typo3/playwright/visual/mfc-corporate-de.spec.ts-snapshots/content-slider-slide2grid-dark-de-desktop-darwin.png, writing actual. 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 | 152 | test('1-image-beside-text', async ({ page }) => { 153 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text/'); ```