# 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 >> comparison-module - Location: visual/mfc-corporate-de.spec.ts:56: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-comparison-module-left-de-phone-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-comparison-module-right-de-phone-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-comparison-module-dark-de-phone-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 "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]: Comparison-Modul - main [ref=e42]: - generic [ref=e44]: - heading "Entdecken Sie das Projekt aus der Sicht von:" [level=2] [ref=e46] - generic [ref=e48]: - group "Sichtweise ändern" [ref=e52]: - generic [ref=e53]: Sichtweise ändern - radio "Marketing und Vertrieb" [ref=e54] - generic [ref=e55] [cursor=pointer]: Marketing und Vertrieb - radio "Entwicklung und Technologie" [checked] [active] [ref=e56] - generic [ref=e57] [cursor=pointer]: Entwicklung und Technologie - generic [ref=e59]: - generic [ref=e61]: - heading "CMS-Technologien" [level=3] [ref=e62] - paragraph [ref=e63]: Neben den Core-Funktionalitäten von TYPO3 wurde die Installation der 6 Websites um das Bootstrap Package erweitert, sodass bereits ein umfangreiches und vielseitiges Set an technischen Konfigurationen und Einstellungen vorhanden ist. Auf deren Basis wurden dann weitere individuelle und kundenspezifische Anpassungen vorgenommen. - paragraph [ref=e64]: Da die Installation mehrere unterschiedliche Websites beinhaltet, kommen 3 verschiedene Website-Templates zum Einsatz, sowie vererbende Templates zur Nutzung von Synergien zwischen den einzelnen Sites. Zudem gibt es eine differenzierte Steuerung erlaubter Content-Typen – je nach den konkret definierten Möglichkeiten des Seiten-Designs. - paragraph [ref=e65]: Zusätzlich wurde Redis eingebunden, welches für einen datenzentierten Cache sowie zur Speicherung von Sessions genutzt wird. - generic [ref=e67]: - heading "Such-Technologien" [level=3] [ref=e68] - paragraph [ref=e69]: Die Suchfunktion der Websites basiert auf dem Such-Server von Apache Solr. Dabei werden neben den Inhalten auch News, Produkte, Events und auch die Datei-Metadaten durchsuchbar gemacht. - paragraph [ref=e70]: Neben der Auto-Suggest-Funktion mit einem Grouping nach Suchergebnistyp, umfasst die Funktion auch eine After-Search-Navigation. Die Ausgabe der Suchergebnisse sind anhand von konfigurierbaren Facetten groupiert und basieren auf einem individualisierten Suchalgorithmus mit konfigurierbarer Feldgewichtung. - paragraph [ref=e71]: Die Indizierung von Dateien und Produktdatensätzen erfolgt mit EXT:solrfal mit unterschiedlichen Datei-Pools pro Site. - generic [ref=e73]: - heading "Backend- und Frontend-Technologien" [level=3] [ref=e74] - paragraph [ref=e75]: "Das Upgrade-Projekt brachte einige technische Optimierungen und Neuheiten mit sich:" - list [ref=e76]: - listitem [ref=e77]: Während der Entwicklung wurde ein reproduzierbares, automatisches TYPO3-Upgrade in Form eines Shell-Skripts entwickelt, welches Upgrade-Wizards sowie eine Reihe individueller SQL-Befehle ausführt. - listitem [ref=e78]: Einbindung von Bootstrap (Migration von Foundation). - listitem [ref=e79]: "Frontend-Rendering: Migration von css_styled_content auf Bootstrap Package/Fluid." - listitem [ref=e80]: Migration von Gridelements auf die Container-Extension und eigene CTypes. - listitem [ref=e81]: Projektspezifische Upgrade-Wizards zur Migration ersetzter Inhaltselemente. - listitem [ref=e82]: Einbindung von Webpack Encore und Image-Lazy-Loading. - generic [ref=e84]: - heading "Hosting und Monitoring" [level=3] [ref=e85] - paragraph [ref=e86]: "Für das Hosting und Monitoring des Kundenprojekts sind folgende Einrichtungen vorgenommen worden:" - list [ref=e87]: - listitem [ref=e88]: Direkte Anbindung von internen Systemen an die Produktivsysteme der Corporate Site per IPsec-VPN zum Austausch von Daten. - listitem [ref=e89]: Incident Reporting von Fehlerfällen mittels Sentry inkl. direkter Anbindung an unser internes Ticketsystem. - listitem [ref=e90]: Austausch des standardmäßigen datenbankbasierten Loggings durch eine direkte Anbindung von Graylog via GELF. - listitem [ref=e91]: Skalierende, organisatorisch beliebig parallelisierbare Weiterentwicklung unter Nutzung von Kubernetes; komplette und vollständig unabhängige TYPO3-Instanzen werden bei Bedarf durch GitLab automatisch erstellt. - listitem [ref=e92]: Automatisierte Vorbereitung von Patch-Updates und skriptgesteuerte Bereitstellung als Merge Request zur Prüfung. - generic [ref=e94]: - heading "PIM-Anbindung (Produktbereich)" [level=3] [ref=e95] - paragraph [ref=e96]: Die Datenübertragung für den Produktkatalog erfolgte über den eingerichteten VPN-Tunnel. Die umfangreichen XML-Datenbestände aus dem PIM sind bei dem Import in TYPO3 durch ein effizientes Handling binnen weniger Minuten verarbeitet und eingespielt. Die Auslieferung der Produktabbildungen erfolgt dabei direkt aus dem DAM-System Canto via Amazon CloudFront. Die Indizierung der Produktdaten in Solr wird per individualisiertem Record Indexer umgesetzt. - paragraph [ref=e97]: Für die Einbindung und weitere Nutzung der Produktseiten im Rahmen der gesamten Installation ist eine Einführung eines individuellen t3://-URL-Schemas zur internen Verlinkung von Produkseiten aus Contents heraus erarbeitet worden sowie eine Bereitstellung eines Linkpickers für pfm-Produkte im Backend. - contentinfo [ref=e98]: - generic [ref=e101]: - navigation [ref=e102]: - list [ref=e103]: - listitem [ref=e104]: - button "Cookie-Einstellungen" [ref=e105] [cursor=pointer] - listitem [ref=e106]: - link "Datenschutzerklärung" [ref=e107] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e108]: - link "Impressum" [ref=e109] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e110]: - paragraph [ref=e111]: © Marketing Factory Digital GmbH - paragraph [ref=e112]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e113] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ ``` # 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')); 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')); | ^ 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-comparison-module-dark-de-phone-darwin.png, writing actual. 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/'); 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 | ```