# 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 >> overview - Location: visual/mfc-corporate-de.spec.ts:392: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-overview-de-desktop-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/blog-overview-dark-de-desktop-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: / - generic [ref=e13]: Blog - main [ref=e14]: - generic [ref=e15]: - generic [ref=e16]: Suche nach Blogbeiträgen - textbox "Suchbegriff" [ref=e17]: - /placeholder: Blogbeiträge durchsuchen - button "Suchergebnisse anzeigen" [ref=e18] [cursor=pointer]: - img [ref=e20] - generic [ref=e22]: - generic [ref=e25]: - link "Blog als RSS-Feed abonnieren" [ref=e26] [cursor=pointer]: - /url: /blog/blog.recent.xml - img [ref=e27] - text: Blog als RSS-Feed abonnieren - generic [ref=e29]: - paragraph [ref=e30]: Kategorien - link "Kategorie-Liste überspringen" [ref=e31] [cursor=pointer]: - /url: "#endOfCategoryList" - navigation [ref=e32]: - list [ref=e33]: - listitem [ref=e34]: - link "Schokolade" [ref=e35] [cursor=pointer]: - /url: /blog/kategorien/schokolade/ - listitem [ref=e36]: - link "Kekse" [ref=e37] [cursor=pointer]: - /url: /blog/kategorien/kekse/ - listitem [ref=e38]: - link "Eis" [ref=e39] [cursor=pointer]: - /url: /blog/kategorien/eis/ - generic [ref=e40]: - paragraph [ref=e41]: Blogreihen - link "Blogreihen-Liste überspringen" [ref=e42] [cursor=pointer]: - /url: "#endOfBlogSeriesList" - navigation [ref=e43]: - list [ref=e44]: - listitem [ref=e45]: - link "Sprach-Handling-Test" [ref=e46] [cursor=pointer]: - /url: /blog/blogreihen/sprach-handling-test/ - listitem [ref=e47]: - link "Styleguide-Highlights!" [ref=e48] [cursor=pointer]: - /url: /blog/blogreihen/styleguide-highlights/ - generic [ref=e49]: - paragraph [ref=e50]: Autoren - link "Autoren-Liste überspringen" [ref=e51] [cursor=pointer]: - /url: "#endOfAuthorList" - navigation [ref=e52]: - list [ref=e53]: - listitem [ref=e54]: - link [ref=e55] [cursor=pointer]: - /url: /blog/autoren/john-doe/ - listitem [ref=e56]: - link [ref=e57] [cursor=pointer]: - /url: /blog/autoren/max-powers/ - listitem [ref=e58]: - link [ref=e59] [cursor=pointer]: - /url: /blog/autoren/michael-mustermann/ - img [ref=e60] - generic [ref=e64]: - generic [ref=e65]: - article [ref=e67]: - figure [ref=e69] - generic [ref=e70]: - paragraph [ref=e71]: - link "Übersetztes Featured Image" [ref=e72] [cursor=pointer]: - /url: /blog/uebersetztes-featured-image/ - paragraph [ref=e73]: Das Featured Image unterscheidet sich in deutschem und englischem Beitrag (Listen- und Detailansicht). - text: Beitrag lesen - generic [ref=e74]: - time [ref=e75]: 24.07.2023 - generic [ref=e76]: - generic [ref=e77]: Michael Mustermann - img [ref=e78] - article [ref=e81]: - figure [ref=e83] - generic [ref=e84]: - paragraph [ref=e85]: - link "Mit Menü-Elementen" [ref=e86] [cursor=pointer]: - /url: /blog/mit-menue-elementen/ - paragraph [ref=e87]: Manuell gesetzte Verlinkungen auf thematisch passende Blogbeiträge und Themen-Seiten. - text: Beitrag lesen - generic [ref=e88]: - time [ref=e89]: 16.06.2023 - generic [ref=e90]: - generic [ref=e91]: Michael Mustermann - img [ref=e92] - article [ref=e95]: - figure [ref=e97] - generic [ref=e98]: - paragraph [ref=e99]: - link "Dritter Teil einer Serie" [ref=e100] [cursor=pointer]: - /url: /blog/dritter-teil-einer-serie/ - paragraph [ref=e101]: Hier wird automatisch das Menü der Blogreihe in der rechten Spalte ausgegeben. - text: Beitrag lesen - generic [ref=e102]: - time [ref=e103]: 16.06.2023 - generic [ref=e104]: - generic [ref=e105]: Max Powers - img "Max Powers" [ref=e106] - article [ref=e108]: - figure [ref=e110] - generic [ref=e111]: - paragraph [ref=e112]: - link "Zweiter Teil einer Serie" [ref=e113] [cursor=pointer]: - /url: /blog/zweiter-teil-einer-serie/ - paragraph [ref=e114]: SEO-Beschreibung und Teaser-Text fehlen, daher wird der vorhandene Blogtext in der Card gerendert. Lorem ipsum dolor... - text: Beitrag lesen - generic [ref=e115]: - time [ref=e116]: 18.04.2023 - generic [ref=e117]: - generic [ref=e118]: Max Powers - img "Max Powers" [ref=e119] - article [ref=e121]: - figure [ref=e123] - generic [ref=e124]: - paragraph [ref=e125]: - link "Erster Teil einer Serie" [ref=e126] [cursor=pointer]: - /url: /blog/erster-teil-einer-serie/ - paragraph [ref=e127]: Hier wird automatisch das Menü der Blogreihe in der rechten Spalte ausgegeben. - text: Beitrag lesen - generic [ref=e128]: - time [ref=e129]: 15.02.2023 - generic [ref=e130]: - generic [ref=e131]: Max Powers - img "Max Powers" [ref=e132] - article [ref=e134]: - img [ref=e137] - generic [ref=e139]: - paragraph [ref=e140]: - link "Ohne Beitragsbild" [ref=e141] [cursor=pointer]: - /url: /blog/ohne-beitragsbild/ - paragraph [ref=e142]: Ein Font-Awesome-Icon mit Hintergrundverlauf wird als Fallback verwendet. - text: Beitrag lesen - generic [ref=e143]: - time [ref=e144]: 06.12.2022 - generic [ref=e145]: - generic [ref=e146]: Michael Mustermann - img [ref=e147] - article [ref=e150]: - figure [ref=e152] - generic [ref=e153]: - paragraph [ref=e154]: - link "Mit Kommentaren" [ref=e155] [cursor=pointer]: - /url: /blog/mit-kommentaren/ - paragraph [ref=e156]: Blog-Kommentare, auch verschachtelt. Keine Unterscheidung nach Frontend-Sprache! - text: Beitrag lesen - generic [ref=e157]: - time [ref=e158]: 15.06.2022 - generic [ref=e159]: - generic [ref=e160]: John Doe - img "John Doe" [ref=e161] - article [ref=e163]: - figure [ref=e165] - generic [ref=e166]: - paragraph [ref=e167]: - link "Drei Autoren, einer inaktiv" [ref=e168] [cursor=pointer]: - /url: /blog/drei-autoren-einer-inaktiv/ - paragraph [ref=e169]: Der inaktive (ehemalige) Autor wird am Ende der Autorenbox einsortiert und ist kein Accordion-Element. - text: Beitrag lesen - generic [ref=e170]: - time [ref=e171]: 09.03.2022 - list [ref=e172]: - listitem [ref=e173]: - generic [ref=e174]: - generic [ref=e175]: Michael Mustermann - img [ref=e176] - listitem [ref=e178]: - generic [ref=e179]: - generic [ref=e180]: Ehemaliger Kollege - img "Ehemaliger Kollege" [ref=e181] - listitem [ref=e182]: - generic [ref=e183]: - generic [ref=e184]: Max Powers - img "Max Powers" [ref=e185] - navigation "Seitennavigation" [ref=e186]: - list [ref=e187]: - listitem [ref=e188]: - link "Zur Seite 1" [ref=e189] [cursor=pointer]: - /url: /blog/ - text: "1" - contentinfo [ref=e190]: - generic [ref=e193]: - navigation [ref=e194]: - list [ref=e195]: - listitem [ref=e196]: - button "Cookie-Einstellungen" [ref=e197] [cursor=pointer] - listitem [ref=e198]: - link "Datenschutzerklärung" [ref=e199] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e200]: - link "Impressum" [ref=e201] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e202]: - paragraph [ref=e203]: © Marketing Factory Digital GmbH - paragraph [ref=e204]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e205] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ ``` # Test source ```ts 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')); 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')); | ^ 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-overview-dark-de-desktop-darwin.png, writing actual. 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 | }); 483 | }); 484 | ```