# 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:25:9 # Error details ``` Error: expect(page).toHaveScreenshot(expected) failed Expected an image 776px by 5473px, received 776px by 5345px. Snapshot: other-rte-syntax-highlighting.png Call log: - Expect "toHaveScreenshot(other-rte-syntax-highlighting.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 776px by 5473px, received 776px by 5345px. - 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 776px by 5473px, received 776px by 5345px. ``` # 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: / - listitem [ref=e37]: - text: / - link "RTE" [ref=e38] [cursor=pointer]: - /url: /richtext-editor/ - 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=e110]: - navigation [ref=e111]: - list [ref=e112]: - listitem [ref=e113]: - button "Cookie-Einstellungen" [ref=e114] [cursor=pointer] - listitem [ref=e115]: - link "Datenschutzerklärung" [ref=e116] [cursor=pointer]: - /url: https://www.marketing-factory.de.renovate-develop-php-packages.review.mfc.gmbh/datenschutzerklaerung/ - listitem [ref=e117]: - link "Impressum" [ref=e118] [cursor=pointer]: - /url: https://www.marketing-factory.de.renovate-develop-php-packages.review.mfc.gmbh/impressum/ - generic [ref=e119]: - paragraph [ref=e120]: © Marketing Factory Digital GmbH - paragraph [ref=e121]: - text: Alternativtexte für Bilder sind teilweise - link "KI-generiert" [ref=e122] [cursor=pointer]: - /url: https://www.marketing-factory.de.renovate-develop-php-packages.review.mfc.gmbh/technologie/typo3/unsere-typo3-extensions/ai-filemetadata/ ``` # Test source ```ts 1 | import { test, expect } from '@playwright/test'; 2 | import { setup, setDarkTheme } from '../helpers/utils'; 3 | 4 | const snap = (name: string) => ({ 5 | name: `${name}.png`, 6 | fullPage: true, 7 | } as const); 8 | 9 | test.describe('other', () => { 10 | test('styling', async ({ page }) => { 11 | await setup(page, '/design-basiseigenschaften/'); 12 | await page.waitForTimeout(2000); 13 | await expect(page).toHaveScreenshot(snap('other-styling')); 14 | await setDarkTheme(page); 15 | await expect(page).toHaveScreenshot(snap('other-styling-dark')); 16 | }); 17 | 18 | test('rte', async ({ page }) => { 19 | await setup(page, '/richtext-editor/'); 20 | await expect(page).toHaveScreenshot(snap('other-rte')); 21 | await setDarkTheme(page); 22 | await expect(page).toHaveScreenshot(snap('other-rte-dark')); 23 | }); 24 | 25 | test('rte-syntax-highlighting', async ({ page }) => { 26 | await setup(page, '/richtext-editor/syntax-highlighting/'); > 27 | await expect(page).toHaveScreenshot(snap('other-rte-syntax-highlighting')); | ^ Error: expect(page).toHaveScreenshot(expected) failed 28 | }); 29 | }); 30 | 31 | test.describe('content', () => { 32 | test('accordion', async ({ page }) => { 33 | await setup(page, '/inhaltselemente/accordion/'); 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 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')); ```