# 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 >> blog >> blogseries - Location: visual/mfc-corporate-de.spec.ts:428: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/blog-blogseries-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: /blog/blogreihen/styleguide-highlights/ - text: De - listitem [ref=e56]: - link "English" [ref=e57] [cursor=pointer]: - /url: https://www.marketing-factory.com.styleguide.mfc.gmbh/blog/blog-series/best-of-styleguide/ - 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 "Blog" [ref=e67] [cursor=pointer]: - /url: /blog/ - generic [ref=e68]: Blog - listitem [ref=e69]: - text: / - link "Blogreihen" [ref=e70] [cursor=pointer]: - /url: /blog/blogreihen/ - generic [ref=e71]: Blogreihen - listitem [ref=e72]: - text: / - generic [ref=e73]: Styleguide-Highlights! - main [ref=e74]: - generic [ref=e77]: - generic [ref=e78]: - generic [ref=e79]: - paragraph [ref=e80]: Styleguide-Highlights! - paragraph [ref=e81]: 3 Beiträge - link "Zur Übersicht der Blogreihen" [ref=e84] [cursor=pointer]: - /url: /blog/blogreihen/ - generic [ref=e85]: - heading "Beiträge aus der Reihe \"Styleguide-Highlights!\"" [level=1] [ref=e87] - generic [ref=e88]: - article [ref=e90]: - figure [ref=e92] - generic [ref=e93]: - paragraph [ref=e94]: - link "Dritter Teil einer Serie" [ref=e95] [cursor=pointer]: - /url: /blog/dritter-teil-einer-serie/ - paragraph [ref=e96]: Hier wird automatisch das Menü der Blogreihe in der rechten Spalte ausgegeben. - text: Beitrag lesen - generic [ref=e97]: - time [ref=e98]: 16.06.2023 - generic [ref=e99]: - generic [ref=e100]: Max Powers - img "Max Powers" [ref=e101] - article [ref=e103]: - figure [ref=e105] - generic [ref=e106]: - paragraph [ref=e107]: - link "Zweiter Teil einer Serie" [ref=e108] [cursor=pointer]: - /url: /blog/zweiter-teil-einer-serie/ - paragraph [ref=e109]: SEO-Beschreibung und Teaser-Text fehlen, daher wird der vorhandene Blogtext in der Card gerendert. Lorem ipsum dolor... - text: Beitrag lesen - generic [ref=e110]: - time [ref=e111]: 18.04.2023 - generic [ref=e112]: - generic [ref=e113]: Max Powers - img "Max Powers" [ref=e114] - article [ref=e116]: - figure [ref=e118] - generic [ref=e119]: - paragraph [ref=e120]: - link "Erster Teil einer Serie" [ref=e121] [cursor=pointer]: - /url: /blog/erster-teil-einer-serie/ - paragraph [ref=e122]: Hier wird automatisch das Menü der Blogreihe in der rechten Spalte ausgegeben. - text: Beitrag lesen - generic [ref=e123]: - time [ref=e124]: 15.02.2023 - generic [ref=e125]: - generic [ref=e126]: Max Powers - img "Max Powers" [ref=e127] - navigation "Seitennavigation" [ref=e128]: - list [ref=e129]: - listitem [ref=e130]: - link "Zur Seite 1" [ref=e131] [cursor=pointer]: - /url: /blog/blogreihen/styleguide-highlights/ - text: "1" - contentinfo [ref=e132]: - generic [ref=e135]: - navigation [ref=e136]: - list [ref=e137]: - listitem [ref=e138]: - button "Cookie-Einstellungen" [ref=e139] [cursor=pointer] - listitem [ref=e140]: - link "Datenschutzerklärung" [ref=e141] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e142]: - link "Impressum" [ref=e143] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e144]: - paragraph [ref=e145]: © Marketing Factory Digital GmbH - paragraph [ref=e146]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e147] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ ``` # Test source ```ts 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')); 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')); | ^ 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/blog-blogseries-de-desktop-darwin.png, writing actual. 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 | }); 483 | }); 484 | ```