# 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-list - Location: visual/mfc-corporate-com.spec.ts:53:9 # Error details ``` Error: A snapshot doesn't exist at /Users/mfdrunner/builds/pDk_92X_S/0/mfc/corporate/typo3/playwright/visual/mfc-corporate-com.spec.ts-snapshots/plugin-project-list-com-tablet-p-darwin.png, writing actual. ``` # 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 "Plugins" [ref=e38] [cursor=pointer]: - /url: /plugins/ - generic [ref=e39]: Plugins - listitem [ref=e40]: - text: / - generic [ref=e41]: Project list - main [ref=e42]: - generic [ref=e45]: - button "Show filters" [ref=e48] [cursor=pointer] - generic [ref=e51]: - generic [ref=e53]: - img "Integration der englischen Sprachversion mit dem L10N Manager (SG)" [ref=e55] - generic [ref=e56]: - paragraph [ref=e57]: OBERMEYER (SG) - paragraph [ref=e58]: - link "Integration der englischen Sprachversion mit dem L10N Manager (SG)" [ref=e59] [cursor=pointer]: - /url: /seitentypen/kunden-listenansicht/obermeyer-sg/integration-der-englischen-sprachversion-mit-dem-l10n-manager-sg/ - paragraph [ref=e61]: Nach dem erfolgreichen Relaunch der übergreifenden Corporate Website der OBERMEYER Group im Sommer 2021 stand die Integration der internationalen, englischen Sprachversion im Vordergrund. - generic [ref=e62]: Project details - generic [ref=e64]: - img "Launch der Website und Kampagne von Patient Awareness (SG)" [ref=e66] - generic [ref=e67]: - paragraph [ref=e68]: pfm medical (SG) - paragraph [ref=e69]: Launch der Website und Kampagne von Patient Awareness (SG) - paragraph [ref=e71]: Das Projekt Patient Awareness umfasst eine unabhängige Website mit eigenem Look&Feel. Thema der Website ist eine Aufklärungskampagne zur Brustkrebsvorsorge und -behandlung. Die Kampagne konzentriert sich zunächst auf die geographischen Räume Lateinamerika und Asien. - generic [ref=e72]: Project details - generic [ref=e74]: - img "Launch of the OBERMEYER Group's new corporate website (SG)" [ref=e76] - generic [ref=e77]: - paragraph [ref=e78]: OBERMEYER (SG) - paragraph [ref=e79]: - link "Launch of the OBERMEYER Group's new corporate website (SG)" [ref=e80] [cursor=pointer]: - /url: /page-types/customers-list-view/obermeyer-sg/launch-of-the-obermeyer-groups-new-corporate-website-sg/ - paragraph [ref=e82]: The aim of the "One Obermeyer Launch" project was to digitalise the OBERMEYER Group and develop a comprehensive corporate website with a brand new design for all business areas. - generic [ref=e83]: Project details - generic [ref=e85]: - img "Website Facelift (SG)" [ref=e87] - generic [ref=e88]: - paragraph [ref=e89]: KALDEWEI (SG) - paragraph [ref=e90]: - link "Website Facelift (SG)" [ref=e91] [cursor=pointer]: - /url: /page-types/customers-list-view/kaldewei-sg/website-facelift-sg/ - paragraph [ref=e93]: In 2020, KALDEWEI's brand communication underwent a few changes, which naturally also had an impact on the corporate website that we have been maintaining and developing since 2014. The aim was to adapt the website to the updated corporate design. At the same time, the navigation system was to be made more intuitive and information was to be made available more quickly in the appropriate context. - generic [ref=e94]: Project details - generic [ref=e96]: - img "Upgrading the Corporate Websites & PIM Integration (SG)" [ref=e98] - generic [ref=e99]: - paragraph [ref=e100]: pfm medical (SG) - paragraph [ref=e101]: - link "Upgrading the Corporate Websites & PIM Integration (SG)" [ref=e102] [cursor=pointer]: - /url: /page-types/customers-list-view/pfm-medical-sg/upgrading-the-corporate-websites-pim-integration-sg/ - paragraph [ref=e104]: The current TYPO3 installation underwent a technical upgrade to version 10 in 2020. In this context, the project was used to simultaneously integrate the pfm medical product catalogue via a PIM interface. - generic [ref=e105]: Project details - generic [ref=e107]: - img "Integration of SAP Customer Data Cloud in Hoermann dealer forums (SG)" [ref=e109] - generic [ref=e110]: - paragraph [ref=e111]: Hörmann (SG) - paragraph [ref=e112]: - link "Integration of SAP Customer Data Cloud in Hoermann dealer forums (SG)" [ref=e113] [cursor=pointer]: - /url: /page-types/customers-list-view/hoermann-sg/integration-of-sap-customer-data-cloud-in-hoermann-dealer-forums-sg/ - paragraph [ref=e115]: Marketing Factory has been creating and supervising the Hörmann dealer forums (extranets) since 2002. Starting in 2020, Marketing Factory will gradually switch the registration process for the dealer forums to the "SAP Customer Data Cloud". - generic [ref=e116]: Project details - generic [ref=e118]: - img "Linking Hybris PIM to TYPO3 CMS (SG)" [ref=e120] - generic [ref=e121]: - paragraph [ref=e122]: KALDEWEI (SG) - paragraph [ref=e123]: - link "Linking Hybris PIM to TYPO3 CMS (SG)" [ref=e124] [cursor=pointer]: - /url: /page-types/customers-list-view/kaldewei-sg/linking-hybris-pim-to-typo3-cms-sg/ - paragraph [ref=e126]: We were commissioned to link the TYPO3 CMS to a Hybris PIM, which has informational control over the worldwide product range as a single source of truth (SSOT), in order to make editorial work more efficient. The objective was to achieve standardised product data across all channels, a reduced maintenance workload with low error rates in the CMS, fast updates in all languages, and a consistent presentation of the product range. - generic [ref=e127]: Project details - generic [ref=e129]: - img "Website relaunch (SG)" [ref=e131] - generic [ref=e132]: - paragraph [ref=e133]: KALDEWEI (SG) - paragraph [ref=e134]: - link "Website relaunch (SG)" [ref=e135] [cursor=pointer]: - /url: /page-types/customers-list-view/kaldewei-sg/website-relaunch-sg/ - paragraph [ref=e137]: In 2016, Marketing Factory was commissioned to relaunch the international corporate website of KALDEWEI. Firstly, the aim was to ensure that the application was based on a modern technical foundation so it can evolve in a future-proof and secure manner. Secondly, the user guidance was to be optimised and a new brand design implemented. New content features were also developed to offer customers additional consulting services online. - generic [ref=e138]: Project details - generic [ref=e140]: - generic [ref=e141]: - paragraph [ref=e142]: KALDEWEI (SG) - paragraph [ref=e143]: - link "Microsite Neuheiten 2015 (SG)" [ref=e144] [cursor=pointer]: - /url: /seitentypen/kunden-listenansicht/kaldewei-sg/microsite-neuheiten-2015-sg/ - generic [ref=e145]: Project details - generic [ref=e147]: - img "Operation and further development of the Hörmann Dealers' Forums (SG)" [ref=e149] - generic [ref=e150]: - paragraph [ref=e151]: Hörmann (SG) - paragraph [ref=e152]: - link "Operation and further development of the Hörmann Dealers' Forums (SG)" [ref=e153] [cursor=pointer]: - /url: /page-types/customers-list-view/hoermann-sg/operation-and-further-development-of-the-hoermann-dealers-forums-sg/ - paragraph [ref=e155]: Marketing Factory has been continuously supporting and developing the Hörmann Dealers' Forums – closed extranets for Hörmann dealers and tradespeople – since 2002. - generic [ref=e156]: Project details - contentinfo [ref=e157]: - generic [ref=e160]: - navigation [ref=e161]: - list [ref=e162]: - listitem [ref=e163]: - button "Cookie settings" [ref=e164] [cursor=pointer] - listitem [ref=e165]: - link "Data privacy policy" [ref=e166] [cursor=pointer]: - /url: https://www.marketing-factory.com/data-privacy-policy/ - listitem [ref=e167]: - link "Legal notice" [ref=e168] [cursor=pointer]: - /url: https://www.marketing-factory.com/legal-notice/ - generic [ref=e169]: - paragraph [ref=e170]: © Marketing Factory Digital GmbH - paragraph [ref=e171]: - text: Alternative text for images is partially - link "generated by AI" [ref=e172] [cursor=pointer]: - /url: https://www.marketing-factory.com/technology/typo3/our-typo3-extensions/ai-filemetadata/ ``` # 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')); | ^ Error: A snapshot doesn't exist at /Users/mfdrunner/builds/pDk_92X_S/0/mfc/corporate/typo3/playwright/visual/mfc-corporate-com.spec.ts-snapshots/plugin-project-list-com-tablet-p-darwin.png, writing actual. 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 | ```