# 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-menu-elements - Location: visual/mfc-corporate-com.spec.ts:77:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed 2319 pixels (ratio 0.01 of all image pixels) are different. Snapshot: blog-post-menu-elements.png Call log: - Expect "toHaveScreenshot(blog-post-menu-elements.png)" with timeout 15000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 2319 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 - 2319 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 "Marketing Factory Digital GmbH" [ref=e6] [cursor=pointer]: - /url: / - img "Marketing Factory Digital GmbH" [ref=e7] - link "Contact form" [ref=e26] [cursor=pointer]: - /url: /forms/contact-form/ - button "Navigation" [expanded] [ref=e27] [cursor=pointer] - navigation "Breadcrumb" [ref=e29]: - generic [ref=e30]: - paragraph [ref=e31]: "You are here:" - list [ref=e32]: - listitem [ref=e33]: - link "Homepage" [ref=e34] [cursor=pointer]: - /url: / - img [ref=e35] - listitem [ref=e37]: - text: / - link "Blog" [ref=e38] [cursor=pointer]: - /url: /blog/ - generic [ref=e39]: Blog - listitem [ref=e40]: - text: / - generic [ref=e41]: With menu elements - main [ref=e42]: - article [ref=e43]: - generic [ref=e45]: - generic [ref=e46]: - generic [ref=e47]: - figure [ref=e48] - list [ref=e53]: - listitem [ref=e54]: - link "Ice cream" [ref=e55] [cursor=pointer]: - /url: /blog/categories/ice-cream/ - time [ref=e59]: 16.06.2023 - heading "With menu elements" [level=1] [ref=e60] - separator [ref=e61] - generic [ref=e64]: - paragraph [ref=e65]: 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. - paragraph [ref=e66]: 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. - complementary [ref=e67]: - generic [ref=e69]: - generic [ref=e70]: - img [ref=e71] - generic [ref=e73]: Michael Mustermann - paragraph [ref=e74]: - link "More posts by this author" [ref=e75] [cursor=pointer]: - /url: /blog/authors/michael-mustermann/ - list [ref=e77]: - listitem [ref=e78]: - link "The author's website" [ref=e79] [cursor=pointer]: - /url: https://www.example.org - img [ref=e80] - listitem [ref=e82]: - link "The author on Twitter" [ref=e83] [cursor=pointer]: - /url: https://twitter.com/mustermann12 - img [ref=e84] - link "Get blog posts as RSS feed" [ref=e86] [cursor=pointer]: - /url: /blog/blog.recent.xml - img [ref=e87] - text: Get blog posts as RSS feed - generic [ref=e90]: - paragraph [ref=e92]: Related blog posts - list [ref=e93]: - listitem [ref=e94]: - link "Drei Autoren, einer inaktiv" [ref=e95] [cursor=pointer]: - /url: /blog/drei-autoren-einer-inaktiv/ - listitem [ref=e96]: - link "Without featured image" [ref=e97] [cursor=pointer]: - /url: /blog/without-featured-image/ - generic [ref=e99]: - paragraph [ref=e101]: Related topic pages - list [ref=e102]: - listitem [ref=e103]: - link "Basics" [ref=e104] [cursor=pointer]: - /url: /design-basiseigenschaften/ - listitem [ref=e105]: - link "Card Group" [ref=e106] [cursor=pointer]: - /url: /content-elements/card-group/ - listitem [ref=e107]: - link "RTE" [ref=e108] [cursor=pointer]: - /url: /richtext-editor/ - generic [ref=e109]: - paragraph [ref=e110]: Please feel free to share this article. - list [ref=e111]: - listitem [ref=e112]: - button "share" [ref=e113] [cursor=pointer]: - img [ref=e114] - generic [ref=e116]: share - listitem [ref=e117]: - button "share" [ref=e118] [cursor=pointer]: - img [ref=e119] - generic [ref=e121]: share - listitem [ref=e122]: - button "share" [ref=e123] [cursor=pointer]: - img [ref=e124] - generic [ref=e126]: share - generic [ref=e128]: - separator [ref=e129] - paragraph [ref=e130]: Comments - paragraph [ref=e131]: No comments yet. - contentinfo [ref=e132]: - generic [ref=e136]: - paragraph [ref=e138]: Write a comment. - generic [ref=e140]: - generic [ref=e141]: - generic [ref=e142]: Name * - textbox "Name *" [ref=e143] - generic [ref=e144]: - generic [ref=e145]: E-mail * - textbox "E-mail *" [ref=e146] - generic [ref=e147]: - generic [ref=e148]: Comment * - textbox "Comment *" [ref=e149] - generic [ref=e150]: - generic [ref=e151]: - checkbox "I have read the data privacy statement and consent to my personal data being processed according to this statement. *" [ref=e152] - generic [ref=e153]: - text: I have read the - link "data privacy statement" [ref=e154] [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=e155]: - paragraph [ref=e156]: 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=e157]: 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=e158]: - button "Submit" [ref=e159] [cursor=pointer] - generic [ref=e161]: - navigation [ref=e162]: - list [ref=e163]: - listitem [ref=e164]: - button "Cookie settings" [ref=e165] [cursor=pointer] - listitem [ref=e166]: - link "Data privacy policy" [ref=e167] [cursor=pointer]: - /url: https://www.marketing-factory.com/data-privacy-policy/ - listitem [ref=e168]: - link "Legal notice" [ref=e169] [cursor=pointer]: - /url: https://www.marketing-factory.com/legal-notice/ - generic [ref=e170]: - paragraph [ref=e171]: © Marketing Factory Digital GmbH - paragraph [ref=e172]: - text: Alternative text for images is partially - link "generated by AI" [ref=e173] [cursor=pointer]: - /url: https://www.marketing-factory.com/technology/typo3/our-typo3-extensions/ai-filemetadata/ - generic [ref=e176]: - strong [ref=e177]: 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')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 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')); 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 | ```