# 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 >> slider-slide2grid - Location: visual/mfc-corporate-com.spec.ts:20:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed 12848 pixels (ratio 0.01 of all image pixels) are different. Snapshot: content-slider-slide2grid.png Call log: - Expect "toHaveScreenshot(content-slider-slide2grid.png)" with timeout 15000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 12848 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 - 12848 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/inhaltselemente/slider-slide2grid/ - text: De - listitem [ref=e56]: - link "English" [ref=e57] [cursor=pointer]: - /url: /content-elements/slider-slide2grid/ - 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 "Content elements" [ref=e67] [cursor=pointer]: - /url: /content-elements/ - generic [ref=e68]: Content elements - listitem [ref=e69]: - text: / - generic [ref=e70]: Slider (slide2grid) - main [ref=e71]: - generic [ref=e76]: - generic [ref=e77]: - img [ref=e79] - generic [ref=e81]: - heading "Seamless CMS Integration" [level=3] [ref=e82] - paragraph [ref=e83]: - text: Expand your online store with an informative 'Advice' section to create a brand experience for your customers. We generate synergies between the e-commerce system - link "Shopware" [ref=e84] [cursor=pointer]: - /url: https://www.marketing-factory.com/technology/shopware/ - text: and the enterprise CMS - link "TYPO3" [ref=e85] [cursor=pointer]: - /url: https://www.marketing-factory.com/technology/typo3/ - text: by creating an interface between them to positively shape your customers' image of the brand in the long term. - link "Find out more" [ref=e87] [cursor=pointer]: - /url: https://www.marketing-factory.com/services/programming-and-development/#c207 - generic [ref=e88]: - img [ref=e90] - generic [ref=e93]: - heading "Design" [level=3] [ref=e94] - paragraph [ref=e95]: Over 25 years of experience as a full-service expert help us to design your website in an integrated and sustainable way, and to develop a tailor-made digital solution that enables you to ideally reach your target group and fulfil your (online) mission. - link "Find out more" [ref=e97] [cursor=pointer]: - /url: https://www.marketing-factory.com/services/consulting-analysis-and-strategy/#c271 - generic [ref=e98]: - img [ref=e100] - generic [ref=e102]: - heading "Development and integration of interfaces" [level=3] [ref=e103] - paragraph [ref=e104]: Our many years of experience and expertise in interface development and integration enable us to network your existing internal and external systems to build a smooth-running IT architecture. The creation of a standardised data structure means that your system landscape can be scaled at any time and will continue to impress even when requirements change. - link "Find out more" [ref=e106] [cursor=pointer]: - /url: https://www.marketing-factory.com/services/programming-and-development/interface-development/ - generic [ref=e107]: - img [ref=e109] - generic [ref=e115]: - heading "PIM integration" [level=3] [ref=e116] - paragraph [ref=e117]: Would you like to populate your website, online shop, product catalogue or product configurator centrally and (partially) automatically with product information and media directly from your PIM system? We can support you in setting up a PIM system and will establish the appropriate interface between your sales and communication channels and your PIM. - link "Find out more" [ref=e119] [cursor=pointer]: - /url: https://www.marketing-factory.com/services/programming-and-development/pimerp-links/ - generic [ref=e120]: - img [ref=e122] - generic [ref=e128]: - heading "Website relaunch" [level=3] [ref=e129] - paragraph [ref=e130]: "Initial concept, technical implementation, relaunch: Together with you, we will define the key objectives for your company, specify the technical and content requirements, and bring your ageing website up to date with the latest technology. With optimum security, reduced loading time and no ranking losses in search engines." - link "Find out more" [ref=e132] [cursor=pointer]: - /url: https://www.marketing-factory.com/services/consulting-analysis-and-strategy/ - heading "From our services." [level=2] [ref=e133] - contentinfo [ref=e134]: - generic [ref=e137]: - navigation [ref=e138]: - list [ref=e139]: - listitem [ref=e140]: - button "Cookie settings" [ref=e141] [cursor=pointer] - listitem [ref=e142]: - link "Data privacy policy" [ref=e143] [cursor=pointer]: - /url: https://www.marketing-factory.com/data-privacy-policy/ - listitem [ref=e144]: - link "Legal notice" [ref=e145] [cursor=pointer]: - /url: https://www.marketing-factory.com/legal-notice/ - generic [ref=e146]: - paragraph [ref=e147]: © Marketing Factory Digital GmbH - paragraph [ref=e148]: - text: Alternative text for images is partially - link "generated by AI" [ref=e149] [cursor=pointer]: - /url: https://www.marketing-factory.com/technology/typo3/our-typo3-extensions/ai-filemetadata/ - generic [ref=e152]: - strong [ref=e153]: 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')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 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')); 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 | ```