# 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: expect(page).toHaveScreenshot(expected) failed 13952 pixels (ratio 0.01 of all image pixels) are different. Snapshot: content-comparison-module-left.png Call log: - Expect "toHaveScreenshot(content-comparison-module-left.png)" with timeout 15000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 13952 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 - 13952 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]: 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" [checked] [active] [ref=e54] - generic [ref=e55] [cursor=pointer]: Marketing und Vertrieb - radio "Entwicklung und Technologie" [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]: Im Rahmen einer TYPO3-Installation Version 10 werden aktuell insgesamt 6 Websites verwaltet. Darunter befinden sich neben 3 Corporate Sites auch diverse Websites zu Tochterunternehmen oder Projekten. - paragraph [ref=e64]: Die Besonderheit bzw. die Anforderung bei diesem Projekt ist, dass der Kunde über die Corporate Sites hinweg gemeinsame, als auch getrennte Inhalte pflegen und verwalten möchte. Die Vorteile von TYPO3 sind dabei, dass auch zentral gepflegte Inhalte für mehrere Seiten genutzt werden, durch das Feature der sogenannten "Lokalisierung" auch sprachabhängig für die entsprechende Site. Heißt, aktuell werden bspw. global News- und Pressmeldungen oder auch Events und Download-Dateien gepflegt, lokalisiert und dann sprachabhängig auf der deutschen oder englischen Seite ausgegeben. - generic [ref=e66]: - heading "Such-Technologien" [level=3] [ref=e67] - paragraph [ref=e68]: Die Suchfunktion der Website basiert auf dem Such-Service Apache Solr. Dabei werden neben den normalen Seiten (Pages) auch News- und Pressemitteilungen, Events, Produktseiten und Download-Dateien indexiert und auf der Suchergebnisseite für die Nutzer ausgegeben. - paragraph [ref=e69]: Die globale Suchmaske der Website enthält zudem eine Suggest-Funktion sowie eine Gruppierung der Ergebnisse nach Kategorien. - paragraph [ref=e70]: Zusätzlich wird auf Basis von solrfal das Download-Center bereitgestellt. Hierbei handelt es sich um separate Assets, die unter speziellen Richtlinien zur Verfügung gestellt werden. - generic [ref=e72]: - heading "Backend- und Frontend-Technologien" [level=3] [ref=e73] - paragraph [ref=e74]: Neben dem TYPO3-Core wurde das Bootstrap Package integriert, welches bereits ein umfangreiches Set an Gestaltungsmöglichkeiten und Einstellungen für Backend und Frontend mit sich bringt. Um mehrspaltige Layouts zu ermöglichen (sog. Grid-Layouts) sind zusätzlich Container-Elemente eingerichtet worden. - paragraph [ref=e75]: Viele Inhaltselemente basieren auf dem Bootstrap Package und wurden an die Corporate Identity der pfm medical AG angepasst, wie bspw. das Akkordeon-Element, das Tab-Element oder die Timeline. Fehlende Inhaltselemente oder Elemente für spezielle Inhalte, die benötigt wurden, wurden kundenindividuell entwickelt und konfiguriert und mit Fokus auf eine redakteursfreundliche Backend-Pflege erstellt. - generic [ref=e77]: - heading "Hosting und Monitoring" [level=3] [ref=e78] - paragraph [ref=e79]: Wir hosten die Installation auf virtualisierter Hardware in Deutschland und sorgen für einen sicheren und störungsfreien Betrieb. Der Leistungsumfang umfasst den Betrieb auf allen Ebenen bis hinunter zur physischen Hardware. Wir kennen sowohl die betriebene Applikation, als auch die Systemumgebung und können beides aufeinander abstimmen. Zudem gehört auch die Wartung der Hardware sowie die regelmäßigen Updates aller Hardwarekomponenten zum Leistungskatalog. Durch unsere Monitoring-Tools haben wir die Installation permanent im Blick und können im Ernstfall sofort eingreifen. - paragraph [ref=e80]: Das Incident Reporting von Fehlerfällen mittels Sentry ermöglicht eine direkte Anbindung an das Ticketsystem, sodass Fehlerquellen automatisch schnell identifiziert und verarbeitet werden können. - paragraph [ref=e81]: Im Rahmen der direkten Zusammenarbeit im Projekt und dem nachgelagerten Daily-Business ermöglichen die automatisch erstellen Review-Umgebungen dem Kunden eine einfache Abnahme von Entwicklungen. - generic [ref=e83]: - heading "PIM-Anbindung (Produktbereich)" [level=3] [ref=e84] - paragraph [ref=e85]: Für den Produktbereich der Website ist eine Schnittstelle zum PIM-System von Viamedici EPIM entwickelt worden. Zusätzlich gibt es für die Einbindung von jeglichen Bildern eine Schnittstelle zum DAM-System Canto. Hinzu kam eine schnelle und unkomplizierte organisatorische und auch technische Zusammenarbeit mit dem für die PIM-Einführung bei pfm medical verantwortlichen Dienstleister. Durch die kurzen und direkten Kommunikationswege entfielen etwaige Reibungsverluste oder fehlende Informationen. - paragraph [ref=e86]: Das vorgelagerte Projekt zum internen Produktkatalog von pfm medical sorgte für eine erhebliche Beschleinigung bei der Umsetzung der PIM-Anbindung, dadurch, dass das zuvor durchgeführte Vorlaufprojekt bereits einige Erkenntnisse zu Struktur, Konzept und Umgang mit sich brachte. Im Zuge der Anbindung von EPIM an TYPO3 konnte auf die Erfahrungen mit dem Datenaustausch zurückgegriffen werden, eine Onboarding-Phase unserer Entwickler in Sachen EPIM "von Null" entfiel. - contentinfo [ref=e87]: - generic [ref=e90]: - navigation [ref=e91]: - list [ref=e92]: - listitem [ref=e93]: - button "Cookie-Einstellungen" [ref=e94] [cursor=pointer] - listitem [ref=e95]: - link "Datenschutzerklärung" [ref=e96] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e97]: - link "Impressum" [ref=e98] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e99]: - paragraph [ref=e100]: © Marketing Factory Digital GmbH - paragraph [ref=e101]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e102] [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')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 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/'); 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/'); ```