# 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 >> comparison-modul - Location: visual/mfc-corporate-com.spec.ts:27: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/content-comparison-modul-com-desktop-darwin.png, writing actual. ``` ``` 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/content-comparison-modul-dark-com-desktop-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 "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/comparison-modul/ - text: De - listitem [ref=e56]: - link "English" [ref=e57] [cursor=pointer]: - /url: /content-elements/comparison-module/ - 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]: Comparison module - main [ref=e71]: - generic [ref=e73]: - heading "Discover the project from the perspective of:" [level=2] [ref=e75] - generic [ref=e77]: - group "Change perspective" [ref=e81]: - generic [ref=e82]: Change perspective - radio "Marketing and sales" [checked] [ref=e83] - generic [ref=e84] [cursor=pointer]: Marketing and sales - radio "Development and technology" [ref=e85] - generic [ref=e86] [cursor=pointer]: Development and technology - generic [ref=e88]: - generic [ref=e90]: - heading "CMS technologies" [level=3] [ref=e91] - paragraph [ref=e92]: A total of 6 websites are currently managed within a TYPO3 installation version 10. This includes 3 corporate sites as well as various websites for subsidiaries and projects. - paragraph [ref=e93]: The special feature or requirement of this project is that the client would like to maintain and manage both shared and separate content across all corporate websites. The benefit of TYPO3 is that centrally maintained content is also used for multiple websites, language-dependently for each site, thanks to its "Localisation" feature. This means, for example, that global news and press releases as well as events and download files are maintained, localised and then output on the German or English website in the appropriate language. - generic [ref=e95]: - heading "Search technologies" [level=3] [ref=e96] - paragraph [ref=e97]: The website's search function is based on the Apache Solr search service. News and press releases, events, product pages and download files are indexed and displayed on the search results page for users alongside the regular pages. - paragraph [ref=e98]: The site's global search interface also includes a suggest function and a grouping of results by category. - paragraph [ref=e99]: The Download Centre is also based on solrfal. These are separate assets that are provided with specific policies. - generic [ref=e101]: - heading "Backend and frontend technologies" [level=3] [ref=e102] - paragraph [ref=e103]: The Bootstrap package was integrated as well as the TYPO3 core, and includes an extensive set of design options and settings for the backend and frontend. Additional container elements were created to provide for multi-column layouts (grid layouts). - paragraph [ref=e104]: Numerous content elements are based on the Bootstrap package and have been adapted to pfm medical ag's corporate identity, including an accordion element, the tab element and a timeline. Any missing content elements or elements required for specific content were custom-developed and configured with a focus on content manager-friendly backend maintenance. - generic [ref=e106]: - heading "Hosting and monitoring" [level=3] [ref=e107] - paragraph [ref=e108]: We host the installation on virtualised hardware in Germany for safe and failure-free operation. The range of services offered includes operation on all levels as well as physical hardware. We understand the application and the system environment and can coordinate both to each other. Our portfolio of services also includes hardware maintenance and regular updates of all hardware components. Our monitoring tools provide a permanent overview of the installation and enable us to intervene immediately in the event of an emergency. - paragraph [ref=e109]: Incident reporting of bugs with Sentry provides a direct link to the ticket system, so that bug sources can be identified and processed quickly and automatically. - paragraph [ref=e110]: Due to direct collaboration and downstream daily business, the automatically created review environments enable the client to easily approve developments. - generic [ref=e112]: - heading "PIM Integration (Product section)" [level=3] [ref=e113] - paragraph [ref=e114]: An interface to the Viamedici EPIM system was developed for the website's product section. There is also an interface to the Canto digital asset management (DAM) system for the integration of any images. The organisational and technical collaboration with the service provider responsible for rolling out the PIM at pfm medical was fast and straightforward. Short and direct communication channels eliminated complexity and loss of information. - paragraph [ref=e115]: The upstream project for pfm medical's internal product catalogue significantly speeded up integration of the PIM, as the previous lead-in project had already delivered know-how about the structure, concept and handling. Experience with data sharing proved useful when connecting the EPIM to TYPO3, as our developers did not require a "basic" EPIM onboarding phase. - contentinfo [ref=e116]: - generic [ref=e119]: - navigation [ref=e120]: - list [ref=e121]: - listitem [ref=e122]: - button "Cookie settings" [ref=e123] [cursor=pointer] - listitem [ref=e124]: - link "Data privacy policy" [ref=e125] [cursor=pointer]: - /url: https://www.marketing-factory.com/data-privacy-policy/ - listitem [ref=e126]: - link "Legal notice" [ref=e127] [cursor=pointer]: - /url: https://www.marketing-factory.com/legal-notice/ - generic [ref=e128]: - paragraph [ref=e129]: © Marketing Factory Digital GmbH - paragraph [ref=e130]: - text: Alternative text for images is partially - link "generated by AI" [ref=e131] [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')); | ^ 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/content-comparison-modul-dark-com-desktop-darwin.png, writing actual. 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 | ```