# 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-de.spec.ts >> content >> text-icon - Location: visual/mfc-corporate-de.spec.ts:104:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed Expected an image 1032px by 3988px, received 1032px by 3987px. 16771 pixels (ratio 0.01 of all image pixels) are different. Snapshot: content-text-icon.png Call log: - Expect "toHaveScreenshot(content-text-icon.png)" with timeout 15000ms - verifying given screenshot expectation - taking page screenshot - disabled all CSS animations - waiting for fonts to load... - fonts loaded - Expected an image 1032px by 3988px, received 1032px by 3987px. 16771 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 - Expected an image 1032px by 3988px, received 1032px by 3987px. 16771 pixels (ratio 0.01 of all image pixels) are different. ``` # Page snapshot ```yaml - generic [ref=e2]: - link "Zum Inhalt springen" [ref=e3] [cursor=pointer]: - /url: "#page-content" - banner [ref=e4]: - generic [ref=e5]: - link "Zur Startseite": - /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 "Einblendmenü umschalten mit Leertaste" [ref=e32] [cursor=pointer]: - /url: /inhaltselemente/ - text: Inhaltselemente - listitem [ref=e33]: - link "Einblendmenü umschalten mit Leertaste" [ref=e34] [cursor=pointer]: - /url: /richtext-editor/ - text: RTE - listitem [ref=e35]: - link "Einblendmenü umschalten mit Leertaste" [ref=e36] [cursor=pointer]: - /url: /seitentypen/ - text: Seitentypen - listitem [ref=e37]: - link "Einblendmenü umschalten mit Leertaste" [ref=e38] [cursor=pointer]: - /url: /plugins/ - text: Plugins - listitem [ref=e39]: - link "Blog" [ref=e40] [cursor=pointer]: - /url: /blog/ - listitem [ref=e41]: - link "Einblendmenü umschalten mit Leertaste" [ref=e42] [cursor=pointer]: - /url: /formulare/ - text: Formulare - generic [ref=e44]: - button "Suche einblenden" [ref=e46] [cursor=pointer]: - img [ref=e48] - button "Farbschema wechseln" [ref=e50] [cursor=pointer]: - img [ref=e51] - list "Sprache der Website" [ref=e53]: - listitem [ref=e54]: - link "Deutsch" [ref=e55] [cursor=pointer]: - /url: /inhaltselemente/text-icon/ - text: De - listitem [ref=e56]: - generic "An english version of this page is not available." [ref=e57]: En - navigation "Brotkrumen-Navigation" [ref=e58]: - generic [ref=e59]: - paragraph [ref=e60]: "Sie sind here:" - list [ref=e61]: - listitem [ref=e62]: - link "Startseite" [ref=e63] [cursor=pointer]: - /url: / - img [ref=e64] - listitem [ref=e66]: - text: / - link "Inhaltselemente" [ref=e67] [cursor=pointer]: - /url: /inhaltselemente/ - generic [ref=e68]: Inhaltselemente - listitem [ref=e69]: - text: / - generic [ref=e70]: Text & Icon - main [ref=e71]: - generic [ref=e74]: - img [ref=e77] - generic [ref=e80]: - 'heading "Text & Icon: Position Left – Size: Default" [level=2] [ref=e82]' - paragraph [ref=e83]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - generic [ref=e86]: - img [ref=e89] - generic [ref=e92]: - 'heading "Text & Icon: Position Left – Size: Medium" [level=2] [ref=e94]' - 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. - generic [ref=e98]: - img [ref=e101] - generic [ref=e104]: - 'heading "Text & Icon: Position Left – Size: Large" [level=2] [ref=e106]' - paragraph [ref=e107]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - generic [ref=e110]: - img [ref=e113] - generic [ref=e116]: - 'heading "Text & Icon: Position Left – Size: Awesome" [level=2] [ref=e118]' - paragraph [ref=e119]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - generic [ref=e122]: - img [ref=e125] - generic [ref=e128]: - 'heading "Text & Icon: Position Right – Size: Default" [level=2] [ref=e130]' - paragraph [ref=e131]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - generic [ref=e134]: - img [ref=e137] - generic [ref=e140]: - 'heading "Text & Icon: Position Right – Size: Medium" [level=2] [ref=e142]' - paragraph [ref=e143]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - generic [ref=e146]: - img [ref=e149] - generic [ref=e152]: - 'heading "Text & Icon: Position Right – Size: Large" [level=2] [ref=e154]' - paragraph [ref=e155]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - generic [ref=e158]: - img [ref=e161] - generic [ref=e164]: - 'heading "Text & Icon: Position Right – Size: Awesome" [level=2] [ref=e166]' - paragraph [ref=e167]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - generic [ref=e170]: - img [ref=e173] - generic [ref=e176]: - 'heading "Text & Icon: Position Top – Size: Default" [level=2] [ref=e178]' - paragraph [ref=e179]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - generic [ref=e182]: - img [ref=e185] - generic [ref=e188]: - 'heading "Text & Icon: Position Top – Size: Medium" [level=2] [ref=e190]' - paragraph [ref=e191]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - generic [ref=e194]: - img [ref=e197] - generic [ref=e200]: - 'heading "Text & Icon: Position Top – Size: Large" [level=2] [ref=e202]' - paragraph [ref=e203]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - generic [ref=e206]: - img [ref=e209] - generic [ref=e212]: - 'heading "Text & Icon: Position Top – Size: Awesome" [level=2] [ref=e214]' - paragraph [ref=e215]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - generic [ref=e218]: - img [ref=e221] - generic [ref=e224]: - 'heading "Text & Icon: Fill color \"TYPO3 Orange\"" [level=2] [ref=e226]' - paragraph [ref=e227]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - generic [ref=e230]: - img [ref=e233] - generic [ref=e236]: - 'heading "Text & Icon: Custom fill colors" [level=2] [ref=e238]' - paragraph [ref=e239]: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - contentinfo [ref=e240]: - generic [ref=e243]: - navigation [ref=e244]: - list [ref=e245]: - listitem [ref=e246]: - button "Cookie-Einstellungen" [ref=e247] [cursor=pointer] - listitem [ref=e248]: - link "Datenschutzerklärung" [ref=e249] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e250]: - link "Impressum" [ref=e251] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e252]: - paragraph [ref=e253]: © Marketing Factory Digital GmbH - paragraph [ref=e254]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e255] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ - generic [ref=e258]: - strong [ref=e259]: Bildnachweise - list ``` # Test source ```ts 6 | 7 | test.describe('other', () => { 8 | test('styling', async ({ page }) => { 9 | await setup(page, '/design-basiseigenschaften/'); 10 | await page.waitForTimeout(2000); 11 | await expect(page).toHaveScreenshot(snap('other-styling')); 12 | await setDarkTheme(page); 13 | await expect(page).toHaveScreenshot(snap('other-styling-dark')); 14 | }); 15 | 16 | test('rte', async ({ page }) => { 17 | await setup(page, '/richtext-editor/'); 18 | await expect(page).toHaveScreenshot(snap('other-rte')); 19 | await setDarkTheme(page); 20 | await expect(page).toHaveScreenshot(snap('other-rte-dark')); 21 | }); 22 | 23 | test('rte-syntax-highlighting', async ({ page }) => { 24 | await setup(page, '/richtext-editor/syntax-highlighting/'); 25 | await expect(page).toHaveScreenshot(snap('other-rte-syntax-highlighting')); 26 | }); 27 | }); 28 | 29 | test.describe('content', () => { 30 | test('accordion', async ({ page }) => { 31 | await setup(page, '/inhaltselemente/accordion/'); 32 | await hideElements(page, PAGE_HEADER); 33 | await scrollToBottom(page); 34 | await expect(page).toHaveScreenshot(snap('content-accordion')); 35 | }); 36 | 37 | test('keyvisual', async ({ page }) => { 38 | await setup(page, '/inhaltselemente/keyvisual/'); 39 | await expect(page).toHaveScreenshot(snap('content-keyvisual')); 40 | await setDarkTheme(page); 41 | await expect(page).toHaveScreenshot(snap('content-keyvisual-dark')); 42 | }); 43 | 44 | test('hero-image', async ({ page }) => { 45 | await setup(page, '/inhaltselemente/hero-image/'); 46 | await expect(page).toHaveScreenshot(snap('content-hero-image')); 47 | }); 48 | 49 | test('slider-slide2grid', async ({ page }) => { 50 | await setup(page, '/inhaltselemente/slider-slide2grid/'); 51 | await expect(page).toHaveScreenshot(snap('content-slider-slide2grid')); 52 | await setDarkTheme(page); 53 | await expect(page).toHaveScreenshot(snap('content-slider-slide2grid-dark')); 54 | }); 55 | 56 | test('comparison-module', async ({ page }) => { 57 | await setup(page, '/inhaltselemente/comparison-modul/'); 58 | await page.locator('.o-radio-switch__label[for=switchLeft]').click(); 59 | await page.waitForTimeout(2000); 60 | await expect(page).toHaveScreenshot(snap('content-comparison-module-left')); 61 | await page.locator('.o-radio-switch__label[for=switchRight]').click(); 62 | await page.waitForTimeout(2000); 63 | await expect(page).toHaveScreenshot(snap('content-comparison-module-right')); 64 | await setDarkTheme(page); 65 | await expect(page).toHaveScreenshot(snap('content-comparison-module-dark')); 66 | }); 67 | 68 | test('text-full-height-image', async ({ page }) => { 69 | await setup(page, '/inhaltselemente/text-full-height-image/'); 70 | await hideElements(page, PAGE_HEADER); 71 | await scrollToBottom(page); 72 | await expect(page).toHaveScreenshot(snap('content-text-full-height-image')); 73 | }); 74 | 75 | test('timeline', async ({ page }) => { 76 | await setup(page, '/inhaltselemente/timeline/'); 77 | await hideElements(page, PAGE_HEADER); 78 | await scrollToBottom(page); 79 | await expect(page).toHaveScreenshot(snap('content-timeline')); 80 | }); 81 | 82 | test('divider', async ({ page }) => { 83 | await setup(page, '/inhaltselemente/divider/'); 84 | await expect(page).toHaveScreenshot(snap('content-divider')); 85 | }); 86 | 87 | test('container', async ({ page }) => { 88 | await setup(page, '/inhaltselemente/container/'); 89 | await hideElements(page, PAGE_HEADER); 90 | await scrollToBottom(page); 91 | await expect(page).toHaveScreenshot(snap('content-container')); 92 | }); 93 | 94 | test('card-group', async ({ page }) => { 95 | await setup(page, '/inhaltselemente/card-group/'); 96 | await expect(page).toHaveScreenshot(snap('content-card-group')); 97 | }); 98 | 99 | test('quote', async ({ page }) => { 100 | await setup(page, '/inhaltselemente/quote/'); 101 | await expect(page).toHaveScreenshot(snap('content-quote')); 102 | }); 103 | 104 | test('text-icon', async ({ page }) => { 105 | await setup(page, '/inhaltselemente/text-icon/'); > 106 | await expect(page).toHaveScreenshot(snap('content-text-icon')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 107 | await setDarkTheme(page); 108 | await expect(page).toHaveScreenshot(snap('content-text-icon-dark')); 109 | }); 110 | 111 | test('text-in-columns', async ({ page }) => { 112 | await setup(page, '/inhaltselemente/text-in-columns/'); 113 | await expect(page).toHaveScreenshot(snap('content-text-in-columns')); 114 | }); 115 | 116 | test('menu-sitemap', async ({ page }) => { 117 | await setup(page, '/inhaltselemente/menu-sitemap/'); 118 | await expect(page).toHaveScreenshot(snap('content-menu-sitemap')); 119 | }); 120 | 121 | test('menu-section', async ({ page }) => { 122 | await setup(page, '/inhaltselemente/menu-section/'); 123 | await expect(page).toHaveScreenshot(snap('content-menu-section')); 124 | }); 125 | 126 | test('menu-pages', async ({ page }) => { 127 | await setup(page, '/inhaltselemente/menu-pages/'); 128 | await expect(page).toHaveScreenshot(snap('content-menu-pages')); 129 | }); 130 | 131 | test('space-before-after', async ({ page }) => { 132 | await setup(page, '/inhaltselemente/space-before-after/'); 133 | await expect(page).toHaveScreenshot(snap('content-space-before-after')); 134 | }); 135 | }); 136 | 137 | test.describe('content › textmedia › pixel-images', () => { 138 | test('1-image-top-bottom-centered', async ({ page }) => { 139 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-oben-unten-zentriert/'); 140 | await hideElements(page, PAGE_HEADER); 141 | await scrollToBottom(page); 142 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-top-bottom-centered')); 143 | }); 144 | 145 | test('1-image-beside-text-centered', async ({ page }) => { 146 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text-zentriert/'); 147 | await hideElements(page, PAGE_HEADER); 148 | await scrollToBottom(page); 149 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text-centered')); 150 | }); 151 | 152 | test('1-image-beside-text', async ({ page }) => { 153 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text/'); 154 | await hideElements(page, PAGE_HEADER); 155 | await scrollToBottom(page); 156 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text')); 157 | }); 158 | 159 | test('2-images-top-bottom-centered', async ({ page }) => { 160 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/2-bilder-oben-unten-zentriert/'); 161 | await hideElements(page, PAGE_HEADER); 162 | await scrollToBottom(page); 163 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-2-images-top-bottom-centered')); 164 | }); 165 | 166 | test('2-images-beside-text-centered', async ({ page }) => { 167 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/2-bilder-neben-text-zentriert/'); 168 | await hideElements(page, PAGE_HEADER); 169 | await scrollToBottom(page); 170 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-2-images-beside-text-centered')); 171 | }); 172 | 173 | test('2-images-beside-text', async ({ page }) => { 174 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/2-bilder-neben-text/'); 175 | await hideElements(page, PAGE_HEADER); 176 | await scrollToBottom(page); 177 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-2-images-beside-text')); 178 | }); 179 | 180 | test('1-image-beside-text-centered-33-percent', async ({ page }) => { 181 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text-zentriert-33-bildbreite/'); 182 | await hideElements(page, PAGE_HEADER); 183 | await scrollToBottom(page); 184 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text-centered-33-percent')); 185 | }); 186 | 187 | test('1-image-beside-text-33-percent', async ({ page }) => { 188 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text-33-bildbreite/'); 189 | await hideElements(page, PAGE_HEADER); 190 | await scrollToBottom(page); 191 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text-33-percent')); 192 | }); 193 | }); 194 | 195 | test.describe('content › textmedia › svg-images', () => { 196 | test('1-image-top-bottom-centered', async ({ page }) => { 197 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-oben-unten-zentriert/'); 198 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-top-bottom-centered')); 199 | }); 200 | 201 | test('1-image-beside-text-centered', async ({ page }) => { 202 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text-zentriert/'); 203 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-centered')); 204 | }); 205 | 206 | test('1-image-beside-text', async ({ page }) => { ```