# 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 >> forms >> contact - Location: visual/mfc-corporate-de.spec.ts:465: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/forms-contact-de-tablet-l-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/forms-contact-dark-de-tablet-l-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: /formulare/kontaktformular/ - text: De - listitem [ref=e56]: - link "English" [ref=e57] [cursor=pointer]: - /url: https://www.marketing-factory.com.styleguide.mfc.gmbh/forms/contact-form/ - 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 "Formulare" [ref=e67] [cursor=pointer]: - /url: /formulare/ - generic [ref=e68]: Formulare - listitem [ref=e69]: - text: / - generic [ref=e70]: Kontaktformular - main [ref=e71]: - generic [ref=e75]: - generic [ref=e76]: - generic [ref=e77]: Anrede * - combobox "Anrede *" [ref=e78]: - option "Bitte auswählen …" [selected] - option "Herr" - option "Frau" - option "Divers" - textbox [ref=e79] - generic [ref=e80]: - generic [ref=e81]: Name * - textbox "Name *" [ref=e82] - generic [ref=e83]: - generic [ref=e84]: E-Mail * - textbox "E-Mail *" [ref=e85] - generic [ref=e86]: - generic [ref=e87]: Rückrufnummer - textbox "Rückrufnummer" [ref=e88] - generic [ref=e89]: - generic [ref=e90]: Nachricht - textbox "Nachricht" [ref=e91]: - /placeholder: "" - generic [ref=e92]: - generic [ref=e93]: - checkbox "Ich habe die Datenschutzerklärung gelesen und willige in die Verarbeitung meiner personenbezogenen Daten entsprechend dieser Erklärung ein. *" [ref=e94] - generic [ref=e95]: - text: Ich habe die - link "Datenschutzerklärung" [ref=e96] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - text: gelesen und willige in die Verarbeitung meiner personenbezogenen Daten entsprechend dieser Erklärung ein. * - generic [ref=e97]: - paragraph [ref=e98]: Ich bin darauf hingewiesen worden, dass die Verarbeitung meiner Daten auf freiwilliger Basis erfolgt und dass ich mein Einverständnis ohne für mich nachteilige Folgen verweigern bzw. jederzeit gegenüber der Marketing Factory Digital GmbH per Post (Erkrather Straße 401, D-40231 Düsseldorf) oder E-Mail (info@marketing-factory.de) widerrufen kann. - paragraph [ref=e99]: Mir ist bekannt, dass die oben angegebenen Daten so lange gespeichert werden, wie ich die Kontaktaufnahme durch Marketing Factory wünsche. Nach meinem Widerruf werden meine Daten gelöscht. Eine weitergehende Speicherung kann im Einzelfall erfolgen, wenn dies gesetzlich vorgeschrieben ist. - navigation "Form Navigation" [ref=e101]: - button "Absenden" [ref=e102] [cursor=pointer] - contentinfo [ref=e103]: - generic [ref=e105]: - navigation [ref=e106]: - list [ref=e107]: - listitem [ref=e108]: - button "Cookie-Einstellungen" [ref=e109] [cursor=pointer] - listitem [ref=e110]: - link "Datenschutzerklärung" [ref=e111] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e112]: - link "Impressum" [ref=e113] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e114]: - paragraph [ref=e115]: © Marketing Factory Digital GmbH - paragraph [ref=e116]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e117] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ ``` # Test source ```ts 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')); 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')); | ^ 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/forms-contact-dark-de-tablet-l-darwin.png, writing actual. 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 | }); 483 | }); 484 | ```