# 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 › textmedia › pixel-images >> 1-image-beside-text - Location: visual/mfc-corporate-de.spec.ts:142:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed Expected an image 1288px by 1592px, received 1280px by 900px. 455743 pixels (ratio 0.23 of all image pixels) are different. Snapshot: content-textmedia-pixel-1-image-beside-text.png Call log: - Expect "toHaveScreenshot(content-textmedia-pixel-1-image-beside-text.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 1288px by 1592px, received 1280px by 900px. 455743 pixels (ratio 0.23 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 1288px by 1592px, received 1280px by 900px. 455743 pixels (ratio 0.23 of all image pixels) are different. ``` # Test source ```ts 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 expect(page).toHaveScreenshot(snap('content-text-full-height-image')); 71 | }); 72 | 73 | test('timeline', async ({ page }) => { 74 | await setup(page, '/inhaltselemente/timeline/'); 75 | await expect(page).toHaveScreenshot(snap('content-timeline')); 76 | }); 77 | 78 | test('divider', async ({ page }) => { 79 | await setup(page, '/inhaltselemente/divider/'); 80 | await expect(page).toHaveScreenshot(snap('content-divider')); 81 | }); 82 | 83 | test('container', async ({ page }) => { 84 | await setup(page, '/inhaltselemente/container/'); 85 | await expect(page).toHaveScreenshot(snap('content-container')); 86 | }); 87 | 88 | test('card-group', async ({ page }) => { 89 | await setup(page, '/inhaltselemente/card-group/'); 90 | await expect(page).toHaveScreenshot(snap('content-card-group')); 91 | }); 92 | 93 | test('quote', async ({ page }) => { 94 | await setup(page, '/inhaltselemente/quote/'); 95 | await expect(page).toHaveScreenshot(snap('content-quote')); 96 | }); 97 | 98 | test('text-icon', async ({ page }) => { 99 | await setup(page, '/inhaltselemente/text-icon/'); 100 | await expect(page).toHaveScreenshot(snap('content-text-icon')); 101 | await setDarkTheme(page); 102 | await expect(page).toHaveScreenshot(snap('content-text-icon-dark')); 103 | }); 104 | 105 | test('text-in-columns', async ({ page }) => { 106 | await setup(page, '/inhaltselemente/text-in-columns/'); 107 | await expect(page).toHaveScreenshot(snap('content-text-in-columns')); 108 | }); 109 | 110 | test('menu-sitemap', async ({ page }) => { 111 | await setup(page, '/inhaltselemente/menu-sitemap/'); 112 | await expect(page).toHaveScreenshot(snap('content-menu-sitemap')); 113 | }); 114 | 115 | test('menu-section', async ({ page }) => { 116 | await setup(page, '/inhaltselemente/menu-section/'); 117 | await expect(page).toHaveScreenshot(snap('content-menu-section')); 118 | }); 119 | 120 | test('menu-pages', async ({ page }) => { 121 | await setup(page, '/inhaltselemente/menu-pages/'); 122 | await expect(page).toHaveScreenshot(snap('content-menu-pages')); 123 | }); 124 | 125 | test('space-before-after', async ({ page }) => { 126 | await setup(page, '/inhaltselemente/space-before-after/'); 127 | await expect(page).toHaveScreenshot(snap('content-space-before-after')); 128 | }); 129 | }); 130 | 131 | test.describe('content › textmedia › pixel-images', () => { 132 | test('1-image-top-bottom-centered', async ({ page }) => { 133 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-oben-unten-zentriert/'); 134 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-top-bottom-centered')); 135 | }); 136 | 137 | test('1-image-beside-text-centered', async ({ page }) => { 138 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text-zentriert/'); 139 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text-centered')); 140 | }); 141 | 142 | test('1-image-beside-text', async ({ page }) => { 143 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text/'); > 144 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 145 | }); 146 | 147 | test('2-images-top-bottom-centered', async ({ page }) => { 148 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/2-bilder-oben-unten-zentriert/'); 149 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-2-images-top-bottom-centered')); 150 | }); 151 | 152 | test('2-images-beside-text-centered', async ({ page }) => { 153 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/2-bilder-neben-text-zentriert/'); 154 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-2-images-beside-text-centered')); 155 | }); 156 | 157 | test('2-images-beside-text', async ({ page }) => { 158 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/2-bilder-neben-text/'); 159 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-2-images-beside-text')); 160 | }); 161 | 162 | test('1-image-beside-text-centered-33-percent', async ({ page }) => { 163 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text-zentriert-33-bildbreite/'); 164 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text-centered-33-percent')); 165 | }); 166 | 167 | test('1-image-beside-text-33-percent', async ({ page }) => { 168 | await setup(page, '/inhaltselemente/textmedia/pixel-bilder/1-bild-neben-text-33-bildbreite/'); 169 | await expect(page).toHaveScreenshot(snap('content-textmedia-pixel-1-image-beside-text-33-percent')); 170 | }); 171 | }); 172 | 173 | test.describe('content › textmedia › svg-images', () => { 174 | test('1-image-top-bottom-centered', async ({ page }) => { 175 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-oben-unten-zentriert/'); 176 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-top-bottom-centered')); 177 | }); 178 | 179 | test('1-image-beside-text-centered', async ({ page }) => { 180 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text-zentriert/'); 181 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-centered')); 182 | }); 183 | 184 | test('1-image-beside-text', async ({ page }) => { 185 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text/'); 186 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text')); 187 | await setDarkTheme(page); 188 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-dark')); 189 | }); 190 | 191 | test('2-images-top-bottom-centered', async ({ page }) => { 192 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/2-bilder-oben-unten-zentriert/'); 193 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-2-images-top-bottom-centered')); 194 | }); 195 | 196 | test('2-images-beside-text-centered', async ({ page }) => { 197 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/2-bilder-neben-text-zentriert/'); 198 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-2-images-beside-text-centered')); 199 | }); 200 | 201 | test('2-images-beside-text', async ({ page }) => { 202 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/2-bilder-neben-text/'); 203 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-2-images-beside-text')); 204 | }); 205 | 206 | test('1-image-beside-text-centered-33-percent', async ({ page }) => { 207 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text-zentriert-33-bildbreite/'); 208 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-centered-33-percent')); 209 | }); 210 | 211 | test('1-image-beside-text-33-percent', async ({ page }) => { 212 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text-33-bildbreite/'); 213 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-33-percent')); 214 | }); 215 | }); 216 | 217 | test.describe('page-types', () => { 218 | test('client-list', async ({ page }) => { 219 | await setup(page, '/seitentypen/kunden-listenansicht/'); 220 | await expect(page).toHaveScreenshot(snap('page-type-client-list')); 221 | }); 222 | 223 | test('client-pfm', async ({ page }) => { 224 | await setup(page, '/seitentypen/kunden-listenansicht/pfm-medical-sg/'); 225 | await expect(page).toHaveScreenshot(snap('page-type-client-pfm')); 226 | }); 227 | }); 228 | 229 | test.describe('plugins', () => { 230 | test('project-list', async ({ page }) => { 231 | await setup(page, '/plugins/projekt-liste/'); 232 | await expect(page).toHaveScreenshot(snap('plugin-project-list')); 233 | }); 234 | 235 | test('project-obermeyer-corporate', async ({ page }) => { 236 | await setup(page, '/seitentypen/kunden-listenansicht/obermeyer-sg/launch-der-neuen-corporate-site-der-unternehmensgruppe-obermeyer-sg/'); 237 | await expect(page).toHaveScreenshot(snap('plugin-project-obermeyer-corporate')); 238 | }); 239 | 240 | test('picturecredits', async ({ page }) => { 241 | await setup(page, '/plugins/picturecredits/'); 242 | await expect(page).toHaveScreenshot(snap('plugin-picturecredits')); 243 | }); 244 | }); ```