# 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 >> plugins >> project-obermeyer-corporate - Location: visual/mfc-corporate-de.spec.ts:378: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/plugin-project-obermeyer-corporate-de-desktop-darwin.png, writing actual. ``` # Page snapshot ```yaml - generic [ref=e2]: - link "Zum Inhalt springen" [ref=e3] [cursor=pointer]: - /url: "#page-content" - img "Quanzhou Messe - © OBERMEYER" [ref=e6] - navigation "Brotkrumen-Navigation" [ref=e7]: - generic [ref=e8]: - paragraph [ref=e9]: "Sie sind here:" - list [ref=e10]: - listitem [ref=e11]: - link "Startseite" [ref=e12] [cursor=pointer]: - /url: / - img [ref=e13] - listitem [ref=e15]: - text: / - link "Seitentypen" [ref=e16] [cursor=pointer]: - /url: /seitentypen/ - generic [ref=e17]: Seitentypen - listitem [ref=e18]: - text: / - 'link "Kunden: Listenansicht" [ref=e19] [cursor=pointer]': - /url: /seitentypen/kunden-listenansicht/ - generic [ref=e20]: "Kunden: Listenansicht" - listitem [ref=e21]: - text: / - link "OBERMEYER (SG)" [ref=e22] [cursor=pointer]: - /url: /seitentypen/kunden-listenansicht/obermeyer-sg/ - generic [ref=e23]: OBERMEYER (SG) - listitem [ref=e24]: - text: / - generic [ref=e25]: Launch der neuen Corporate Site der Unternehmensgruppe OBERMEYER (SG) - main [ref=e26]: - generic [ref=e28]: - generic [ref=e31]: - heading "Launch der neuen Corporate Site der Unternehmensgruppe OBERMEYER" [level=1] [ref=e33] - paragraph [ref=e34]: - text: "Marketing Factory wurde Anfang 2020 mit dem Launch der neuen Corporate Site für die Unternehmensgruppe OBERMEYER beauftragt, die zur zentralen Anlaufstelle für die gesamten Dienstleistungen werden sollte: Sowohl nationale als auch internationale Tochtergesellschaften und Partner der Gruppe werden mit ihren Geschäftsbereichen und Länderniederlassungen präsentiert, um so den Gesamtplanungsaspekt als elementaren Bestandteil der Unternehmensstrategie zu unterstreichen." - text: Für den neuen Webauftritt wurde in Zusammenarbeit mit OBERMEYER-internen sowie externen Designern ein neues Corporate Design für Print- und Webmedien entwickelt, das gestalterisch auf dem Logo des Familienunternehmens aufbaut und es im modernen Format weiterdenkt. - text: Zur Ausarbeitung einer Content-Strategie wurde in einem ersten Schritt in gemeinsamen Workshops in München durch Ausarbeitung verschiedener (Proto-)Personas analysiert, welche Haupt- und Nebenzielgruppen die Website ansprechen wird. Auf Basis dieser grundlegenden Fokusausrichtung wurden im Anschluss sinnvolle Navigationspfade, wichtige Seiteninhalte und gewünschte Bildsprachen näher definiert. Die redaktionelle Ausgestaltung SEO-konformer Inhalte wurde als Team mithilfe eines strukturierten Redaktionsplans in enger Abstimmung zwischen OBERMEYER und Marketing Factory umgesetzt. - generic [ref=e38]: - figure [ref=e40]: - img "OBERMEYER Website Mockup" [ref=e41] - generic [ref=e42]: - paragraph [ref=e43]: - link "Website" [ref=e44] [cursor=pointer]: - /url: https://www.obermeyer-group.com/ - table [ref=e45]: - rowgroup [ref=e46]: - row "Kunde OBERMEYER Servbest GmbH" [ref=e47]: - rowheader "Kunde" [ref=e48] - cell "OBERMEYER Servbest GmbH" [ref=e49] - row "Projektzeitraum 2020–2021" [ref=e50]: - rowheader "Projektzeitraum" [ref=e51]: - paragraph [ref=e52]: Projektzeitraum - cell "2020–2021" [ref=e53] - generic [ref=e55]: - heading "Entdecken Sie das Projekt aus Sicht von:" [level=2] [ref=e57] - generic [ref=e59]: - group "Sichtweise ändern" [ref=e63]: - generic [ref=e64]: Sichtweise ändern - radio "Marketing und Vertrieb" [checked] [ref=e65] - generic [ref=e66] [cursor=pointer]: Marketing und Vertrieb - radio "Entwicklung und Technologie" [ref=e67] - generic [ref=e68] [cursor=pointer]: Entwicklung und Technologie - generic [ref=e70]: - generic [ref=e72]: - heading "CMS-Technologien" [level=3] [ref=e73] - paragraph [ref=e74]: Die neue Corporate Site der OBERMEYER Gruppe wurde mit der TYPO3 Version 10.4 LTS umgesetzt, die den Kunden besonders durch ihre hohe Nutzerfreundlichkeit und das leichte Sprachen-Konzept und Sprachen-Handling überzeugt. Die redaktionelle Pflege neuer Inhalte erfolgt durch OBERMEYER und MFC. Das in diesem Projekt genutzte Bootstrap Package bietet dabei eine innovative, leicht erweiter- sowie anpassbare Basis für die kundenspezifische Ausgestaltung einzelner Elemente. - generic [ref=e76]: - heading "Such-Technologien" [level=3] [ref=e77] - paragraph [ref=e78]: "Für eine möglichst intuitive und schnelle Suche vertrauen wir auch in diesem Projekt auf Apache Solr: Das Tool bietet uns umfassende Möglichkeiten zur individuellen Konfiguration. So werden neben den regulären Suchergebnissen auch die Projektreferenzen über Solr abgebildet und um spezielle Filter ergänzt, die es dem User ermöglichen, seine Referenzen-Auswahl zu verfeinern." - generic [ref=e80]: - heading "SEO-/SEA-Maßnahmen" [level=3] [ref=e81] - paragraph [ref=e82]: Zur Optimierung von Metadaten ist die Extension YOAST SEO im Einsatz, die dem Editor eine komfortable Auswertung der Daten bietet. Zudem ist neben dem regulären Google Analytics Universal auch Google Analytics 4 implementiert, um Nutzerverhalten analysieren und darauf aufbauend Weiterentwicklungen der Corporate Site realisieren zu können. - generic [ref=e84]: - heading "Hosting und Monitoring" [level=3] [ref=e85] - paragraph [ref=e86]: MFC hostet die Installation und sorgt für einen sicheren und störungsfreien Betrieb. Das stetige Monitoring der Website mit unterschiedlichen Tools ermöglicht es uns im Problemfall schnell und zielgerichtet eingreifen zu können. Zudem warten wir die Hardware und spielen regelmäßige Updates ein. - generic [ref=e88]: - heading "Bild-Rendering" [level=3] [ref=e89] - paragraph [ref=e90]: Das Bild-Rendering der Website wurde im Rahmen des Projektes analysiert und bewertet und um das WebP-Imagerendering erweitert. Das moderne Bildformat steigert die Performance in kompatiblen Browsern erheblich – für alte und noch nicht kompatible Browser wurde eine Fallback-Lösung implementiert. - heading "Individuelle Lösungen" [level=2] [ref=e94] - generic [ref=e97]: - figure "Obermeyer Startseite" [ref=e101]: - 'link "Zeige größere Version von: Obermeyer Startseite" [ref=e102] [cursor=pointer]': - /url: /fileadmin/_processed_/1/c/csm_Bildschirmfoto_2022-03-16_um_17.23.49_6d84ba97f2.png - generic [ref=e103]: "Zeige größere Version von:" - img "Obermeyer Startseite" [ref=e105] - generic [ref=e106]: Obermeyer Startseite - generic [ref=e107]: - heading "Konzept, Design & Navigationsstruktur" [level=3] [ref=e109] - paragraph [ref=e110]: - text: Im Rahmen der detaillierten Ausarbeitung der Content-Strategie hat sich das Team intensiv über kundenspezifische Elemente ausgetauscht. Besonders wichtig war in diesem Zusammenhang der Wunsch nach Stringenz und Struktur, um auf diese Weise einen modernen und aufgeräumten Charakter vermitteln zu können. - text: Dieser Anspruch hat sich in einem individuell erstellten Header-Element für alle regulären Inhaltsseiten realisiert. Das Element greift das rote Quadrat aus dem Logo auf und überführt es in ein animiertes, bildstarkes Inhaltselement zum Seiteneinstieg. Darauf aufbauend wurde der Startseiteneinstieg entwickelt, der mit einem vollflächigen Bild hinter der Navigation eine Steigerung des regulären Header-Elementes darstellt. - generic [ref=e113]: - figure "Interaktive Weltkarte für die internationalen OBERMEYER Niederlassungen" [ref=e117]: - 'link "Zeige größere Version von: Interaktive Weltkarte für die internationalen OBERMEYER Niederlassungen" [ref=e118] [cursor=pointer]': - /url: /fileadmin/_processed_/8/2/csm_Bildschirmfoto_2022-03-16_um_17.52.12_ec49561185.png - generic [ref=e119]: "Zeige größere Version von:" - img "Interaktive Weltkarte für die internationalen OBERMEYER Niederlassungen" [ref=e121] - generic [ref=e122]: Interaktive Weltkarte für die internationalen OBERMEYER Niederlassungen - generic [ref=e123]: - heading "Interaktive Weltkarte" [level=3] [ref=e125] - paragraph [ref=e126]: - text: "Eine interaktive Weltkarte zeigt die weltweiten Niederlassungen der OBERMEYER Gruppe in einem zugänglichen und modernen Format:" - text: Wichtige Standortinformationen werden erst nach Klick auf das entsprechende Land in einem Layer ausgegeben und sind so auch auf mobilen Geräten gut les- und bedienbar. - list [ref=e129]: - listitem [ref=e130]: "Foto \"Hero Image\": © OBERMEYER Servbest GmbH" - listitem [ref=e131]: "Foto \"OBERMEYER-Devices\": © Karoline Steinfatt / Marketing Factory Consulting GmbH" - listitem [ref=e132]: "Foto \"OBERMEYER-Startseite\": © Karoline Steinfatt / Marketing Factory Consulting GmbH" - listitem [ref=e133]: "Foto \"Interaktive-Weltkarte\": © Karoline Steinfatt / Marketing Factory Consulting GmbH" - list [ref=e138]: - listitem [ref=e139]: - link "#TYPO3" [ref=e140] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/ - img [ref=e142] - generic [ref=e144]: "#TYPO3" - listitem [ref=e145]: - link "#Solr" [ref=e146] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/tech-stack/suchtechnologien/#c34 - img [ref=e148] - generic [ref=e153]: "#Solr" - listitem [ref=e154]: - link "#Launch" [ref=e155] [cursor=pointer]: - /url: "http://{$blog.identifier.pages.tagList}" - img [ref=e157] - generic [ref=e159]: "#Launch" - listitem [ref=e160]: - link "#SEO" [ref=e161] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/tech-stack/suchtechnologien/#c35 - img [ref=e163] - generic [ref=e169]: "#SEO" - listitem [ref=e170]: - link "#Google Analytics" [ref=e171] [cursor=pointer]: - /url: "http://{$blog.identifier.pages.tagList}" - img [ref=e173] - generic [ref=e175]: "#Google Analytics" - contentinfo [ref=e176]: - generic [ref=e182]: - paragraph [ref=e183]: Wir beraten Sie gerne. - generic [ref=e184]: - img "Ingo Schmitt" [ref=e186] - generic [ref=e187]: - paragraph [ref=e188]: - text: Ingo Schmitt - text: Geschäftsleitung - paragraph [ref=e189]: - link "+49 (0)211-361176-63" [ref=e190] [cursor=pointer]: - /url: tel:+4921136117663 - link "ingo.schmitt@marketing-factory.de" [ref=e191] [cursor=pointer]: - /url: mailto:ingo.schmitt@marketing-factory.de - generic [ref=e194]: - navigation [ref=e195]: - list [ref=e196]: - listitem [ref=e197]: - button "Cookie-Einstellungen" [ref=e198] [cursor=pointer] - listitem [ref=e199]: - link "Datenschutzerklärung" [ref=e200] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e201]: - link "Impressum" [ref=e202] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e203]: - paragraph [ref=e204]: © Marketing Factory Digital GmbH - paragraph [ref=e205]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e206] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ - generic [ref=e209]: - strong [ref=e210]: Bildnachweise - list [ref=e211]: - listitem [ref=e212]: "\"OBERMEYER Website Mockup\": © MFC / Marketing Factory Digital GmbH" - listitem [ref=e213]: "\"Quanzhou Messe\": Urheber OBERMEYER" - listitem [ref=e214]: "\"Bildschirmfoto Startseite OBERMEYER\": © MFC / Marketing Factory Digital GmbH" - listitem [ref=e215]: "\"Bildschirmfoto interaktive Weltkarte\": © MFC / Marketing Factory Digital GmbH" - listitem [ref=e216]: "\"Quanzhou Messe\": Urheber OBERMEYER" ``` # Test source ```ts 282 | test('1-video-beside-text-centered-33-percent', async ({ page }) => { 283 | await setup(page, '/inhaltselemente/textmedia/videos-extern/1-video-neben-text-zentriert-33-bildbreite/'); 284 | await hideElements(page, PAGE_HEADER); 285 | await scrollToBottom(page); 286 | await expect(page).toHaveScreenshot(snap('content-textmedia-extern-1-video-beside-text-centered-33-percent')); 287 | }); 288 | 289 | test('1-video-beside-text-33-percent', async ({ page }) => { 290 | await setup(page, '/inhaltselemente/textmedia/videos-extern/1-video-neben-text-33-bildbreite/'); 291 | await hideElements(page, PAGE_HEADER); 292 | await scrollToBottom(page); 293 | await expect(page).toHaveScreenshot(snap('content-textmedia-extern-1-video-beside-text-33-percent')); 294 | }); 295 | }); 296 | 297 | test.describe('content › textmedia › local-videos', () => { 298 | test('1-video-top-bottom-centered', async ({ page }) => { 299 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/1-video-oben-unten-zentriert/'); 300 | await hideElements(page, PAGE_HEADER); 301 | await scrollToBottom(page); 302 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-1-video-top-bottom-centered')); 303 | }); 304 | 305 | test('1-video-beside-text-centered', async ({ page }) => { 306 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/1-video-neben-text-zentriert/'); 307 | await hideElements(page, PAGE_HEADER); 308 | await scrollToBottom(page); 309 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-1-video-beside-text-centered')); 310 | }); 311 | 312 | test('1-video-beside-text', async ({ page }) => { 313 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/1-video-neben-text/'); 314 | await hideElements(page, PAGE_HEADER); 315 | await scrollToBottom(page); 316 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-1-video-beside-text')); 317 | }); 318 | 319 | test('2-videos-top-bottom-centered', async ({ page }) => { 320 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/2-videos-oben-unten-zentriert/'); 321 | await hideElements(page, PAGE_HEADER); 322 | await scrollToBottom(page); 323 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-2-videos-top-bottom-centered')); 324 | }); 325 | 326 | test('2-videos-beside-text-centered', async ({ page }) => { 327 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/2-videos-neben-text-zentriert/'); 328 | await hideElements(page, PAGE_HEADER); 329 | await scrollToBottom(page); 330 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-2-videos-beside-text-centered')); 331 | }); 332 | 333 | test('2-videos-beside-text', async ({ page }) => { 334 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/2-videos-neben-text/'); 335 | await hideElements(page, PAGE_HEADER); 336 | await scrollToBottom(page); 337 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-2-videos-beside-text')); 338 | }); 339 | 340 | test('1-video-beside-text-centered-33-percent', async ({ page }) => { 341 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/1-video-neben-text-zentriert-33-bildbreite/'); 342 | await hideElements(page, PAGE_HEADER); 343 | await scrollToBottom(page); 344 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-1-video-beside-text-centered-33-percent')); 345 | }); 346 | 347 | test('1-video-beside-text-33-percent', async ({ page }) => { 348 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/1-video-neben-text-33-bildbreite/'); 349 | await hideElements(page, PAGE_HEADER); 350 | await scrollToBottom(page); 351 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-1-video-beside-text-33-percent')); 352 | }); 353 | }); 354 | 355 | test.describe('page-types', () => { 356 | test('search', async ({ page }) => { 357 | await setup(page, '/seitentypen/suche/?tx_solr%5Bq%5D=obermeyer'); 358 | await expect(page).toHaveScreenshot(snap('page-type-search')); 359 | }); 360 | 361 | test('client-list', async ({ page }) => { 362 | await setup(page, '/seitentypen/kunden-listenansicht/'); 363 | await expect(page).toHaveScreenshot(snap('page-type-client-list')); 364 | }); 365 | 366 | test('client-pfm', async ({ page }) => { 367 | await setup(page, '/seitentypen/kunden-listenansicht/pfm-medical-sg/'); 368 | await expect(page).toHaveScreenshot(snap('page-type-client-pfm')); 369 | }); 370 | }); 371 | 372 | test.describe('plugins', () => { 373 | test('project-list', async ({ page }) => { 374 | await setup(page, '/plugins/projekt-liste/'); 375 | await expect(page).toHaveScreenshot(snap('plugin-project-list')); 376 | }); 377 | 378 | test('project-obermeyer-corporate', async ({ page }) => { 379 | await setup(page, '/seitentypen/kunden-listenansicht/obermeyer-sg/launch-der-neuen-corporate-site-der-unternehmensgruppe-obermeyer-sg/'); 380 | await hideElements(page, PAGE_HEADER); 381 | await scrollToBottom(page); > 382 | await expect(page).toHaveScreenshot(snap('plugin-project-obermeyer-corporate')); | ^ 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/plugin-project-obermeyer-corporate-de-desktop-darwin.png, writing actual. 383 | }); 384 | 385 | test('picturecredits', async ({ page }) => { 386 | await setup(page, '/plugins/picturecredits/'); 387 | await expect(page).toHaveScreenshot(snap('plugin-picturecredits')); 388 | }); 389 | }); 390 | 391 | test.describe('blog', () => { 392 | test('overview', async ({ page }) => { 393 | await setup(page, '/blog/'); 394 | await hideElements(page, PAGE_HEADER); 395 | await scrollToBottom(page); 396 | await expect(page).toHaveScreenshot(snap('blog-overview')); 397 | await setDarkTheme(page); 398 | await expect(page).toHaveScreenshot(snap('blog-overview-dark')); 399 | }); 400 | 401 | test('list-authors', async ({ page }) => { 402 | await setup(page, '/blog/autoren/'); 403 | await expect(page).toHaveScreenshot(snap('blog-list-authors')); 404 | }); 405 | 406 | test('author', async ({ page }) => { 407 | await setup(page, '/blog/autoren/max-powers/'); 408 | await expect(page).toHaveScreenshot(snap('blog-author')); 409 | }); 410 | 411 | test('list-categories', async ({ page }) => { 412 | await setup(page, '/blog/kategorien/'); 413 | await expect(page).toHaveScreenshot(snap('blog-list-categories')); 414 | }); 415 | 416 | test('category', async ({ page }) => { 417 | await setup(page, '/blog/kategorien/schokolade/'); 418 | await hideElements(page, PAGE_HEADER); 419 | await scrollToBottom(page); 420 | await expect(page).toHaveScreenshot(snap('blog-category')); 421 | }); 422 | 423 | test('list-blogseries', async ({ page }) => { 424 | await setup(page, '/blog/blogreihen/'); 425 | await expect(page).toHaveScreenshot(snap('blog-list-blogseries')); 426 | }); 427 | 428 | test('blogseries', async ({ page }) => { 429 | await setup(page, '/blog/blogreihen/styleguide-highlights/'); 430 | await expect(page).toHaveScreenshot(snap('blog-blogseries')); 431 | }); 432 | 433 | test('post-menu-elements', async ({ page }) => { 434 | await setup(page, '/blog/mit-menue-elementen/'); 435 | await expect(page).toHaveScreenshot(snap('blog-post-menu-elements')); 436 | }); 437 | 438 | test('post-blogseries', async ({ page }) => { 439 | await setup(page, '/blog/erster-teil-einer-serie/'); 440 | await expect(page).toHaveScreenshot(snap('blog-post-blogseries')); 441 | }); 442 | 443 | test('post-no-featured-image', async ({ page }) => { 444 | await setup(page, '/blog/ohne-beitragsbild/'); 445 | await expect(page).toHaveScreenshot(snap('blog-post-no-featured-image')); 446 | }); 447 | 448 | test('post-with-comments', async ({ page }) => { 449 | await setup(page, '/blog/mit-kommentaren/'); 450 | await expect(page).toHaveScreenshot(snap('blog-post-with-comments')); 451 | }); 452 | 453 | test('post-inactive-author', async ({ page }) => { 454 | await setup(page, '/blog/drei-autoren-einer-inaktiv/'); 455 | await expect(page).toHaveScreenshot(snap('blog-post-inactive-author')); 456 | }); 457 | 458 | test('post-localized-featured-image', async ({ page }) => { 459 | await setup(page, '/blog/uebersetztes-featured-image/'); 460 | await expect(page).toHaveScreenshot(snap('blog-post-localized-featured-image')); 461 | }); 462 | }); 463 | 464 | test.describe('forms', () => { 465 | test('contact', async ({ page }) => { 466 | await setup(page, '/formulare/kontaktformular/'); 467 | await expect(page).toHaveScreenshot(snap('forms-contact')); 468 | await setDarkTheme(page); 469 | await expect(page).toHaveScreenshot(snap('forms-contact-dark')); 470 | }); 471 | 472 | test('footer', async ({ page }) => { 473 | await setup(page, '/formulare/footer-formular/'); 474 | await expect(page).toHaveScreenshot(snap('forms-footer')); 475 | }); 476 | 477 | test('example', async ({ page }) => { 478 | await setup(page, '/formulare/styleguide-testformular/'); 479 | await expect(page).toHaveScreenshot(snap('forms-example')); 480 | await setDarkTheme(page); 481 | await expect(page).toHaveScreenshot(snap('forms-example-dark')); 482 | }); ```