# 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 >> post-with-comments - Location: visual/mfc-corporate-de.spec.ts:448:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed Expected an image 1032px by 3349px, received 1032px by 3350px. 34342 pixels (ratio 0.01 of all image pixels) are different. Snapshot: blog-post-with-comments.png Call log: - Expect "toHaveScreenshot(blog-post-with-comments.png)" with timeout 15000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - Expected an image 1032px by 3349px, received 1032px by 3350px. 34342 pixels (ratio 0.01 of all image pixels) are different. - waiting 100ms before taking screenshot - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - captured a stable screenshot - Expected an image 1032px by 3349px, received 1032px by 3350px. 34342 pixels (ratio 0.01 of all image pixels) are different. ``` # 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/mit-kommentaren/ - text: De - listitem [ref=e56]: - link "English" [ref=e57] [cursor=pointer]: - /url: https://www.marketing-factory.com.styleguide.mfc.gmbh/blog/with-comments/ - 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: / - generic [ref=e70]: Mit Kommentaren - main [ref=e71]: - article [ref=e72]: - generic [ref=e74]: - generic [ref=e75]: - generic [ref=e76]: - figure [ref=e77] - list [ref=e82]: - listitem [ref=e83]: - link "Eis" [ref=e84] [cursor=pointer]: - /url: /blog/kategorien/eis/ - listitem [ref=e85]: - link "Schokolade" [ref=e86] [cursor=pointer]: - /url: /blog/kategorien/schokolade/ - listitem [ref=e87]: - link "Kekse" [ref=e88] [cursor=pointer]: - /url: /blog/kategorien/kekse/ - time [ref=e92]: 15.06.2022 - heading "Mit Kommentaren" [level=1] [ref=e93] - separator [ref=e94] - complementary [ref=e95]: - generic [ref=e97]: - generic [ref=e99]: John Doe - paragraph [ref=e100]: - link "Weitere Beiträge dieses Autors" [ref=e101] [cursor=pointer]: - /url: /blog/autoren/john-doe/ - list [ref=e103]: - listitem [ref=e104]: - link "Website dieses Autors" [ref=e105] [cursor=pointer]: - /url: https://www.example.org - img [ref=e106] - listitem [ref=e108]: - link "Der Autor auf Twitter" [ref=e109] [cursor=pointer]: - /url: https://twitter.com/realjohndoe - img [ref=e110] - link "Blog als RSS-Feed abonnieren" [ref=e112] [cursor=pointer]: - /url: /blog/blog.recent.xml - img [ref=e113] - text: Blog als RSS-Feed abonnieren - paragraph [ref=e115]: Alle Teile der Blogreihe - list [ref=e116]: - listitem [ref=e117]: - link "Mit Kommentaren" [ref=e118] [cursor=pointer]: - /url: /blog/mit-kommentaren/ - listitem [ref=e119]: - link "Übersetztes Featured Image" [ref=e120] [cursor=pointer]: - /url: /blog/uebersetztes-featured-image/ - generic [ref=e121]: - paragraph [ref=e122]: Wir freuen uns, wenn Ihr diesen Beitrag teilt. - list [ref=e123]: - listitem [ref=e124]: - button "teilen" [ref=e125] [cursor=pointer]: - img [ref=e126] - generic [ref=e128]: teilen - listitem [ref=e129]: - button "teilen" [ref=e130] [cursor=pointer]: - img [ref=e131] - generic [ref=e133]: teilen - listitem [ref=e134]: - button "teilen" [ref=e135] [cursor=pointer]: - img [ref=e136] - generic [ref=e138]: teilen - generic [ref=e140]: - separator [ref=e141] - paragraph [ref=e142]: Kommentare - generic [ref=e143]: - generic [ref=e144]: - img [ref=e145] - generic [ref=e147]: - paragraph [ref=e148]: Michael Mustermann - time [ref=e149]: 16.06.2023, 09:01 Uhr - generic [ref=e150]: - paragraph [ref=e152]: Thx! - link "Antworten" [ref=e154] [cursor=pointer]: - /url: /blog/mit-kommentaren/?tx_pwcomments_new%5Baction%5D=new&tx_pwcomments_new%5BcommentToReplyTo%5D=27&tx_pwcomments_new%5Bcontroller%5D=Comment#writeComment - generic [ref=e155]: - generic [ref=e156]: - img [ref=e157] - generic [ref=e159]: - paragraph [ref=e160]: Aaron Anonym - time [ref=e161]: 16.06.2023, 08:54 Uhr - generic [ref=e162]: - paragraph [ref=e164]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - link "Antworten" [ref=e166] [cursor=pointer]: - /url: /blog/mit-kommentaren/?tx_pwcomments_new%5Baction%5D=new&tx_pwcomments_new%5BcommentToReplyTo%5D=24&tx_pwcomments_new%5Bcontroller%5D=Comment#writeComment - generic [ref=e167]: - generic [ref=e168]: - img [ref=e169] - generic [ref=e171]: - paragraph [ref=e172]: MFC Mitarbeiter - time [ref=e173]: 16.06.2023, 09:04 Uhr - generic [ref=e174]: - paragraph [ref=e176]: So nicht. - link "Antworten" [ref=e178] [cursor=pointer]: - /url: /blog/mit-kommentaren/?tx_pwcomments_new%5Baction%5D=new&tx_pwcomments_new%5BcommentToReplyTo%5D=24&tx_pwcomments_new%5Bcontroller%5D=Comment#writeComment - generic [ref=e179]: - img [ref=e180] - generic [ref=e182]: - paragraph [ref=e183]: Eric Jones - time [ref=e184]: 16.06.2023, 09:03 Uhr - generic [ref=e185]: - paragraph [ref=e187]: Spam spam spam spam spam spam. - link "Antworten" [ref=e189] [cursor=pointer]: - /url: /blog/mit-kommentaren/?tx_pwcomments_new%5Baction%5D=new&tx_pwcomments_new%5BcommentToReplyTo%5D=24&tx_pwcomments_new%5Bcontroller%5D=Comment#writeComment - generic [ref=e190]: - img [ref=e191] - generic [ref=e193]: - paragraph [ref=e194]: MFC Mitarbeiter - time [ref=e195]: 16.06.2023, 08:59 Uhr - generic [ref=e196]: - paragraph [ref=e198]: - text: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua:" - text: lorem.ipsum.dolor = 1 - link "Antworten" [ref=e200] [cursor=pointer]: - /url: /blog/mit-kommentaren/?tx_pwcomments_new%5Baction%5D=new&tx_pwcomments_new%5BcommentToReplyTo%5D=24&tx_pwcomments_new%5Bcontroller%5D=Comment#writeComment - contentinfo [ref=e201]: - generic [ref=e205]: - paragraph [ref=e207]: Kommentar verfassen. - generic [ref=e209]: - generic [ref=e210]: - generic [ref=e211]: Name * - textbox "Name *" [ref=e212] - generic [ref=e213]: - generic [ref=e214]: E-Mail * - textbox "E-Mail *" [ref=e215] - generic [ref=e216]: - generic [ref=e217]: Kommentar * - textbox "Kommentar *" [ref=e218] - generic [ref=e219]: - generic [ref=e220]: - checkbox "Ich habe die Datenschutzerklärung gelesen und willige in die Verarbeitung meiner personenbezogenen Daten entsprechend dieser Erklärung ein. *" [ref=e221] - generic [ref=e222]: - text: Ich habe die - link "Datenschutzerklärung" [ref=e223] [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=e224]: - paragraph [ref=e225]: 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=e226]: 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 [ref=e227]: - button "Absenden" [ref=e228] [cursor=pointer] - generic [ref=e230]: - navigation [ref=e231]: - list [ref=e232]: - listitem [ref=e233]: - button "Cookie-Einstellungen" [ref=e234] [cursor=pointer] - listitem [ref=e235]: - link "Datenschutzerklärung" [ref=e236] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e237]: - link "Impressum" [ref=e238] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e239]: - paragraph [ref=e240]: © Marketing Factory Digital GmbH - paragraph [ref=e241]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e242] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ - generic [ref=e245]: - strong [ref=e246]: Bildnachweise - list ``` # Test source ```ts 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')); 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')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 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 | ```