# 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 >> other >> rte-syntax-highlighting - Location: visual/mfc-corporate-de.spec.ts:23: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/other-rte-syntax-highlighting-de-tablet-p-darwin.png, writing actual. ``` # Page snapshot ```yaml - generic [ref=e2]: - link "Zum Inhalt springen" [ref=e3] [cursor=pointer]: - /url: "#page-content" - banner [ref=e4]: - generic [ref=e5]: - link "Marketing Factory Digital GmbH" [ref=e6] [cursor=pointer]: - /url: / - img "Marketing Factory Digital GmbH" [ref=e7] - link "Kontaktformular" [ref=e26] [cursor=pointer]: - /url: /formulare/kontaktformular/ - button "Navigation" [expanded] [ref=e27] [cursor=pointer] - navigation "Brotkrumen-Navigation" [ref=e29]: - generic [ref=e30]: - paragraph [ref=e31]: "Sie sind here:" - list [ref=e32]: - listitem [ref=e33]: - link "Startseite" [ref=e34] [cursor=pointer]: - /url: / - img [ref=e35] - listitem [ref=e37]: - text: / - link "RTE" [ref=e38] [cursor=pointer]: - /url: /richtext-editor/ - generic [ref=e39]: RTE - listitem [ref=e40]: - text: / - generic [ref=e41]: Syntax Highlighting - main [ref=e42]: - generic [ref=e44]: - heading "Syntax Highlighting" [level=1] [ref=e46] - heading "PHP" [level=2] [ref=e47] - code [ref=e49]: - text: "(function ($extKey='example') { $archiveDoktype = 116; // Provide icon for page tree, list view, ... : $iconRegistry =" - generic [ref=e50]: \TYPO3\CMS\Core\Utility\GeneralUtility - text: ::makeInstance( - generic [ref=e51]: \TYPO3\CMS\Core\Imaging\IconRegistry - text: ::class); $iconRegistry ->registerIcon( 'apps-pagetree-archive', - generic [ref=e52]: TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider - text: ::class, [ 'source' => 'EXT:' . $extKey . '/Resources/Public/Icons/Archive.svg', ] ); $iconRegistry ->registerIcon( 'apps-pagetree-archive-contentFromPid', - generic [ref=e53]: TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider - text: "::class, [ 'source' => 'EXT:' . $extKey . '/Resources/Public/Icons/ArchiveContentFromPid.svg', ] ); // ... register other icons in the same way, see below. // Allow backend users to drag and drop the new page type:" - generic [ref=e54]: \TYPO3\CMS\Core\Utility\ExtensionManagementUtility - text: "::addUserTSConfig( 'options.pageTree.doktypesToShowInNewPageDragArea := addToList(' . $archiveDoktype . ')' ); })();" - heading "SQL" [level=2] [ref=e55] - code [ref=e57]: "# # Table structure for table 'tx_impexp_presets' # CREATE TABLE tx_impexp_presets ( title varchar(255) DEFAULT '' NOT NULL, public tinyint(3) DEFAULT '0' NOT NULL, item_uid int(11) DEFAULT '0' NOT NULL, preset_data blob, KEY lookup (item_uid) );" - heading "JavaScript" [level=2] [ref=e58] - code [ref=e60]: "/** * Toggles a 'sticky' class for the page header when the user has scrolled down the page. */ import debounce from '../Helpers/debounce'; function initStickyHeader() { const pageHeader = document.getElementById('js_page-header'), stickyClass = 'is-sticky'; let offsetTop; function stickyHeader() { offsetTop = pageHeader.offsetHeight; if (window.scrollY > offsetTop) { pageHeader.classList.add(stickyClass); } else { pageHeader.classList.remove(stickyClass); } } if (pageHeader) { window.addEventListener('load', stickyHeader); window.addEventListener('scroll', debounce(stickyHeader, 50)); window.addEventListener('resize', debounce(stickyHeader, 150)); } } document.addEventListener('DOMContentLoaded', function () { initStickyHeader(); });" - heading "JSON" [level=2] [ref=e61] - code [ref=e63]: "{ \"name\": \"mfc-corporate\", \"scripts\": { \"dev\": \"./node_modules/.bin/encore dev\", \"watch\": \"./node_modules/.bin/encore dev --watch\", \"build\": \"./node_modules/.bin/encore production\", \"prod-watch\": \"./node_modules/.bin/encore production --watch\" }, \"dependencies\": { \"@fortawesome/fontawesome-pro\": \"^5.15.4\", \"@fortawesome/fontawesome-svg-core\": \"^1.2.36\", \"@fortawesome/free-brands-svg-icons\": \"^5.15.4\", \"@fortawesome/pro-light-svg-icons\": \"^5.15.4\", \"@fortawesome/pro-regular-svg-icons\": \"^5.15.4\", \"@fortawesome/pro-solid-svg-icons\": \"^5.15.4\", \"@popperjs/core\": \"^2.11.2\", \"bootstrap\": \"^5.1.1\", \"bootstrap-package\": \"file:./public/typo3conf/ext/bootstrap_package/Resources/Public\", \"bootstrap.native\": \"^4.0.6\", \"hammerjs\": \"^2.0.8\", \"lazysizes\": \"^5.3.2\", \"mmenu-light\": \"^3.0.9\", \"sass\": \"^1.43.4\", \"simplelightbox\": \"^2.10.1\", \"tiny-slider\": \"^2.9.4\" }, \"engines\": { \"node\": \"16.x\" } }" - heading "SCSS" [level=2] [ref=e64] - code [ref=e66]: - text: // // Project comparison // --------------------------------------------------------------- - generic [ref=e67]: $comparison-max-width - text: ": 760px;" - generic [ref=e68]: $comparison-slide-bg-border-size - text: ": 40px;" - generic [ref=e69]: $comparison-wrap-scrollbar-hack - text: ": 7px; // // Base element with colored background // .comparison { background: linear-gradient( 90deg, $color-brand-mfc-purple 50%, $color-brand-mfc-blue 0 100% ); overflow: hidden; position: relative; } // // Movable background with jagged borders // .comparison__slide-bg { background: var(--color-page-bg); position: absolute; top: 0; right: 0; bottom: 0; left: calc(50px + 3vw); transition: transform $brand-transition-dur ease-in; // Jagged border on the left:" - generic [ref=e70]: "&::before" - text: "{ background: var(--color-page-bg); display: block; content: \"\"; position: absolute; -webkit-mask-image: url(\"#{$image-path}/comparison-bg-left.svg\"); mask-image: url(\"#{$image-path}/comparison-bg-left.svg\"); -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y; top: 0; bottom: 0; left: -($comparison-slide-bg-border-size - 1); width: $comparison-slide-bg-border-size; } }" - heading "CSS" [level=2] [ref=e71] - code [ref=e73]: ".radio-switch { align-items: center; background: var(--color-grey-reverse); display: flex; border: none; border-radius: 40rem; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25); color: var(--color-general); padding: 0; } .radio-switch legend { font-size: 2px; opacity: 0; position: absolute; }" - heading "HTML" [level=2] [ref=e74] - code [ref=e76]: - generic [ref=e77]: - generic [ref=e78]: - generic [ref=e79]: " - generic [ref=e83]: - generic [ref=e84]: " - generic [ref=e85]: - generic [ref=e86]: " - generic [ref=e88]: - generic [ref=e89]: - generic [ref=e92]: - generic [ref=e93]: " - text: "{% if page_title is defined %} {{ page_title }} | {% endif %} Marketing Factory Consulting GmbH" - generic [ref=e94]: - generic [ref=e95]: " - generic [ref=e96]: - generic [ref=e97]: " - text: "{% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} {% block javascripts %} {{ encore_entry_script_tags('app') }} {% endblock %}" - generic [ref=e101]: - generic [ref=e102]: " - generic [ref=e103]: - generic [ref=e104]: " - heading "TypoScript" [level=2] [ref=e105] - code [ref=e107]: "config { # DOC Type, XMLPrologue und Charset Settings doctype = html5 xmlprologue = none metaCharset = utf-8 htmlTag.attributes.class = no-js # Debug information in frontend: debug = 0 admPanel = 0 # Code Settings disablePrefixComment = 1 removeDefaultJS = external headerComment = made with <3 by Marketing Factory Consulting GmbH # Compression and Concatenation of CSS and JS Files: compressCss = 0 compressJs = 0 concatenateCss = 0 concatenateJs = 0 # Spam Protection: spamProtectEmailAddresses = 3 spamProtectEmailAddresses_atSubst = (at) spamProtectEmailAddresses_lastDotSubst = (dot) }" - contentinfo [ref=e108]: - generic [ref=e111]: - navigation [ref=e112]: - list [ref=e113]: - listitem [ref=e114]: - button "Cookie-Einstellungen" [ref=e115] [cursor=pointer] - listitem [ref=e116]: - link "Datenschutzerklärung" [ref=e117] [cursor=pointer]: - /url: https://www.marketing-factory.de/datenschutzerklaerung/ - listitem [ref=e118]: - link "Impressum" [ref=e119] [cursor=pointer]: - /url: https://www.marketing-factory.de/impressum/ - generic [ref=e120]: - paragraph [ref=e121]: © Marketing Factory Digital GmbH - paragraph [ref=e122]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e123] [cursor=pointer]: - /url: https://www.marketing-factory.de/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ ``` # 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('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')); | ^ 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/other-rte-syntax-highlighting-de-tablet-p-darwin.png, writing actual. 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')); 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 | ```