# 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 >> content >> keyvisual - Location: visual/mfc-corporate-com.spec.ts:8:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed Expected an image 1288px by 1207px, received 1288px by 1079px. Snapshot: content-keyvisual.png Call log: - Expect "toHaveScreenshot(content-keyvisual.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 1288px by 1207px, received 1288px by 1079px. - 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 1288px by 1207px, received 1288px by 1079px. ``` # 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] - button "Farbschema wechseln" [ref=e50] [cursor=pointer] - list "Website language" [ref=e53]: - listitem [ref=e54]: - link "Deutsch" [ref=e55] [cursor=pointer]: - /url: https://www.marketing-factory.de.styleguide.renovate-develop-lock-file-maintenance.review.mfc.gmbh/inhaltselemente/keyvisual/ - text: De - listitem [ref=e56]: - link "English" [ref=e57] [cursor=pointer]: - /url: /content-elements/keyvisual/ - text: En - generic [ref=e65]: - heading "Marketing Factory" [level=1] [ref=e66] - paragraph [ref=e67]: Experienced. Reliable. Competent. - paragraph [ref=e68]: Well established for over 25 years. - navigation "Breadcrumb" [ref=e69]: - generic [ref=e70]: - paragraph [ref=e71]: "You are here:" - list [ref=e72]: - listitem [ref=e73]: - link "Homepage" [ref=e74] [cursor=pointer]: - /url: / - listitem [ref=e77]: - text: / - link "Content elements" [ref=e78] [cursor=pointer]: - /url: /content-elements/ - listitem [ref=e80]: - text: / - generic [ref=e81]: Keyvisual - main - contentinfo [ref=e82]: - generic [ref=e84]: - navigation [ref=e85]: - list [ref=e86]: - listitem [ref=e87]: - button "Cookie settings" [ref=e88] [cursor=pointer] - listitem [ref=e89]: - link "Data privacy policy" [ref=e90] [cursor=pointer]: - /url: https://www.marketing-factory.com.renovate-develop-lock-file-maintenance.review.mfc.gmbh/data-privacy-policy/ - listitem [ref=e91]: - link "Legal notice" [ref=e92] [cursor=pointer]: - /url: https://www.marketing-factory.com.renovate-develop-lock-file-maintenance.review.mfc.gmbh/legal-notice/ - generic [ref=e93]: - paragraph [ref=e94]: © Marketing Factory Digital GmbH - paragraph [ref=e95]: - text: Alternative text for images is partially - link "generated by AI" [ref=e96] [cursor=pointer]: - /url: https://www.marketing-factory.com.renovate-develop-lock-file-maintenance.review.mfc.gmbh/technology/typo3/our-typo3-extensions/ai-filemetadata/ - generic [ref=e99]: - strong [ref=e100]: Picture Credits - list [ref=e101]: - listitem [ref=e102]: "\"Hero Image\": © Sebastian Klein / Marketing Factory Digital GmbH" ``` # Test source ```ts 1 | import {test, expect} from '@playwright/test'; 2 | import {setup, 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')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 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('client-list', async ({ page }) => { 37 | await setup(page, '/page-types/customers-list-view/'); 38 | await expect(page).toHaveScreenshot(snap('pagetype-client-list')); 39 | }); 40 | 41 | test('client-pfm', async ({ page }) => { 42 | await setup(page, '/page-types/customers-list-view/pfm-medical-sg/'); 43 | await expect(page).toHaveScreenshot(snap('pagetype-client-pfm')); 44 | }); 45 | }); 46 | 47 | test.describe('plugins', () => { 48 | test('project-list', async ({ page }) => { 49 | await setup(page, '/plugins/project-list/'); 50 | await expect(page).toHaveScreenshot(snap('plugin-project-list')); 51 | }); 52 | 53 | test('project-obermeyer-corporate', async ({ page }) => { 54 | await setup(page, '/page-types/customers-list-view/obermeyer-sg/launch-of-the-obermeyer-groups-new-corporate-website-sg/'); 55 | await hideElements(page, PAGE_HEADER); 56 | // await scrollToBottom(page); 57 | await expect(page).toHaveScreenshot(snap('plugin-project-obermeyer-corporate')); 58 | }); 59 | 60 | test('picturecredits', async ({ page }) => { 61 | await setup(page, '/plugins/picturecredits/'); 62 | await expect(page).toHaveScreenshot(snap('plugin-picturecredits')); 63 | }); 64 | }); 65 | 66 | test.describe('blog', () => { 67 | test('overview', async ({ page }) => { 68 | await setup(page, '/blog/'); 69 | await expect(page).toHaveScreenshot(snap('blog-overview')); 70 | }); 71 | 72 | test('post-menu-elements', async ({ page }) => { 73 | await setup(page, '/blog/with-menu-elements/'); 74 | await expect(page).toHaveScreenshot(snap('blog-post-menu-elements')); 75 | }); 76 | 77 | test('post-with-comments', async ({ page }) => { 78 | await setup(page, '/blog/with-comments/'); 79 | await expect(page).toHaveScreenshot(snap('blog-post-with-comments')); 80 | }); 81 | 82 | test('post-localized-featured-image', async ({ page }) => { 83 | await setup(page, '/blog/localized-featured-image/'); 84 | await expect(page).toHaveScreenshot(snap('blog-post-localized-featured-image')); 85 | }); 86 | }); 87 | 88 | test.describe('forms', () => { 89 | test('contact', async ({ page }) => { 90 | await setup(page, '/forms/contact-form/'); 91 | await expect(page).toHaveScreenshot(snap('forms-contact')); 92 | await setDarkTheme(page); 93 | await expect(page).toHaveScreenshot(snap('forms-contact-dark')); 94 | }); 95 | 96 | test('footer', async ({ page }) => { 97 | await setup(page, '/forms/footer-form/'); 98 | await expect(page).toHaveScreenshot(snap('forms-footer')); 99 | }); 100 | }); 101 | ```