# 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 >> plugins >> project-obermeyer-corporate - Location: visual/mfc-corporate-com.spec.ts:58:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed 12901 pixels (ratio 0.01 of all image pixels) are different. Snapshot: plugin-project-obermeyer-corporate.png Call log: - Expect "toHaveScreenshot(plugin-project-obermeyer-corporate.png)" with timeout 15000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - 12901 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 - 12901 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" - img "Quanzhou Trade Fair - © OBERMEYER" [ref=e6] - navigation "Breadcrumb" [ref=e7]: - generic [ref=e8]: - paragraph [ref=e9]: "You are here:" - list [ref=e10]: - listitem [ref=e11]: - link "Homepage" [ref=e12] [cursor=pointer]: - /url: / - img [ref=e13] - listitem [ref=e15]: - text: / - link "Page types" [ref=e16] [cursor=pointer]: - /url: /page-types/ - generic [ref=e17]: Page types - listitem [ref=e18]: - text: / - 'link "Customers: List view" [ref=e19] [cursor=pointer]': - /url: /page-types/customers-list-view/ - generic [ref=e20]: "Customers: List view" - listitem [ref=e21]: - text: / - link "OBERMEYER (SG)" [ref=e22] [cursor=pointer]: - /url: /page-types/customers-list-view/obermeyer-sg/ - generic [ref=e23]: OBERMEYER (SG) - listitem [ref=e24]: - text: / - generic [ref=e25]: Launch of the OBERMEYER Group's new corporate website (SG) - main [ref=e26]: - generic [ref=e28]: - generic [ref=e31]: - heading "Launch of the OBERMEYER Group's new corporate website" [level=1] [ref=e33] - paragraph [ref=e34]: - text: "At the start of 2020, Marketing Factory was commissioned to launch the OBERMEYER Group's corporate website, which was to be the central go-to place for all services: The website showcases national and international associated companies and partners of the group with their divisions and national subsidiaries in order to underline the group's overall planning aspect as an elementary component of its corporate strategy." - text: A new corporate design for print and web media was developed in cooperation with in-house OBERMEYER and external designers for the group's new online presence, which is based on the family-owned company's logo but reinterprets it in a more modern format. - text: The first step in devising a content strategy was to develop various (proto) personas in joint workshops in Munich to analyse the primary and secondary target groups the website was to address. Meaningful navigation paths, key page contents and the chosen imagery were defined more precisely on this basic focus. The management of SEO-compliant content was done as a team using a structured content management plan developed closely between OBERMEYER and Marketing Factory. - generic [ref=e38]: - figure [ref=e40] - generic [ref=e41]: - paragraph [ref=e42]: - link "Website" [ref=e43] [cursor=pointer]: - /url: https://www.obermeyer-group.com/ - table [ref=e44]: - rowgroup [ref=e45]: - row "Client OBERMEYER Servbest GmbH" [ref=e46]: - rowheader "Client" [ref=e47] - cell "OBERMEYER Servbest GmbH" [ref=e48] - row "Project duration 2020–2021" [ref=e49]: - rowheader "Project duration" [ref=e50]: - paragraph [ref=e51]: Project duration - cell "2020–2021" [ref=e52] - generic [ref=e54]: - heading "Discover the project from the perspective of:" [level=2] [ref=e56] - generic [ref=e58]: - group "Change perspective" [ref=e62]: - generic [ref=e63]: Change perspective - radio "Marketing and sales" [checked] [ref=e64] - generic [ref=e65] [cursor=pointer]: Marketing and sales - radio "Development and technology" [ref=e66] - generic [ref=e67] [cursor=pointer]: Development and technology - generic [ref=e69]: - generic [ref=e70]: - generic: - heading [level=3] - generic [ref=e71]: - generic: - heading [level=3] - generic [ref=e72]: - generic: - heading [level=3] - generic [ref=e73]: - generic: - heading [level=3] - generic [ref=e74]: - generic: - heading [level=3] - heading "Custom Solutions" [level=2] [ref=e78] - generic [ref=e81]: - figure "Obermeyer Homepage" [ref=e85]: - 'link "Show larger version for: Obermeyer Homepage" [ref=e86] [cursor=pointer]': - /url: /fileadmin/_processed_/1/c/csm_Bildschirmfoto_2022-03-16_um_17.23.49_6d84ba97f2.png - generic [ref=e87]: "Show larger version for:" - img "Obermeyer Homepage" [ref=e89] - generic [ref=e90]: Obermeyer Homepage - generic [ref=e91]: - heading "Concept, design and navigation structure" [level=3] [ref=e93] - paragraph [ref=e94]: - text: The team intensively discussed customised elements as part of the detailed development of the content strategy. In this context, the client's wish for a stringent and structured content was crucial to convey a modern and orderly image. - text: This was achieved by a header element individually created for all regular content pages. The element incorporates the red square from the company's logo and translates it into an animated, visual content element when the page is accessed. The homepage was built based on this, with a full-screen image behind the navigation enhancing the usual header element. - generic [ref=e97]: - figure "Interactive world map for the international OBERMEYER subsidiaries" [ref=e101]: - 'link "Show larger version for: Interactive world map for the international OBERMEYER subsidiaries" [ref=e102] [cursor=pointer]': - /url: /fileadmin/_processed_/8/2/csm_Bildschirmfoto_2022-03-16_um_17.52.12_ec49561185.png - generic [ref=e103]: "Show larger version for:" - img "Interactive world map for the international OBERMEYER subsidiaries" [ref=e105] - generic [ref=e106]: Interactive world map for the international OBERMEYER subsidiaries - generic [ref=e107]: - heading "Interactive world map" [level=3] [ref=e109] - paragraph [ref=e110]: - text: "An interactive world map shows the worldwide subsidiaries of the OBERMEYER Group in an accessible and modern format:" - text: Key location information is only displayed in a layer once a person has clicked on the country, and is thus also easy to read and operate on mobile devices. - list [ref=e113]: - listitem [ref=e114]: "\"Hero Image\" photo: © OBERMEYER Servbest GmbH" - listitem [ref=e115]: "\"OBERMEYER Devices\" photo: © Karoline Steinfatt / Marketing Factory Consulting GmbH" - listitem [ref=e116]: "\"OBERMEYER Homepage\" photo: © Karoline Steinfatt / Marketing Factory Consulting GmbH" - listitem [ref=e117]: "\"Interactive world map\" photo: © Karoline Steinfatt / Marketing Factory Consulting GmbH" - list [ref=e122]: - listitem [ref=e123]: - link "#TYPO3" [ref=e124] [cursor=pointer]: - /url: https://www.marketing-factory.com/technology/typo3/ - img [ref=e126] - generic [ref=e128]: "#TYPO3" - listitem [ref=e129]: - link "#Solr" [ref=e130] [cursor=pointer]: - /url: https://www.marketing-factory.com/technology/tech-stack/search-technologies/#c34 - img [ref=e132] - generic [ref=e137]: "#Solr" - listitem [ref=e138]: - link "#Launch" [ref=e139] [cursor=pointer]: - /url: "http://{$blog.identifier.pages.tagList}" - img [ref=e141] - generic [ref=e143]: "#Launch" - listitem [ref=e144]: - link "#SEO" [ref=e145] [cursor=pointer]: - /url: https://www.marketing-factory.com/technology/tech-stack/search-technologies/#c35 - img [ref=e147] - generic [ref=e153]: "#SEO" - listitem [ref=e154]: - link "#Google Analytics" [ref=e155] [cursor=pointer]: - /url: "http://{$blog.identifier.pages.tagList}" - img [ref=e157] - generic [ref=e159]: "#Google Analytics" - contentinfo [ref=e160]: - generic [ref=e166]: - paragraph [ref=e167]: We’d be pleased to advise you! - generic [ref=e168]: - img "Ingo Schmitt" [ref=e170] - generic [ref=e171]: - paragraph [ref=e172]: - text: Ingo Schmitt - text: Managing Director - paragraph [ref=e173]: - link "+49 (0)211-361176-63" [ref=e174] [cursor=pointer]: - /url: tel:+4921136117663 - link "ingo.schmitt@marketing-factory.de" [ref=e175] [cursor=pointer]: - /url: mailto:ingo.schmitt@marketing-factory.de - generic [ref=e178]: - navigation [ref=e179]: - list [ref=e180]: - listitem [ref=e181]: - button "Cookie settings" [ref=e182] [cursor=pointer] - listitem [ref=e183]: - link "Data privacy policy" [ref=e184] [cursor=pointer]: - /url: https://www.marketing-factory.com/data-privacy-policy/ - listitem [ref=e185]: - link "Legal notice" [ref=e186] [cursor=pointer]: - /url: https://www.marketing-factory.com/legal-notice/ - generic [ref=e187]: - paragraph [ref=e188]: © Marketing Factory Digital GmbH - paragraph [ref=e189]: - text: Alternative text for images is partially - link "generated by AI" [ref=e190] [cursor=pointer]: - /url: https://www.marketing-factory.com/technology/typo3/our-typo3-extensions/ai-filemetadata/ - generic [ref=e193]: - strong [ref=e194]: Picture Credits - list [ref=e195]: - listitem [ref=e196]: "\"OBERMEYER Website Mockup\": © MFC / Marketing Factory Digital GmbH" - listitem [ref=e197]: "\"Quanzhou Trade Fair\": Creator OBERMEYER" - listitem [ref=e198]: "\"Screenshot OBERMEYER homepage\": © MFC / Marketing Factory Digital GmbH" - listitem [ref=e199]: "\"Screenshot interactive world map\": © MFC / Marketing Factory Digital GmbH" - listitem [ref=e200]: "\"Quanzhou Trade Fair\": Creator OBERMEYER" ``` # 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')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 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 | ```