# 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-com.spec.ts >> blog >> post-with-comments - Location: visual/mfc-corporate-com.spec.ts:82:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed 16153 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 - 16153 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 - 16153 pixels (ratio 0.01 of all image pixels) are different. ``` # Page snapshot ```yaml - generic [ref=e2]: - link "Skip to content" [ref=e3] [cursor=pointer]: - /url: "#page-content" - banner [ref=e4]: - generic [ref=e5]: - link "Visit the homepage": - /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 "Toggle dropdown with space key" [ref=e32] [cursor=pointer]: - /url: /content-elements/ - text: Content elements - listitem [ref=e33]: - link "Toggle dropdown with space key" [ref=e34] [cursor=pointer]: - /url: /richtext-editor/ - text: RTE - listitem [ref=e35]: - link "Toggle dropdown with space key" [ref=e36] [cursor=pointer]: - /url: /page-types/ - text: Page types - listitem [ref=e37]: - link "Toggle dropdown with space key" [ref=e38] [cursor=pointer]: - /url: /plugins/ - text: Plugins - listitem [ref=e39]: - link "Blog" [ref=e40] [cursor=pointer]: - /url: /blog/ - listitem [ref=e41]: - link "Toggle dropdown with space key" [ref=e42] [cursor=pointer]: - /url: /forms/ - text: Forms - generic [ref=e44]: - button "Show search field" [ref=e46] [cursor=pointer]: - img [ref=e48] - button "Farbschema wechseln" [ref=e50] [cursor=pointer]: - img [ref=e51] - list "Website language" [ref=e53]: - listitem [ref=e54]: - link "Deutsch" [ref=e55] [cursor=pointer]: - /url: https://www.marketing-factory.de.styleguide.mfc.gmbh/blog/mit-kommentaren/ - text: De - listitem [ref=e56]: - link "English" [ref=e57] [cursor=pointer]: - /url: /blog/with-comments/ - text: En - navigation "Breadcrumb" [ref=e58]: - generic [ref=e59]: - paragraph [ref=e60]: "You are here:" - list [ref=e61]: - listitem [ref=e62]: - link "Homepage" [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]: With comments - 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 "Ice cream" [ref=e84] [cursor=pointer]: - /url: /blog/categories/ice-cream/ - listitem [ref=e85]: - link "Chocolate" [ref=e86] [cursor=pointer]: - /url: /blog/categories/chocolate/ - listitem [ref=e87]: - link "Cookies" [ref=e88] [cursor=pointer]: - /url: /blog/categories/cookies/ - time [ref=e92]: 15.06.2022 - heading "With comments" [level=1] [ref=e93] - separator [ref=e94] - complementary [ref=e95]: - generic [ref=e97]: - generic [ref=e99]: John Doe - paragraph [ref=e100]: - link "More posts by this author" [ref=e101] [cursor=pointer]: - /url: /blog/authors/john-doe/ - list [ref=e103]: - listitem [ref=e104]: - link "The author's website" [ref=e105] [cursor=pointer]: - /url: https://www.example.org - img [ref=e106] - listitem [ref=e108]: - link "The author on Twitter" [ref=e109] [cursor=pointer]: - /url: https://twitter.com/realjohndoe - img [ref=e110] - link "Get blog posts as RSS feed" [ref=e112] [cursor=pointer]: - /url: /blog/blog.recent.xml - img [ref=e113] - text: Get blog posts as RSS feed - paragraph [ref=e115]: All parts of this blog series - list [ref=e116]: - listitem [ref=e117]: - link "With comments" [ref=e118] [cursor=pointer]: - /url: /blog/with-comments/ - listitem [ref=e119]: - link "Localized Featured Image" [ref=e120] [cursor=pointer]: - /url: /blog/localized-featured-image/ - generic [ref=e121]: - paragraph [ref=e122]: Please feel free to share this article. - list [ref=e123]: - listitem [ref=e124]: - button "share" [ref=e125] [cursor=pointer]: - img [ref=e126] - generic [ref=e128]: share - listitem [ref=e129]: - button "share" [ref=e130] [cursor=pointer]: - img [ref=e131] - generic [ref=e133]: share - listitem [ref=e134]: - button "share" [ref=e135] [cursor=pointer]: - img [ref=e136] - generic [ref=e138]: share - generic [ref=e140]: - separator [ref=e141] - paragraph [ref=e142]: Comments - paragraph [ref=e143]: No comments yet. - contentinfo [ref=e144]: - generic [ref=e148]: - paragraph [ref=e150]: Write a comment. - generic [ref=e152]: - generic [ref=e153]: - generic [ref=e154]: Name * - textbox "Name *" [ref=e155] - generic [ref=e156]: - generic [ref=e157]: E-mail * - textbox "E-mail *" [ref=e158] - generic [ref=e159]: - generic [ref=e160]: Comment * - textbox "Comment *" [ref=e161] - generic [ref=e162]: - generic [ref=e163]: - checkbox "I have read the data privacy statement and consent to my personal data being processed according to this statement. *" [ref=e164] - generic [ref=e165]: - text: I have read the - link "data privacy statement" [ref=e166] [cursor=pointer]: - /url: https://www.marketing-factory.com/data-privacy-policy/ - text: and consent to my personal data being processed according to this statement. * - generic [ref=e167]: - paragraph [ref=e168]: I have been informed that the processing of my data is on a voluntary basis and that I can refuse my consent without detrimental consequences for me or withdraw my consent at any time to Marketing Factory Digital GmbH by mail (Erkrather Straße 401, D-40231 Düsseldorf) or e-mail (info@marketing-factory.de). - paragraph [ref=e169]: I understand that the above data will be stored for as long as I wish to be contacted by Marketing Factory. After my revocation my data will be deleted. Further storage may take place in individual cases if this is required by law. - navigation [ref=e170]: - button "Submit" [ref=e171] [cursor=pointer] - generic [ref=e173]: - navigation [ref=e174]: - list [ref=e175]: - listitem [ref=e176]: - button "Cookie settings" [ref=e177] [cursor=pointer] - listitem [ref=e178]: - link "Data privacy policy" [ref=e179] [cursor=pointer]: - /url: https://www.marketing-factory.com/data-privacy-policy/ - listitem [ref=e180]: - link "Legal notice" [ref=e181] [cursor=pointer]: - /url: https://www.marketing-factory.com/legal-notice/ - generic [ref=e182]: - paragraph [ref=e183]: © Marketing Factory Digital GmbH - paragraph [ref=e184]: - text: Alternative text for images is partially - link "generated by AI" [ref=e185] [cursor=pointer]: - /url: https://www.marketing-factory.com/technology/typo3/our-typo3-extensions/ai-filemetadata/ - generic [ref=e188]: - strong [ref=e189]: Picture Credits - list ``` # Test source ```ts 1 | import { test, expect } from '@playwright/test'; 2 | import { setup, scrollToBottom, setDarkTheme, hideElements } from '../helpers/utils'; 3 | 4 | const PAGE_HEADER = ['.c-page-header']; 5 | const snap = (name: string) => ({ name: `${name}.png`, fullPage: true } as const); 6 | 7 | test.describe('content', () => { 8 | test('keyvisual', async ({ page }) => { 9 | await setup(page, '/content-elements/keyvisual/'); 10 | await expect(page).toHaveScreenshot(snap('content-keyvisual')); 11 | await setDarkTheme(page); 12 | await expect(page).toHaveScreenshot(snap('content-keyvisual-dark')); 13 | }); 14 | 15 | test('hero-image', async ({ page }) => { 16 | await setup(page, '/content-elements/hero-image/'); 17 | await expect(page).toHaveScreenshot(snap('content-hero-image')); 18 | }); 19 | 20 | test('slider-slide2grid', async ({ page }) => { 21 | await setup(page, '/content-elements/slider-slide2grid/'); 22 | await expect(page).toHaveScreenshot(snap('content-slider-slide2grid')); 23 | await setDarkTheme(page); 24 | await expect(page).toHaveScreenshot(snap('content-slider-slide2grid-dark')); 25 | }); 26 | 27 | test('comparison-modul', async ({ page }) => { 28 | await setup(page, '/content-elements/comparison-module/'); 29 | await expect(page).toHaveScreenshot(snap('content-comparison-modul')); 30 | await setDarkTheme(page); 31 | await expect(page).toHaveScreenshot(snap('content-comparison-modul-dark')); 32 | }); 33 | }); 34 | 35 | test.describe('page-types', () => { 36 | test('search', async ({ page }) => { 37 | await setup(page, '/page-types/search/?tx_solr%5Bq%5D=obermeyer'); 38 | await expect(page).toHaveScreenshot(snap('pagetype-search')); 39 | }); 40 | 41 | test('client-list', async ({ page }) => { 42 | await setup(page, '/page-types/customers-list-view/'); 43 | await expect(page).toHaveScreenshot(snap('pagetype-client-list')); 44 | }); 45 | 46 | test('client-pfm', async ({ page }) => { 47 | await setup(page, '/page-types/customers-list-view/pfm-medical-sg/'); 48 | await expect(page).toHaveScreenshot(snap('pagetype-client-pfm')); 49 | }); 50 | }); 51 | 52 | test.describe('plugins', () => { 53 | test('project-list', async ({ page }) => { 54 | await setup(page, '/plugins/project-list/'); 55 | await expect(page).toHaveScreenshot(snap('plugin-project-list')); 56 | }); 57 | 58 | test('project-obermeyer-corporate', async ({ page }) => { 59 | await setup(page, '/page-types/customers-list-view/obermeyer-sg/launch-of-the-obermeyer-groups-new-corporate-website-sg/'); 60 | await hideElements(page, PAGE_HEADER); 61 | await scrollToBottom(page); 62 | await expect(page).toHaveScreenshot(snap('plugin-project-obermeyer-corporate')); 63 | }); 64 | 65 | test('picturecredits', async ({ page }) => { 66 | await setup(page, '/plugins/picturecredits/'); 67 | await expect(page).toHaveScreenshot(snap('plugin-picturecredits')); 68 | }); 69 | }); 70 | 71 | test.describe('blog', () => { 72 | test('overview', async ({ page }) => { 73 | await setup(page, '/blog/'); 74 | await expect(page).toHaveScreenshot(snap('blog-overview')); 75 | }); 76 | 77 | test('post-menu-elements', async ({ page }) => { 78 | await setup(page, '/blog/with-menu-elements/'); 79 | await expect(page).toHaveScreenshot(snap('blog-post-menu-elements')); 80 | }); 81 | 82 | test('post-with-comments', async ({ page }) => { 83 | await setup(page, '/blog/with-comments/'); > 84 | await expect(page).toHaveScreenshot(snap('blog-post-with-comments')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 85 | }); 86 | 87 | test('post-localized-featured-image', async ({ page }) => { 88 | await setup(page, '/blog/localized-featured-image/'); 89 | await expect(page).toHaveScreenshot(snap('blog-post-localized-featured-image')); 90 | }); 91 | }); 92 | 93 | test.describe('forms', () => { 94 | test('contact', async ({ page }) => { 95 | await setup(page, '/forms/contact-form/'); 96 | await expect(page).toHaveScreenshot(snap('forms-contact')); 97 | await setDarkTheme(page); 98 | await expect(page).toHaveScreenshot(snap('forms-contact-dark')); 99 | }); 100 | 101 | test('footer', async ({ page }) => { 102 | await setup(page, '/forms/footer-form/'); 103 | await expect(page).toHaveScreenshot(snap('forms-footer')); 104 | }); 105 | }); 106 | ```