# 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 › extern-videos >> 2-videos-top-bottom-centered - Location: visual/mfc-corporate-de.spec.ts:261:9 # Error details ``` Error: A snapshot doesn't exist at /Users/mfdrunner/builds/pDk_92X_S/0/mfc/corporate/typo3/playwright/visual/mfc-corporate-de.spec.ts-snapshots/content-textmedia-extern-2-videos-top-bottom-centered-de-tablet-darwin.png, writing actual. ``` # Page snapshot ```yaml - generic [ref=e2]: - link "Zum Inhalt springen" [ref=e3] [cursor=pointer]: - /url: "#page-content" - navigation "Brotkrumen-Navigation" [ref=e4]: - generic [ref=e5]: - paragraph [ref=e6]: "Sie sind here:" - list [ref=e7]: - listitem [ref=e8]: - link "Startseite" [ref=e9] [cursor=pointer]: - /url: / - img [ref=e10] - listitem [ref=e12]: - text: / - link "Inhaltselemente" [ref=e13] [cursor=pointer]: - /url: /inhaltselemente/ - generic [ref=e14]: Inhaltselemente - listitem [ref=e15]: - text: / - link "Textmedia" [ref=e16] [cursor=pointer]: - /url: /inhaltselemente/textmedia/ - generic [ref=e17]: Textmedia - listitem [ref=e18]: - text: / - link "Videos (YouTube/Vimeo)" [ref=e19] [cursor=pointer]: - /url: /inhaltselemente/textmedia/videos-extern/ - generic [ref=e20]: Videos (YouTube/Vimeo) - listitem [ref=e21]: - text: / - generic [ref=e22]: 2 Videos, oben/unten zentriert - main [ref=e23]: - generic [ref=e26]: - generic [ref=e28]: - figure [ref=e30]: - iframe [ref=e32]: - generic [active] [ref=f1e1]: - generic "YouTube-Videoplayer" [ref=f1e3] - generic [ref=f1e5]: - generic: - generic: - button "Video abspielen" [ref=f1e10] [cursor=pointer]: - generic [ref=f1e13]: - img - button "Steuerelemente des Videoplayers ausblenden" [ref=f1e14] [cursor=pointer] - generic [ref=f1e21]: - generic [ref=f1e22]: - link "What is TYPO3?" [ref=f1e23] [cursor=pointer]: - /url: https://www.youtube.com/watch?v=LMx4SmK4s0U - link "TYPO3" [ref=f1e24] [cursor=pointer]: - /url: /channel/UCwpl8LY9Tr3PB26Kk2FYW_w - generic [ref=f1e25]: TYPO3 - generic [ref=f1e26]: - button "thumbnail-image" [ref=f1e27] [cursor=pointer]: - img "thumbnail-image" [ref=f1e28] - generic [ref=f1e30]: - generic: TYPO3 - generic: 7050 Abonnenten - figure [ref=e34]: - iframe [ref=e36]: - generic [active] [ref=f2e1]: - generic "YouTube-Videoplayer" [ref=f2e3] - generic [ref=f2e5]: - generic: - generic: - button "Video abspielen" [ref=f2e10] [cursor=pointer]: - generic [ref=f2e13]: - img - button "Steuerelemente des Videoplayers ausblenden" [ref=f2e14] [cursor=pointer] - generic [ref=f2e21]: - generic [ref=f2e22]: - link "What is TYPO3?" [ref=f2e23] [cursor=pointer]: - /url: https://www.youtube.com/watch?v=LMx4SmK4s0U - link "TYPO3" [ref=f2e24] [cursor=pointer]: - /url: /channel/UCwpl8LY9Tr3PB26Kk2FYW_w - generic [ref=f2e25]: TYPO3 - generic [ref=f2e26]: - button "thumbnail-image" [ref=f2e27] [cursor=pointer]: - img "thumbnail-image" [ref=f2e28] - generic [ref=f2e30]: - generic: TYPO3 - generic: 7050 Abonnenten - generic [ref=e37]: - heading "2 Videos, Oben mittig" [level=3] [ref=e39] - paragraph [ref=e40]: 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. - generic [ref=e43]: - generic [ref=e45]: - figure [ref=e47]: - iframe [ref=e49]: - generic [active] [ref=f3e1]: - generic "YouTube-Videoplayer" [ref=f3e3] - generic [ref=f3e5]: - generic: - generic: - button "Video abspielen" [ref=f3e10] [cursor=pointer]: - generic [ref=f3e13]: - img - button "Steuerelemente des Videoplayers ausblenden" [ref=f3e14] [cursor=pointer] - generic [ref=f3e21]: - generic [ref=f3e22]: - link "What is TYPO3?" [ref=f3e23] [cursor=pointer]: - /url: https://www.youtube.com/watch?v=LMx4SmK4s0U - link "TYPO3" [ref=f3e24] [cursor=pointer]: - /url: /channel/UCwpl8LY9Tr3PB26Kk2FYW_w - generic [ref=f3e25]: TYPO3 - generic [ref=f3e26]: - button "thumbnail-image" [ref=f3e27] [cursor=pointer]: - img "thumbnail-image" [ref=f3e28] - generic [ref=f3e30]: - generic: TYPO3 - generic: 7050 Abonnenten - figure [ref=e51]: - iframe [ref=e53]: - generic [active] [ref=f4e1]: - generic "YouTube-Videoplayer" [ref=f4e3] - generic [ref=f4e5]: - generic: - generic: - button "Video abspielen" [ref=f4e10] [cursor=pointer]: - generic [ref=f4e13]: - img - button "Steuerelemente des Videoplayers ausblenden" [ref=f4e14] [cursor=pointer] - generic [ref=f4e21]: - generic [ref=f4e22]: - link "What is TYPO3?" [ref=f4e23] [cursor=pointer]: - /url: https://www.youtube.com/watch?v=LMx4SmK4s0U - link "TYPO3" [ref=f4e24] [cursor=pointer]: - /url: /channel/UCwpl8LY9Tr3PB26Kk2FYW_w - generic [ref=f4e25]: TYPO3 - generic [ref=f4e26]: - button "thumbnail-image" [ref=f4e27] [cursor=pointer]: - img "thumbnail-image" [ref=f4e28] - generic [ref=f4e30]: - generic: TYPO3 - generic: 7050 Abonnenten - generic [ref=e54]: - heading "2 Videos, Unten mittig" [level=3] [ref=e56] - paragraph [ref=e57]: 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. - contentinfo [ref=e58]: - generic [ref=e61]: - navigation [ref=e62]: - list [ref=e63]: - listitem [ref=e64]: - button "Cookie-Einstellungen" [ref=e65] [cursor=pointer] - listitem [ref=e66]: - link "Datenschutzerklärung" [ref=e67] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e68]: - link "Impressum" [ref=e69] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e70]: - paragraph [ref=e71]: © Marketing Factory Digital GmbH - paragraph [ref=e72]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e73] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ - generic [ref=e76]: - strong [ref=e77]: Bildnachweise - list ``` # Test source ```ts 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 }) => { 207 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text/'); 208 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text')); 209 | await setDarkTheme(page); 210 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-dark')); 211 | }); 212 | 213 | test('2-images-top-bottom-centered', async ({ page }) => { 214 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/2-bilder-oben-unten-zentriert/'); 215 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-2-images-top-bottom-centered')); 216 | }); 217 | 218 | test('2-images-beside-text-centered', async ({ page }) => { 219 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/2-bilder-neben-text-zentriert/'); 220 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-2-images-beside-text-centered')); 221 | }); 222 | 223 | test('2-images-beside-text', async ({ page }) => { 224 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/2-bilder-neben-text/'); 225 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-2-images-beside-text')); 226 | }); 227 | 228 | test('1-image-beside-text-centered-33-percent', async ({ page }) => { 229 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text-zentriert-33-bildbreite/'); 230 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-centered-33-percent')); 231 | }); 232 | 233 | test('1-image-beside-text-33-percent', async ({ page }) => { 234 | await setup(page, '/inhaltselemente/textmedia/svg-bilder/1-bild-neben-text-33-bildbreite/'); 235 | await expect(page).toHaveScreenshot(snap('content-textmedia-svg-1-image-beside-text-33-percent')); 236 | }); 237 | }); 238 | 239 | test.describe('content › textmedia › extern-videos', () => { 240 | test('1-video-top-bottom-centered', async ({ page }) => { 241 | await setup(page, '/inhaltselemente/textmedia/videos-extern/1-video-oben-unten-zentriert/'); 242 | await hideElements(page, PAGE_HEADER); 243 | await scrollToBottom(page); 244 | await expect(page).toHaveScreenshot(snap('content-textmedia-extern-1-video-top-bottom-centered')); 245 | }); 246 | 247 | test('1-video-beside-text-centered', async ({ page }) => { 248 | await setup(page, '/inhaltselemente/textmedia/videos-extern/1-video-neben-text-zentriert/'); 249 | await hideElements(page, PAGE_HEADER); 250 | await scrollToBottom(page); 251 | await expect(page).toHaveScreenshot(snap('content-textmedia-extern-1-video-beside-text-centered')); 252 | }); 253 | 254 | test('1-video-beside-text', async ({ page }) => { 255 | await setup(page, '/inhaltselemente/textmedia/videos-extern/1-video-neben-text/'); 256 | await hideElements(page, PAGE_HEADER); 257 | await scrollToBottom(page); 258 | await expect(page).toHaveScreenshot(snap('content-textmedia-extern-1-video-beside-text')); 259 | }); 260 | 261 | test('2-videos-top-bottom-centered', async ({ page }) => { 262 | await setup(page, '/inhaltselemente/textmedia/videos-extern/2-videos-oben-unten-zentriert/'); 263 | await hideElements(page, PAGE_HEADER); 264 | await scrollToBottom(page); > 265 | await expect(page).toHaveScreenshot(snap('content-textmedia-extern-2-videos-top-bottom-centered')); | ^ Error: A snapshot doesn't exist at /Users/mfdrunner/builds/pDk_92X_S/0/mfc/corporate/typo3/playwright/visual/mfc-corporate-de.spec.ts-snapshots/content-textmedia-extern-2-videos-top-bottom-centered-de-tablet-darwin.png, writing actual. 266 | }); 267 | 268 | test('2-videos-beside-text-centered', async ({ page }) => { 269 | await setup(page, '/inhaltselemente/textmedia/videos-extern/2-videos-neben-text-zentriert/'); 270 | await hideElements(page, PAGE_HEADER); 271 | await scrollToBottom(page); 272 | await expect(page).toHaveScreenshot(snap('content-textmedia-extern-2-videos-beside-text-centered')); 273 | }); 274 | 275 | test('2-videos-beside-text', async ({ page }) => { 276 | await setup(page, '/inhaltselemente/textmedia/videos-extern/2-videos-neben-text/'); 277 | await hideElements(page, PAGE_HEADER); 278 | await scrollToBottom(page); 279 | await expect(page).toHaveScreenshot(snap('content-textmedia-extern-2-videos-beside-text')); 280 | }); 281 | 282 | test('1-video-beside-text-centered-33-percent', async ({ page }) => { 283 | await setup(page, '/inhaltselemente/textmedia/videos-extern/1-video-neben-text-zentriert-33-bildbreite/'); 284 | await hideElements(page, PAGE_HEADER); 285 | await scrollToBottom(page); 286 | await expect(page).toHaveScreenshot(snap('content-textmedia-extern-1-video-beside-text-centered-33-percent')); 287 | }); 288 | 289 | test('1-video-beside-text-33-percent', async ({ page }) => { 290 | await setup(page, '/inhaltselemente/textmedia/videos-extern/1-video-neben-text-33-bildbreite/'); 291 | await hideElements(page, PAGE_HEADER); 292 | await scrollToBottom(page); 293 | await expect(page).toHaveScreenshot(snap('content-textmedia-extern-1-video-beside-text-33-percent')); 294 | }); 295 | }); 296 | 297 | test.describe('content › textmedia › local-videos', () => { 298 | test('1-video-top-bottom-centered', async ({ page }) => { 299 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/1-video-oben-unten-zentriert/'); 300 | await hideElements(page, PAGE_HEADER); 301 | await scrollToBottom(page); 302 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-1-video-top-bottom-centered')); 303 | }); 304 | 305 | test('1-video-beside-text-centered', async ({ page }) => { 306 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/1-video-neben-text-zentriert/'); 307 | await hideElements(page, PAGE_HEADER); 308 | await scrollToBottom(page); 309 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-1-video-beside-text-centered')); 310 | }); 311 | 312 | test('1-video-beside-text', async ({ page }) => { 313 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/1-video-neben-text/'); 314 | await hideElements(page, PAGE_HEADER); 315 | await scrollToBottom(page); 316 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-1-video-beside-text')); 317 | }); 318 | 319 | test('2-videos-top-bottom-centered', async ({ page }) => { 320 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/2-videos-oben-unten-zentriert/'); 321 | await hideElements(page, PAGE_HEADER); 322 | await scrollToBottom(page); 323 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-2-videos-top-bottom-centered')); 324 | }); 325 | 326 | test('2-videos-beside-text-centered', async ({ page }) => { 327 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/2-videos-neben-text-zentriert/'); 328 | await hideElements(page, PAGE_HEADER); 329 | await scrollToBottom(page); 330 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-2-videos-beside-text-centered')); 331 | }); 332 | 333 | test('2-videos-beside-text', async ({ page }) => { 334 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/2-videos-neben-text/'); 335 | await hideElements(page, PAGE_HEADER); 336 | await scrollToBottom(page); 337 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-2-videos-beside-text')); 338 | }); 339 | 340 | test('1-video-beside-text-centered-33-percent', async ({ page }) => { 341 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/1-video-neben-text-zentriert-33-bildbreite/'); 342 | await hideElements(page, PAGE_HEADER); 343 | await scrollToBottom(page); 344 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-1-video-beside-text-centered-33-percent')); 345 | }); 346 | 347 | test('1-video-beside-text-33-percent', async ({ page }) => { 348 | await setup(page, '/inhaltselemente/textmedia/videos-lokal-gehostet/1-video-neben-text-33-bildbreite/'); 349 | await hideElements(page, PAGE_HEADER); 350 | await scrollToBottom(page); 351 | await expect(page).toHaveScreenshot(snap('content-textmedia-local-1-video-beside-text-33-percent')); 352 | }); 353 | }); 354 | 355 | test.describe('page-types', () => { 356 | test('search', async ({ page }) => { 357 | await setup(page, '/seitentypen/suche/?tx_solr%5Bq%5D=obermeyer'); 358 | await expect(page).toHaveScreenshot(snap('page-type-search')); 359 | }); 360 | 361 | test('client-list', async ({ page }) => { 362 | await setup(page, '/seitentypen/kunden-listenansicht/'); 363 | await expect(page).toHaveScreenshot(snap('page-type-client-list')); 364 | }); 365 | ```