# 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 >> blog >> post-localized-featured-image - Location: visual/mfc-corporate-com.spec.ts:87: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/blog-post-localized-featured-image-com-tablet-l-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/blog/uebersetztes-featured-image/ - text: De - listitem [ref=e56]: - link "English" [ref=e57] [cursor=pointer]: - /url: /blog/localized-featured-image/ - 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 "Blog" [ref=e67] [cursor=pointer]: - /url: /blog/ - generic [ref=e68]: Blog - listitem [ref=e69]: - text: / - generic [ref=e70]: Localized Featured Image - main [ref=e71]: - article [ref=e72]: - generic [ref=e74]: - generic [ref=e75]: - generic [ref=e76]: - figure [ref=e77] - list [ref=e82]: - listitem [ref=e83]: - link "Chocolate" [ref=e84] [cursor=pointer]: - /url: /blog/categories/chocolate/ - time [ref=e88]: 24.07.2023 - heading "Localized Featured Image" [level=1] [ref=e89] - separator [ref=e90] - generic [ref=e93]: - paragraph [ref=e94]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. - paragraph [ref=e95]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. - complementary [ref=e96]: - generic [ref=e98]: - generic [ref=e99]: - img [ref=e100] - generic [ref=e102]: Michael Mustermann - paragraph [ref=e103]: - link "More posts by this author" [ref=e104] [cursor=pointer]: - /url: /blog/authors/michael-mustermann/ - list [ref=e106]: - listitem [ref=e107]: - link "The author's website" [ref=e108] [cursor=pointer]: - /url: https://www.example.org - img [ref=e109] - listitem [ref=e111]: - link "The author on Twitter" [ref=e112] [cursor=pointer]: - /url: https://twitter.com/mustermann12 - img [ref=e113] - link "Get blog posts as RSS feed" [ref=e115] [cursor=pointer]: - /url: /blog/blog.recent.xml - img [ref=e116] - text: Get blog posts as RSS feed - paragraph [ref=e118]: All parts of this blog series - list [ref=e119]: - listitem [ref=e120]: - link "With comments" [ref=e121] [cursor=pointer]: - /url: /blog/with-comments/ - listitem [ref=e122]: - link "Localized Featured Image" [ref=e123] [cursor=pointer]: - /url: /blog/localized-featured-image/ - generic [ref=e124]: - paragraph [ref=e125]: Please feel free to share this article. - list [ref=e126]: - listitem [ref=e127]: - button "share" [ref=e128] [cursor=pointer]: - img [ref=e129] - generic [ref=e131]: share - listitem [ref=e132]: - button "share" [ref=e133] [cursor=pointer]: - img [ref=e134] - generic [ref=e136]: share - listitem [ref=e137]: - button "share" [ref=e138] [cursor=pointer]: - img [ref=e139] - generic [ref=e141]: share - generic [ref=e143]: - separator [ref=e144] - paragraph [ref=e145]: Comments - paragraph [ref=e146]: No comments yet. - contentinfo [ref=e147]: - generic [ref=e151]: - paragraph [ref=e153]: Write a comment. - generic [ref=e155]: - generic [ref=e156]: - generic [ref=e157]: Name * - textbox "Name *" [ref=e158] - generic [ref=e159]: - generic [ref=e160]: E-mail * - textbox "E-mail *" [ref=e161] - generic [ref=e162]: - generic [ref=e163]: Comment * - textbox "Comment *" [ref=e164] - generic [ref=e165]: - generic [ref=e166]: - checkbox "I have read the data privacy statement and consent to my personal data being processed according to this statement. *" [ref=e167] - generic [ref=e168]: - text: I have read the - link "data privacy statement" [ref=e169] [cursor=pointer]: - /url: https://www.marketing-factory.com/data-privacy-policy/ - text: and consent to my personal data being processed according to this statement. * - generic [ref=e170]: - paragraph [ref=e171]: I have been informed that the processing of my data is on a voluntary basis and that I can refuse my consent without detrimental consequences for me or withdraw my consent at any time to Marketing Factory Digital GmbH by mail (Erkrather Straße 401, D-40231 Düsseldorf) or e-mail (info@marketing-factory.de). - paragraph [ref=e172]: I understand that the above data will be stored for as long as I wish to be contacted by Marketing Factory. After my revocation my data will be deleted. Further storage may take place in individual cases if this is required by law. - navigation [ref=e173]: - button "Submit" [ref=e174] [cursor=pointer] - generic [ref=e176]: - navigation [ref=e177]: - list [ref=e178]: - listitem [ref=e179]: - button "Cookie settings" [ref=e180] [cursor=pointer] - listitem [ref=e181]: - link "Data privacy policy" [ref=e182] [cursor=pointer]: - /url: https://www.marketing-factory.com/data-privacy-policy/ - listitem [ref=e183]: - link "Legal notice" [ref=e184] [cursor=pointer]: - /url: https://www.marketing-factory.com/legal-notice/ - generic [ref=e185]: - paragraph [ref=e186]: © Marketing Factory Digital GmbH - paragraph [ref=e187]: - text: Alternative text for images is partially - link "generated by AI" [ref=e188] [cursor=pointer]: - /url: https://www.marketing-factory.com/technology/typo3/our-typo3-extensions/ai-filemetadata/ - generic [ref=e191]: - strong [ref=e192]: 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')); 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')); | ^ 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/blog-post-localized-featured-image-com-tablet-l-darwin.png, writing actual. 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 | ```