# 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 >> blog >> overview - Location: visual/mfc-corporate-de.spec.ts:247:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed Expected an image 1032px by 3305px, received 1032px by 3177px. Snapshot: blog-overview.png Call log: - Expect "toHaveScreenshot(blog-overview.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 3305px, received 1032px by 3177px. - 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 3305px, received 1032px by 3177px. ``` # 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 (aktuell)" [ref=e40] [cursor=pointer]: - /url: /blog/ - text: Blog - generic [ref=e41]: (aktuell) - listitem [ref=e42]: - link "Einblendmenü umschalten mit Leertaste" [ref=e43] [cursor=pointer]: - /url: /formulare/ - text: Formulare - generic [ref=e45]: - button "Suche einblenden" [ref=e47] [cursor=pointer] - button "Farbschema wechseln" [ref=e51] [cursor=pointer] - list "Sprache der Website" [ref=e54]: - listitem [ref=e55]: - link "Deutsch" [ref=e56] [cursor=pointer]: - /url: /blog/ - text: De - listitem [ref=e57]: - link "English" [ref=e58] [cursor=pointer]: - /url: https://www.marketing-factory.com.styleguide.renovate-develop-frontend-runtime-dependencies.review.mfc.gmbh/blog/ - text: En - navigation "Brotkrumen-Navigation" [ref=e59]: - generic [ref=e60]: - paragraph [ref=e61]: "Sie sind here:" - list [ref=e62]: - listitem [ref=e63]: - link "Startseite" [ref=e64] [cursor=pointer]: - /url: / - listitem [ref=e67]: - text: / - generic [ref=e68]: Blog - main [ref=e69]: - generic [ref=e70]: - generic [ref=e71]: Suche nach Blogbeiträgen - textbox "Suchbegriff" [ref=e72]: - /placeholder: Blogbeiträge durchsuchen - button "Suchergebnisse anzeigen" [ref=e73] [cursor=pointer] - generic [ref=e77]: - generic [ref=e80]: - link "Blog als RSS-Feed abonnieren" [ref=e81] [cursor=pointer]: - /url: /blog/blog.recent.xml - button "Kategorien" [ref=e85] [cursor=pointer] - button "Blogreihen" [ref=e89] [cursor=pointer] - button "Autoren" [ref=e93] [cursor=pointer] - generic [ref=e98]: - generic [ref=e99]: - article [ref=e101]: - figure [ref=e103] - generic [ref=e104]: - paragraph [ref=e105]: - link "Übersetztes Featured Image" [ref=e106] [cursor=pointer]: - /url: /blog/uebersetztes-featured-image/ - paragraph [ref=e107]: Das Featured Image unterscheidet sich in deutschem und englischem Beitrag (Listen- und Detailansicht). - text: Beitrag lesen - generic [ref=e108]: - time [ref=e109]: 24.07.2023 - generic [ref=e110]: Michael Mustermann - article [ref=e115]: - figure [ref=e117] - generic [ref=e118]: - paragraph [ref=e119]: - link "Mit Menü-Elementen" [ref=e120] [cursor=pointer]: - /url: /blog/mit-menue-elementen/ - paragraph [ref=e121]: Manuell gesetzte Verlinkungen auf thematisch passende Blogbeiträge und Themen-Seiten. - text: Beitrag lesen - generic [ref=e122]: - time [ref=e123]: 16.06.2023 - generic [ref=e124]: Michael Mustermann - article [ref=e129]: - figure [ref=e131] - generic [ref=e132]: - paragraph [ref=e133]: - link "Dritter Teil einer Serie" [ref=e134] [cursor=pointer]: - /url: /blog/dritter-teil-einer-serie/ - paragraph [ref=e135]: Hier wird automatisch das Menü der Blogreihe in der rechten Spalte ausgegeben. - text: Beitrag lesen - generic [ref=e136]: - time [ref=e137]: 16.06.2023 - generic [ref=e138]: - generic [ref=e139]: Max Powers - img "Max Powers" [ref=e140] - article [ref=e142]: - figure [ref=e144] - generic [ref=e145]: - paragraph [ref=e146]: - link "Zweiter Teil einer Serie" [ref=e147] [cursor=pointer]: - /url: /blog/zweiter-teil-einer-serie/ - paragraph [ref=e148]: SEO-Beschreibung und Teaser-Text fehlen, daher wird der vorhandene Blogtext in der Card gerendert. Lorem ipsum dolor... - text: Beitrag lesen - generic [ref=e149]: - time [ref=e150]: 18.04.2023 - generic [ref=e151]: - generic [ref=e152]: Max Powers - img "Max Powers" [ref=e153] - article [ref=e155]: - figure [ref=e157] - generic [ref=e158]: - paragraph [ref=e159]: - link "Erster Teil einer Serie" [ref=e160] [cursor=pointer]: - /url: /blog/erster-teil-einer-serie/ - paragraph [ref=e161]: Hier wird automatisch das Menü der Blogreihe in der rechten Spalte ausgegeben. - text: Beitrag lesen - generic [ref=e162]: - time [ref=e163]: 15.02.2023 - generic [ref=e164]: - generic [ref=e165]: Max Powers - img "Max Powers" [ref=e166] - article [ref=e168]: - generic [ref=e173]: - paragraph [ref=e174]: - link "Ohne Beitragsbild" [ref=e175] [cursor=pointer]: - /url: /blog/ohne-beitragsbild/ - paragraph [ref=e176]: Ein Font-Awesome-Icon mit Hintergrundverlauf wird als Fallback verwendet. - text: Beitrag lesen - generic [ref=e177]: - time [ref=e178]: 06.12.2022 - generic [ref=e179]: Michael Mustermann - article [ref=e184]: - figure [ref=e186] - generic [ref=e187]: - paragraph [ref=e188]: - link "Mit Kommentaren" [ref=e189] [cursor=pointer]: - /url: /blog/mit-kommentaren/ - paragraph [ref=e190]: Blog-Kommentare, auch verschachtelt. Keine Unterscheidung nach Frontend-Sprache! - text: Beitrag lesen - generic [ref=e191]: - time [ref=e192]: 15.06.2022 - generic [ref=e193]: - generic [ref=e194]: John Doe - img "John Doe" [ref=e195] - article [ref=e197]: - figure [ref=e199] - generic [ref=e200]: - paragraph [ref=e201]: - link "Drei Autoren, einer inaktiv" [ref=e202] [cursor=pointer]: - /url: /blog/drei-autoren-einer-inaktiv/ - paragraph [ref=e203]: Der inaktive (ehemalige) Autor wird am Ende der Autorenbox einsortiert und ist kein Accordion-Element. - text: Beitrag lesen - generic [ref=e204]: - time [ref=e205]: 09.03.2022 - list [ref=e206]: - listitem [ref=e207]: - generic [ref=e208]: Michael Mustermann - listitem [ref=e212]: - generic [ref=e213]: - generic [ref=e214]: Ehemaliger Kollege - img "Ehemaliger Kollege" [ref=e215] - listitem [ref=e216]: - generic [ref=e217]: - generic [ref=e218]: Max Powers - img "Max Powers" [ref=e219] - navigation "Seitennavigation" [ref=e220]: - list [ref=e221]: - listitem [ref=e222]: - link "Zur Seite 1" [ref=e223] [cursor=pointer]: - /url: /blog/ - text: "1" - contentinfo [ref=e224]: - generic [ref=e226]: - navigation [ref=e227]: - list [ref=e228]: - listitem [ref=e229]: - button "Cookie-Einstellungen" [ref=e230] [cursor=pointer] - listitem [ref=e231]: - link "Datenschutzerklärung" [ref=e232] [cursor=pointer]: - /url: https://www.marketing-factory.de.renovate-develop-frontend-runtime-dependencies.review.mfc.gmbh/datenschutzerklaerung/ - listitem [ref=e233]: - link "Impressum" [ref=e234] [cursor=pointer]: - /url: https://www.marketing-factory.de.renovate-develop-frontend-runtime-dependencies.review.mfc.gmbh/impressum/ - generic [ref=e235]: - paragraph [ref=e236]: © Marketing Factory Digital GmbH - paragraph [ref=e237]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e238] [cursor=pointer]: - /url: https://www.marketing-factory.de.renovate-develop-frontend-runtime-dependencies.review.mfc.gmbh/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ ``` # Test source ```ts 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 | }); 245 | 246 | test.describe('blog', () => { 247 | test('overview', async ({ page }) => { 248 | await setup(page, '/blog/'); > 249 | await expect(page).toHaveScreenshot(snap('blog-overview')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 250 | await setDarkTheme(page); 251 | await expect(page).toHaveScreenshot(snap('blog-overview-dark')); 252 | }); 253 | 254 | test('list-authors', async ({ page }) => { 255 | await setup(page, '/blog/autoren/'); 256 | await expect(page).toHaveScreenshot(snap('blog-list-authors')); 257 | }); 258 | 259 | test('author', async ({ page }) => { 260 | await setup(page, '/blog/autoren/max-powers/'); 261 | await expect(page).toHaveScreenshot(snap('blog-author')); 262 | }); 263 | 264 | test('list-categories', async ({ page }) => { 265 | await setup(page, '/blog/kategorien/'); 266 | await expect(page).toHaveScreenshot(snap('blog-list-categories')); 267 | }); 268 | 269 | test('category', async ({ page }) => { 270 | await setup(page, '/blog/kategorien/schokolade/'); 271 | 272 | 273 | await expect(page).toHaveScreenshot(snap('blog-category')); 274 | }); 275 | 276 | test('list-blogseries', async ({ page }) => { 277 | await setup(page, '/blog/blogreihen/'); 278 | await expect(page).toHaveScreenshot(snap('blog-list-blogseries')); 279 | }); 280 | 281 | test('blogseries', async ({ page }) => { 282 | await setup(page, '/blog/blogreihen/styleguide-highlights/'); 283 | await expect(page).toHaveScreenshot(snap('blog-blogseries')); 284 | }); 285 | 286 | test('post-menu-elements', async ({ page }) => { 287 | await setup(page, '/blog/mit-menue-elementen/'); 288 | await expect(page).toHaveScreenshot(snap('blog-post-menu-elements')); 289 | }); 290 | 291 | test('post-blogseries', async ({ page }) => { 292 | await setup(page, '/blog/erster-teil-einer-serie/'); 293 | await expect(page).toHaveScreenshot(snap('blog-post-blogseries')); 294 | }); 295 | 296 | test('post-no-featured-image', async ({ page }) => { 297 | await setup(page, '/blog/ohne-beitragsbild/'); 298 | await expect(page).toHaveScreenshot(snap('blog-post-no-featured-image')); 299 | }); 300 | 301 | test('post-with-comments', async ({ page }) => { 302 | await setup(page, '/blog/mit-kommentaren/'); 303 | await expect(page).toHaveScreenshot(snap('blog-post-with-comments')); 304 | }); 305 | 306 | test('post-inactive-author', async ({ page }) => { 307 | await setup(page, '/blog/drei-autoren-einer-inaktiv/'); 308 | await expect(page).toHaveScreenshot(snap('blog-post-inactive-author')); 309 | }); 310 | 311 | test('post-localized-featured-image', async ({ page }) => { 312 | await setup(page, '/blog/uebersetztes-featured-image/'); 313 | await expect(page).toHaveScreenshot(snap('blog-post-localized-featured-image')); 314 | }); 315 | }); 316 | 317 | test.describe('forms', () => { 318 | test('contact', async ({ page }) => { 319 | await setup(page, '/formulare/kontaktformular/'); 320 | await expect(page).toHaveScreenshot(snap('forms-contact')); 321 | await setDarkTheme(page); 322 | await expect(page).toHaveScreenshot(snap('forms-contact-dark')); 323 | }); 324 | 325 | test('footer', async ({ page }) => { 326 | await setup(page, '/formulare/footer-formular/'); 327 | await expect(page).toHaveScreenshot(snap('forms-footer')); 328 | }); 329 | 330 | test('example', async ({ page }) => { 331 | await setup(page, '/formulare/styleguide-testformular/'); 332 | await expect(page).toHaveScreenshot(snap('forms-example')); 333 | await setDarkTheme(page); 334 | await expect(page).toHaveScreenshot(snap('forms-example-dark')); 335 | }); 336 | }); 337 | ```