# 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 >> category - Location: visual/mfc-corporate-de.spec.ts:416: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-category-de-tablet-darwin.png, writing actual. ``` # Page snapshot ```yaml - generic [ref=e2]: - link "Zum Inhalt springen" [ref=e3] [cursor=pointer]: - /url: "#page-content" - navigation "Brotkrumen-Navigation" [ref=e4]: - generic [ref=e5]: - paragraph [ref=e6]: "Sie sind here:" - list [ref=e7]: - listitem [ref=e8]: - link "Startseite" [ref=e9] [cursor=pointer]: - /url: / - img [ref=e10] - listitem [ref=e12]: - text: / - link "Blog" [ref=e13] [cursor=pointer]: - /url: /blog/ - generic [ref=e14]: Blog - listitem [ref=e15]: - text: / - link "Kategorien" [ref=e16] [cursor=pointer]: - /url: /blog/kategorien/ - generic [ref=e17]: Kategorien - listitem [ref=e18]: - text: / - generic [ref=e19]: Schokolade - main [ref=e20]: - generic [ref=e23]: - generic [ref=e24]: - paragraph [ref=e26]: Schokolade - link "Zur Übersicht der Kategorien" [ref=e29] [cursor=pointer]: - /url: /blog/kategorien/ - generic [ref=e30]: - heading "Beiträge aus der Kategorie \"Schokolade\"" [level=1] [ref=e32] - generic [ref=e33]: - article [ref=e35]: - figure [ref=e37] - generic [ref=e38]: - paragraph [ref=e39]: - link "Übersetztes Featured Image" [ref=e40] [cursor=pointer]: - /url: /blog/uebersetztes-featured-image/ - paragraph [ref=e41]: Das Featured Image unterscheidet sich in deutschem und englischem Beitrag (Listen- und Detailansicht). - text: Beitrag lesen - generic [ref=e42]: - time [ref=e43]: 24.07.2023 - generic [ref=e44]: - generic [ref=e45]: Michael Mustermann - img [ref=e46] - article [ref=e49]: - figure [ref=e51] - generic [ref=e52]: - paragraph [ref=e53]: - link "Dritter Teil einer Serie" [ref=e54] [cursor=pointer]: - /url: /blog/dritter-teil-einer-serie/ - paragraph [ref=e55]: Hier wird automatisch das Menü der Blogreihe in der rechten Spalte ausgegeben. - text: Beitrag lesen - generic [ref=e56]: - time [ref=e57]: 16.06.2023 - generic [ref=e58]: - generic [ref=e59]: Max Powers - img "Max Powers" [ref=e60] - article [ref=e62]: - figure [ref=e64] - generic [ref=e65]: - paragraph [ref=e66]: - link "Zweiter Teil einer Serie" [ref=e67] [cursor=pointer]: - /url: /blog/zweiter-teil-einer-serie/ - paragraph [ref=e68]: SEO-Beschreibung und Teaser-Text fehlen, daher wird der vorhandene Blogtext in der Card gerendert. Lorem ipsum dolor... - text: Beitrag lesen - generic [ref=e69]: - time [ref=e70]: 18.04.2023 - generic [ref=e71]: - generic [ref=e72]: Max Powers - img "Max Powers" [ref=e73] - article [ref=e75]: - figure [ref=e77] - generic [ref=e78]: - paragraph [ref=e79]: - link "Erster Teil einer Serie" [ref=e80] [cursor=pointer]: - /url: /blog/erster-teil-einer-serie/ - paragraph [ref=e81]: Hier wird automatisch das Menü der Blogreihe in der rechten Spalte ausgegeben. - text: Beitrag lesen - generic [ref=e82]: - time [ref=e83]: 15.02.2023 - generic [ref=e84]: - generic [ref=e85]: Max Powers - img "Max Powers" [ref=e86] - article [ref=e88]: - figure [ref=e90] - generic [ref=e91]: - paragraph [ref=e92]: - link "Mit Kommentaren" [ref=e93] [cursor=pointer]: - /url: /blog/mit-kommentaren/ - paragraph [ref=e94]: Blog-Kommentare, auch verschachtelt. Keine Unterscheidung nach Frontend-Sprache! - text: Beitrag lesen - generic [ref=e95]: - time [ref=e96]: 15.06.2022 - generic [ref=e97]: - generic [ref=e98]: John Doe - img "John Doe" [ref=e99] - article [ref=e101]: - figure [ref=e103] - generic [ref=e104]: - paragraph [ref=e105]: - link "Drei Autoren, einer inaktiv" [ref=e106] [cursor=pointer]: - /url: /blog/drei-autoren-einer-inaktiv/ - paragraph [ref=e107]: Der inaktive (ehemalige) Autor wird am Ende der Autorenbox einsortiert und ist kein Accordion-Element. - text: Beitrag lesen - generic [ref=e108]: - time [ref=e109]: 09.03.2022 - list [ref=e110]: - listitem [ref=e111]: - generic [ref=e112]: - generic [ref=e113]: Michael Mustermann - img [ref=e114] - listitem [ref=e116]: - generic [ref=e117]: - generic [ref=e118]: Ehemaliger Kollege - img "Ehemaliger Kollege" [ref=e119] - listitem [ref=e120]: - generic [ref=e121]: - generic [ref=e122]: Max Powers - img "Max Powers" [ref=e123] - navigation "Seitennavigation" [ref=e124]: - list [ref=e125]: - listitem [ref=e126]: - link "Zur Seite 1" [ref=e127] [cursor=pointer]: - /url: /blog/kategorien/schokolade/ - text: "1" - contentinfo [ref=e128]: - generic [ref=e131]: - navigation [ref=e132]: - list [ref=e133]: - listitem [ref=e134]: - button "Cookie-Einstellungen" [ref=e135] [cursor=pointer] - listitem [ref=e136]: - link "Datenschutzerklärung" [ref=e137] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e138]: - link "Impressum" [ref=e139] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e140]: - paragraph [ref=e141]: © Marketing Factory Digital GmbH - paragraph [ref=e142]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e143] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ ``` # Test source ```ts 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')); 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')); | ^ 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-category-de-tablet-darwin.png, writing actual. 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 | }); 483 | }); 484 | ```