Kant CMS: Grundgerüst, visueller Editor, Mediathek
Symfony 7.4 / Twig / Doctrine DBAL auf herkömmlichem PHP-Webhosting. Versionierte Blockdokumente (v1-v3) mit unveränderlichen Revisionen, getrennten Entwürfen/Veröffentlichungen und optimistischer Konflikterkennung. Visueller Editor mit Strukturbaum, Live-Vorschau, responsiven Gerätewerten, Abschnittsvorlagen, Bildmediathek, Galerien und Effekten. Öffentliche Ausgabe ohne Editor-JavaScript. Geprüft: 41 PHP-Tests / 155 Assertions, 10 JavaScript-Modelltests. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
kantarciandClaude Opus 5 committed
commit
82b07820bc
87 files changed
+14463
No files matched your search
@@ -0,0 +1,49 @@
|
||||
import lighthouse from 'lighthouse';
|
||||
import desktopConfig from 'lighthouse/core/config/desktop-config.js';
|
||||
import { chromium } from 'playwright';
|
||||
import { mkdir, writeFile } from 'node:fs/promises';
|
||||
import net from 'node:net';
|
||||
|
||||
const origin = process.env.CMS_URL || 'http://127.0.0.1:8080';
|
||||
const output = process.env.CMS_AUDIT_DIR || 'reports/lighthouse';
|
||||
const preflight = await fetch(origin);
|
||||
if (!preflight.ok || /noindex/i.test(preflight.headers.get('x-robots-tag') || '')) {
|
||||
throw new Error('Audit requires an indexable HTTP 200 page in production mode. Check APP_ENV and APP_DEBUG.');
|
||||
}
|
||||
await mkdir(output, { recursive: true });
|
||||
const portProbe = net.createServer();
|
||||
await new Promise(resolve => portProbe.listen(0, '127.0.0.1', resolve));
|
||||
const port = portProbe.address().port;
|
||||
await new Promise(resolve => portProbe.close(resolve));
|
||||
const chrome = await chromium.launch({ args: [`--remote-debugging-port=${port}`] });
|
||||
const summary = [];
|
||||
try {
|
||||
for (const profile of ['mobile', 'desktop']) {
|
||||
const runs = [];
|
||||
for (let run = 1; run <= 3; run++) {
|
||||
const result = await lighthouse(origin, {
|
||||
port,
|
||||
output: 'json',
|
||||
logLevel: 'error',
|
||||
}, profile === 'desktop' ? desktopConfig : undefined);
|
||||
const lhr = result.lhr;
|
||||
if (lhr.configSettings.formFactor !== profile) {
|
||||
throw new Error(`Requested ${profile}, measured ${lhr.configSettings.formFactor}`);
|
||||
}
|
||||
await writeFile(`${output}/${profile}-${run}.json`, result.report);
|
||||
runs.push(lhr);
|
||||
console.log(profile, run, Object.fromEntries(Object.entries(lhr.categories).map(([key, value]) => [key, value.score])));
|
||||
}
|
||||
const scores = {};
|
||||
for (const category of Object.keys(runs[0].categories)) {
|
||||
const values = runs.map(r => r.categories[category].score).filter(v => v !== null).sort((a, b) => a - b);
|
||||
scores[category] = values.length ? values[Math.floor(values.length / 2)] : null;
|
||||
}
|
||||
summary.push({ profile, scores, lighthouseVersion: runs[0].lighthouseVersion, settings: runs[0].configSettings, environment: runs[0].environment, note: 'Local prototype only. No customer-site acceptance or field-data claim.' });
|
||||
}
|
||||
await writeFile(`${output}/summary.json`, JSON.stringify(summary, null, 2));
|
||||
const passed = summary.every(r => r.scores.performance >= .95 && ['accessibility', 'best-practices', 'seo'].every(c => r.scores[c] === 1) && (r.scores['agentic-browsing'] === undefined || r.scores['agentic-browsing'] === 1));
|
||||
if (!passed) process.exitCode = 1;
|
||||
} finally {
|
||||
await chrome.close();
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { chromium } from 'playwright';
|
||||
import AxeBuilder from '@axe-core/playwright';
|
||||
import assert from 'node:assert/strict';
|
||||
import { mkdir, writeFile } from 'node:fs/promises';
|
||||
|
||||
const origin = process.env.CMS_URL || 'http://127.0.0.1:8080';
|
||||
const browser = await chromium.launch();
|
||||
await mkdir('reports', { recursive: true });
|
||||
const results = [];
|
||||
try {
|
||||
for (const width of [1440, 390]) {
|
||||
const context = await browser.newContext({ viewport: { width, height: 1000 } });
|
||||
const page = await context.newPage();
|
||||
const errors = [];
|
||||
page.on('pageerror', error => errors.push(error.message));
|
||||
for (const path of ['/', '/grundlagen', '/projektstand']) {
|
||||
const response = await page.goto(origin + path);
|
||||
assert.equal(response.status(), 200);
|
||||
assert.equal(await page.locator('h1').count(), 1);
|
||||
assert.equal(await page.locator('script').count(), 0);
|
||||
assert(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), 'Horizontal overflow');
|
||||
const axe = await new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'best-practice']).analyze();
|
||||
assert.deepEqual(axe.violations.map(v => ({ id: v.id, nodes: v.nodes.map(n => n.target) })), []);
|
||||
results.push({ width, path, violations: axe.violations.length, checks: axe.passes.length });
|
||||
await page.screenshot({ path: `reports/${width}-${path === '/' ? 'home' : path.slice(1)}.png`, fullPage: true });
|
||||
}
|
||||
await page.goto(origin);
|
||||
await page.keyboard.press('Tab');
|
||||
assert.equal(await page.locator(':focus').innerText(), 'Zum Inhalt springen');
|
||||
await page.keyboard.press('Enter');
|
||||
assert.equal(await page.locator(':focus').getAttribute('id'), 'main');
|
||||
await page.getByRole('link', { name: 'Die Grundlage entdecken' }).click();
|
||||
assert.equal(new URL(page.url()).pathname, '/grundlagen');
|
||||
await page.getByRole('link', { name: 'Projektstand' }).click();
|
||||
assert.equal(new URL(page.url()).pathname, '/projektstand');
|
||||
assert.deepEqual(errors, []);
|
||||
await context.close();
|
||||
}
|
||||
const noJs = await browser.newPage({ javaScriptEnabled: false });
|
||||
await noJs.goto(origin);
|
||||
assert.match(await noJs.locator('h1').innerText(), /Deine Inhalte/);
|
||||
await noJs.getByRole('link', { name: 'Die Grundlage entdecken' }).click();
|
||||
assert.equal(new URL(noJs.url()).pathname, '/grundlagen');
|
||||
await writeFile('reports/browser.json', JSON.stringify({ origin, results, keyboard: 'passed', noJavaScript: 'passed' }, null, 2));
|
||||
console.log('Passed: 6 page/viewport accessibility checks, keyboard navigation, no-JS navigation.');
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { readFile, writeFile } from 'node:fs/promises';
|
||||
|
||||
export function designCss(tokens) {
|
||||
const rules = device => Object.entries(tokens).flatMap(([key, token]) => Object.entries(token.values).map(([value, [, css]]) => `#main .d-${device}-${key}-${value}{${css}}`)).join('\n');
|
||||
return `/* Generated from design-tokens.json by npm run build:design. */\n${rules('desktop')}\n@media(max-width:1024px){\n${rules('tablet')}\n}\n@media(max-width:650px){\n${rules('mobile')}\n}\n`;
|
||||
}
|
||||
if (process.argv[1]?.replaceAll('\\', '/').endsWith('/build-design.mjs')) {
|
||||
const tokens = JSON.parse(await readFile(new URL('../public/assets/design-tokens.json', import.meta.url), 'utf8'));
|
||||
await writeFile(new URL('../public/assets/design.css', import.meta.url), designCss(tokens));
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
import { chromium } from 'playwright';
|
||||
import AxeBuilder from '@axe-core/playwright';
|
||||
import assert from 'node:assert/strict';
|
||||
import { mkdir, writeFile } from 'node:fs/promises';
|
||||
import { spawn, execFileSync } from 'node:child_process';
|
||||
import { randomBytes } from 'node:crypto';
|
||||
import net from 'node:net';
|
||||
|
||||
const php = process.env.PHP_BINARY || 'php';
|
||||
execFileSync(php, ['bin/console', 'cache:clear', '--env=prod', '--no-debug'], { stdio: 'ignore' });
|
||||
const fixture = JSON.parse(execFileSync(php, ['tests/browser-fixture.php'], { encoding: 'utf8' }));
|
||||
const probe = net.createServer();
|
||||
await new Promise(resolve => probe.listen(0, '127.0.0.1', resolve));
|
||||
const port = probe.address().port;
|
||||
await new Promise(resolve => probe.close(resolve));
|
||||
const origin = `http://127.0.0.1:${port}`;
|
||||
const server = spawn(php, ['-d', 'upload_max_filesize=8M', '-d', 'post_max_size=10M', '-d', 'memory_limit=256M', '-S', `127.0.0.1:${port}`, '-t', 'public'], {
|
||||
windowsHide: true,
|
||||
env: { ...process.env, APP_ENV: 'prod', APP_DEBUG: '0', APP_SECRET: randomBytes(32).toString('hex'), DATABASE_URL: fixture.databaseUrl, MEDIA_DIRECTORY: fixture.mediaDirectory, SITE_ORIGIN: origin },
|
||||
stdio: 'ignore',
|
||||
});
|
||||
server.on('error', error => { throw error; });
|
||||
let browser;
|
||||
let activePage;
|
||||
await mkdir('reports/editor', { recursive: true });
|
||||
const checks = [];
|
||||
try {
|
||||
for (let i = 0; i < 60; i++) {
|
||||
try { if ((await fetch(origin)).ok) break; } catch {}
|
||||
if (i === 59) throw new Error('Isolated PHP server did not start.');
|
||||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
}
|
||||
browser = await chromium.launch();
|
||||
const context = await browser.newContext({ viewport: { width: 1600, height: 1100 }, acceptDownloads: true });
|
||||
context.setDefaultTimeout(15000);
|
||||
const page = await context.newPage();
|
||||
activePage = page;
|
||||
const errors = [];
|
||||
page.on('pageerror', error => { errors.push(error.message); console.error('Editor script error:', error.message); });
|
||||
page.on('console', message => { if (message.type() === 'error' && /Content Security Policy/.test(message.text())) errors.push(message.text()); });
|
||||
page.on('dialog', dialog => dialog.accept());
|
||||
const axe = async name => {
|
||||
console.log('Accessibility check:', name);
|
||||
// The no-script preview sandbox cannot host axe's frame worker. Audit the identical
|
||||
// published renderer separately; retain the sandbox in the real editor.
|
||||
const result = await new AxeBuilder({ page }).exclude('#preview').withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'best-practice']).analyze();
|
||||
assert.deepEqual(result.violations.map(v => ({ id: v.id, nodes: v.nodes.map(n => n.target) })), [], name);
|
||||
checks.push({ name, violations: 0 });
|
||||
};
|
||||
await page.goto(origin + '/admin');
|
||||
assert.equal(new URL(page.url()).pathname, '/admin/login');
|
||||
await axe('login');
|
||||
await page.screenshot({ path: 'reports/editor/login.png', fullPage: true });
|
||||
await page.getByLabel('Benutzername').fill(fixture.username);
|
||||
await page.getByLabel('Passwort', { exact: true }).fill(fixture.password);
|
||||
await page.getByRole('button', { name: 'Anmelden', exact: true }).click();
|
||||
await page.waitForURL(origin + '/admin');
|
||||
console.log('Authenticated in isolated test installation.');
|
||||
await axe('page list');
|
||||
await page.screenshot({ path: 'reports/editor/pages.png', fullPage: true });
|
||||
await page.locator('a[href="/admin/pages/test-home"]').first().click();
|
||||
await page.locator('#save-status').filter({ hasText: 'Veröffentlicht' }).waitFor();
|
||||
console.log('Editor data loaded.');
|
||||
console.log('Preview status:', await page.locator('#preview-status').innerText());
|
||||
const frame = page.frameLocator('#preview');
|
||||
await frame.locator('h1').waitFor();
|
||||
await page.locator('#preview-status').filter({ hasText: 'Zum Auswählen' }).waitFor();
|
||||
await frame.locator('h1').click();
|
||||
assert.equal(await page.locator('#properties-title').innerText(), 'Überschrift');
|
||||
await page.getByLabel('Text', { exact: true }).fill('Meine bearbeitete Website');
|
||||
await frame.getByRole('heading', { name: 'Meine bearbeitete Website', exact: true }).waitFor();
|
||||
assert.equal(await page.locator('#publish').isDisabled(), true);
|
||||
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
||||
await frame.getByRole('heading', { name: /Deine Inhalte/, level: 1 }).waitFor();
|
||||
await page.getByRole('button', { name: 'Wiederholen', exact: true }).click();
|
||||
await frame.getByRole('heading', { name: 'Meine bearbeitete Website', exact: true }).waitFor();
|
||||
checks.push({ name: 'preview selection, property edit, undo and redo', passed: true });
|
||||
console.log('Preview edits and history passed.');
|
||||
|
||||
await page.getByRole('button', { name: 'Einklappen', exact: true }).click();
|
||||
assert.equal(await page.locator('#structure .tree-item').count(), 3);
|
||||
await page.getByLabel('Element suchen', { exact: true }).fill('Meine bearbeitete');
|
||||
assert.equal(await page.locator('#structure .tree-item').count(), 2);
|
||||
await page.locator('#structure [data-block-id="headline"]').focus();
|
||||
await page.keyboard.press('Enter');
|
||||
await page.getByLabel('Element suchen', { exact: true }).fill('');
|
||||
assert.equal(await page.locator('#structure [data-block-id="headline"]').isVisible(), true);
|
||||
await page.getByRole('button', { name: 'Alle öffnen', exact: true }).click();
|
||||
await page.getByRole('button', { name: 'Design', exact: true }).click();
|
||||
await page.getByLabel('Schriftgröße', { exact: true }).selectOption('hero');
|
||||
const frameValue = async (selector, property, expected) => {
|
||||
await page.waitForFunction(({ selector, property, expected }) => {
|
||||
const doc = document.querySelector('#preview').contentDocument;
|
||||
const element = doc?.querySelector(selector);
|
||||
return element && doc.defaultView.getComputedStyle(element)[property] === expected;
|
||||
}, { selector, property, expected });
|
||||
};
|
||||
await frameValue('#headline', 'fontSize', '72px');
|
||||
assert.equal(await page.locator('#preview').evaluate(element => element.contentWindow.innerWidth), 1240);
|
||||
await page.getByRole('button', { name: 'Tablet', exact: true }).click();
|
||||
await frameValue('#headline', 'fontSize', '72px');
|
||||
await page.getByLabel('Schriftgröße', { exact: true }).selectOption('display');
|
||||
await frameValue('#headline', 'fontSize', '52px');
|
||||
await page.getByRole('button', { name: 'Mobil', exact: true }).click();
|
||||
await frameValue('#headline', 'fontSize', '52px');
|
||||
await page.getByLabel('Schriftgröße', { exact: true }).selectOption('title');
|
||||
await frameValue('#headline', 'fontSize', '36px');
|
||||
await page.getByRole('button', { name: 'Mobil-Werte zurücksetzen', exact: true }).click();
|
||||
await frameValue('#headline', 'fontSize', '52px');
|
||||
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
||||
await frameValue('#headline', 'fontSize', '36px');
|
||||
await page.getByLabel('Ausrichtung', { exact: true }).selectOption('center');
|
||||
await frameValue('#headline', 'textAlign', 'center');
|
||||
await page.getByRole('button', { name: 'Desktop', exact: true }).click();
|
||||
await frameValue('#headline', 'fontSize', '72px');
|
||||
await frameValue('#headline', 'textAlign', 'start');
|
||||
await page.locator('#structure [data-block-id="hero"]').click();
|
||||
await page.getByLabel('Innenabstand oben / unten', { exact: true }).selectOption('huge');
|
||||
await frameValue('#hero', 'paddingTop', '96px');
|
||||
await page.getByRole('button', { name: 'Mobil', exact: true }).click();
|
||||
await page.getByLabel('Innenabstand oben / unten', { exact: true }).selectOption('medium');
|
||||
await frameValue('#hero', 'paddingTop', '32px');
|
||||
await page.locator('[data-preset="columns"]').click();
|
||||
const presetSection = await page.locator('#structure .tree-item[aria-pressed="true"]').getAttribute('data-block-id');
|
||||
const presetRow = `#${presetSection} .block-row`;
|
||||
await frame.locator(presetRow).waitFor();
|
||||
const columnCount = async expected => {
|
||||
await page.waitForFunction(({ selector, expected }) => {
|
||||
const doc = document.querySelector('#preview').contentDocument;
|
||||
const element = doc?.querySelector(selector);
|
||||
return element && doc.defaultView.getComputedStyle(element).gridTemplateColumns.split(' ').length === expected;
|
||||
}, { selector: presetRow, expected });
|
||||
};
|
||||
await columnCount(1);
|
||||
await page.getByRole('button', { name: 'Desktop', exact: true }).click();
|
||||
await columnCount(2);
|
||||
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
||||
await frame.locator(presetRow).waitFor({ state: 'detached' });
|
||||
await page.getByRole('button', { name: 'Wiederholen', exact: true }).click();
|
||||
await columnCount(2);
|
||||
await page.locator('#structure [data-block-id="headline"]').click();
|
||||
await page.getByRole('button', { name: 'Inhalt', exact: true }).click();
|
||||
checks.push({ name: 'keyboard tree search and collapse, responsive inheritance/reset/undo, true viewport widths, spacing and responsive section preset', passed: true });
|
||||
console.log('Responsive design, tree tools and presets passed.');
|
||||
|
||||
await page.locator('#library [data-add="gallery"]').click();
|
||||
const galleryId = await page.locator('#structure .tree-item[aria-pressed="true"]').getAttribute('data-block-id');
|
||||
await page.getByRole('button', { name: 'Galeriebilder auswählen', exact: true }).click();
|
||||
await page.locator('#media-status').filter({ hasText: '0 Bilder' }).waitFor();
|
||||
await page.locator('#media-upload').setInputFiles(fixture.images);
|
||||
await page.locator('#media-status').filter({ hasText: '2 Bilder' }).waitFor();
|
||||
const mediaItems = (await (await context.request.get(origin + '/admin/api/media')).json()).items;
|
||||
const mediaResponse = await context.request.get(origin + mediaItems[0].variants[0].src);
|
||||
assert.equal(mediaResponse.status(), 200, `Media delivery: ${(await mediaResponse.text()).slice(0, 160)}`);
|
||||
for (const [index, item] of mediaItems.entries()) {
|
||||
await page.locator(`[data-media-id="${item.id}"]`).focus();
|
||||
await page.keyboard.press('Space');
|
||||
assert.equal(await page.locator(`[data-media-id="${item.id}"]`).evaluate(button => button === document.activeElement), true);
|
||||
await page.getByLabel('Bildtitel', { exact: true }).fill(index === 0 ? 'Bergblick' : 'Küstenblick');
|
||||
await page.getByLabel('Alternativtext des Mediums', { exact: true }).fill(index === 0 ? 'Grüne Berglandschaft mit warmer Abendsonne' : 'Küstenlandschaft mit Hügeln und Abendsonne');
|
||||
await page.getByRole('button', { name: 'Bildangaben speichern', exact: true }).click();
|
||||
await page.getByRole('button', { name: 'Bildangaben speichern', exact: true }).waitFor({ state: 'visible' });
|
||||
await page.waitForFunction(() => !document.querySelector('#media-save').disabled);
|
||||
}
|
||||
await axe('media picker');
|
||||
await page.screenshot({ path: 'reports/editor/media-library.png', fullPage: true });
|
||||
await page.getByRole('button', { name: 'Auswahl übernehmen (2)', exact: true }).click();
|
||||
await frame.locator(`#${galleryId} img`).first().waitFor();
|
||||
assert.equal(await frame.locator(`#${galleryId} img`).count(), 2);
|
||||
await frame.locator(`#${galleryId} img`).first().scrollIntoViewIfNeeded();
|
||||
await page.waitForFunction(id => document.querySelector('#preview').contentDocument?.querySelector(`#${id} img`)?.naturalWidth > 0, galleryId);
|
||||
const imageId = await frame.locator(`#${galleryId} figure`).first().getAttribute('id');
|
||||
await page.locator(`#structure [data-block-id="${imageId}"]`).click();
|
||||
await page.getByLabel('Bildunterschrift', { exact: true }).fill('Ein Ausblick zum Durchatmen.');
|
||||
await frame.getByText('Ein Ausblick zum Durchatmen.', { exact: true }).waitFor();
|
||||
await page.getByRole('button', { name: 'Nach unten verschieben', exact: true }).click();
|
||||
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
||||
await page.locator(`#structure [data-block-id="${galleryId}"]`).click();
|
||||
await page.getByRole('button', { name: 'Design', exact: true }).click();
|
||||
await page.getByLabel('Spaltenaufteilung', { exact: true }).selectOption('two');
|
||||
await page.getByLabel('Schatten', { exact: true }).selectOption('soft');
|
||||
await page.getByLabel('Hover-Effekt', { exact: true }).selectOption('lift');
|
||||
await page.getByLabel('Einblendung beim Laden', { exact: true }).selectOption('rise');
|
||||
await frame.locator(`#${galleryId}.fx-entrance-rise`).waitFor();
|
||||
await page.getByRole('button', { name: 'Mobil', exact: true }).click();
|
||||
await page.getByLabel('Spaltenaufteilung', { exact: true }).selectOption('one');
|
||||
await frame.locator(`#${galleryId}.d-mobile-columns-one`).waitFor();
|
||||
await page.getByRole('button', { name: 'Desktop', exact: true }).click();
|
||||
await page.emulateMedia({ reducedMotion: 'reduce' });
|
||||
await frameValue(`#${galleryId}`, 'animationName', 'none');
|
||||
await frameValue(`#${galleryId}`, 'transform', 'none');
|
||||
await page.emulateMedia({ reducedMotion: 'no-preference' });
|
||||
await page.locator('#open-media-library').click();
|
||||
await page.locator('#media-status').filter({ hasText: '2 Bilder' }).waitFor();
|
||||
await page.locator(`[data-media-id="${mediaItems[0].id}"]`).click();
|
||||
await page.getByRole('button', { name: 'Archivieren', exact: true }).click();
|
||||
await page.locator('#media-status').filter({ hasText: '1 Bilder' }).waitFor();
|
||||
assert.equal((await context.request.get(origin + mediaItems[0].variants[0].src)).status(), 200);
|
||||
await page.getByLabel('Archivierte Bilder anzeigen', { exact: true }).check();
|
||||
await page.locator(`[data-media-id="${mediaItems[0].id}"]`).click();
|
||||
await page.getByRole('button', { name: 'Wiederherstellen', exact: true }).click();
|
||||
await page.locator('#media-status').filter({ hasText: '2 Bilder' }).waitFor();
|
||||
await page.getByRole('button', { name: 'Schließen', exact: true }).click();
|
||||
await page.locator('#structure [data-block-id="headline"]').click();
|
||||
await page.getByRole('button', { name: 'Inhalt', exact: true }).click();
|
||||
checks.push({ name: 'image upload, alt metadata, multi-select gallery, caption, sorting undo, archive/restore, responsive variants and reduced-motion effects', passed: true });
|
||||
console.log('Media library, gallery and effects passed.');
|
||||
|
||||
await page.locator('#library [data-add="text"]').click();
|
||||
await page.getByLabel('Text', { exact: true }).fill('Dieser Absatz wurde im Editor eingefügt.');
|
||||
await page.getByRole('button', { name: 'Duplizieren', exact: true }).click();
|
||||
await page.getByLabel('Text', { exact: true }).fill('Das ist eine unabhängige Kopie.');
|
||||
await page.getByRole('button', { name: 'Nach oben verschieben', exact: true }).click();
|
||||
await page.getByRole('button', { name: 'Löschen', exact: true }).click();
|
||||
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
||||
await page.locator('#toggle-library').click();
|
||||
await page.locator(`#structure [data-toggle="${presetSection}"]`).click();
|
||||
await page.locator(`#structure [data-toggle="${galleryId}"]`).click();
|
||||
await page.getByRole('button', { name: 'Text: Dieser Absatz wurde im Editor eingefügt.', exact: true }).dragTo(page.locator('#structure [data-block-id="principles"]'));
|
||||
await page.waitForFunction(() => document.querySelector('#structure [data-block-id="principles"]')?.parentElement.textContent.includes('Dieser Absatz wurde im Editor eingefügt.'));
|
||||
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
||||
await page.locator('#toggle-library').click();
|
||||
await page.route('**/admin/api/pages/test-home/draft', route => route.abort(), { times: 1 });
|
||||
await page.getByRole('button', { name: 'Entwurf speichern', exact: true }).click();
|
||||
await page.locator('#message').filter({ hasText: 'Verbindung ist unterbrochen' }).waitFor();
|
||||
assert.equal(await page.getByRole('button', { name: 'Entwurf speichern', exact: true }).isEnabled(), true);
|
||||
checks.push({ name: 'network failure retains edits and allows retry', passed: true });
|
||||
await page.getByRole('button', { name: 'Entwurf speichern', exact: true }).click();
|
||||
await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
|
||||
const stored = await (await context.request.get(origin + '/admin/api/pages/test-home')).json();
|
||||
console.log('Draft stored.');
|
||||
assert.equal((await (await context.request.get(origin)).text()).includes('Meine bearbeitete Website'), false);
|
||||
await page.reload();
|
||||
await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
|
||||
await frame.getByRole('heading', { name: 'Meine bearbeitete Website', exact: true }).waitFor();
|
||||
const reloaded = await (await context.request.get(origin + '/admin/api/pages/test-home')).json();
|
||||
assert.deepEqual(reloaded.document, stored.document);
|
||||
await page.getByRole('button', { name: 'Veröffentlichen', exact: true }).click();
|
||||
await page.getByRole('button', { name: 'Abbrechen', exact: true }).first().focus();
|
||||
await page.keyboard.press('Escape');
|
||||
assert.equal(await page.locator('#publish-dialog').isVisible(), false);
|
||||
assert.equal(await page.locator('#publish').evaluate(element => element === document.activeElement), true);
|
||||
await page.getByRole('button', { name: 'Veröffentlichen', exact: true }).click();
|
||||
await page.getByRole('button', { name: 'Jetzt veröffentlichen', exact: true }).click();
|
||||
await page.locator('#save-status').filter({ hasText: 'Veröffentlicht' }).waitFor();
|
||||
assert.equal((await (await context.request.get(origin)).text()).includes('Meine bearbeitete Website'), true);
|
||||
const publicPage = await context.newPage();
|
||||
await publicPage.goto(origin);
|
||||
assert.equal(await publicPage.locator(`#${galleryId} img`).count(), 2);
|
||||
await publicPage.locator(`#${galleryId} img`).first().scrollIntoViewIfNeeded();
|
||||
await publicPage.waitForFunction(id => document.querySelector(`#${id} img`)?.naturalWidth > 0, galleryId);
|
||||
assert.equal(await publicPage.locator('#headline').evaluate(element => getComputedStyle(element).fontSize), '72px');
|
||||
await publicPage.setViewportSize({ width: 768, height: 1000 });
|
||||
assert.equal(await publicPage.locator('#headline').evaluate(element => getComputedStyle(element).fontSize), '52px');
|
||||
await publicPage.setViewportSize({ width: 390, height: 844 });
|
||||
assert.equal(await publicPage.locator('#headline').evaluate(element => getComputedStyle(element).fontSize), '36px');
|
||||
assert.equal(await publicPage.locator('#hero').evaluate(element => getComputedStyle(element).paddingTop), '32px');
|
||||
assert.equal(await publicPage.evaluate(() => document.documentElement.scrollWidth <= innerWidth), true);
|
||||
await publicPage.screenshot({ path: 'reports/editor/designed-public-mobile.png', fullPage: true });
|
||||
const contentAudit = await new AxeBuilder({ page: publicPage }).withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'best-practice']).analyze();
|
||||
assert.deepEqual(contentAudit.violations.map(v => v.id), []);
|
||||
checks.push({ name: 'edited public renderer accessibility', violations: 0 });
|
||||
await publicPage.close();
|
||||
checks.push({ name: 'add, duplicate, move, delete, undo, exact reload, separate publication, dialog focus', passed: true });
|
||||
console.log('Draft reload and publication passed.');
|
||||
|
||||
// A second server save must never be silently overwritten by the open editor.
|
||||
const latest = await (await context.request.get(origin + '/admin/api/pages/test-home')).json();
|
||||
const external = structuredClone(latest.document); external.title = 'Parallel gespeicherter Titel';
|
||||
const externalSave = await context.request.post(origin + '/admin/api/pages/test-home/draft', { headers: { 'X-CSRF-Token': latest.csrfToken }, data: { document: external, expectedVersion: latest.version } });
|
||||
assert.equal(externalSave.status(), 200);
|
||||
await page.locator('#select-page').click();
|
||||
await page.getByLabel('Seitentitel', { exact: true }).fill('Meine lokalen Änderungen');
|
||||
await page.getByRole('button', { name: 'Entwurf speichern', exact: true }).click();
|
||||
await page.locator('#message').filter({ hasText: 'neuerer Stand' }).waitFor();
|
||||
console.log('Conflict displayed.');
|
||||
assert.equal(await page.getByLabel('Seitentitel', { exact: true }).inputValue(), 'Meine lokalen Änderungen');
|
||||
const download = page.waitForEvent('download');
|
||||
console.log('Testing conflict export.');
|
||||
await page.getByRole('button', { name: 'Änderungen als JSON sichern' }).click();
|
||||
assert.equal((await download).suggestedFilename(), 'kant-entwurf.json');
|
||||
await page.getByRole('button', { name: 'Serverstand laden', exact: true }).click();
|
||||
await page.getByRole('button', { name: 'Serverstand übernehmen', exact: true }).click();
|
||||
await page.getByLabel('Seitentitel', { exact: true }).filter({ visible: true }).waitFor();
|
||||
await page.waitForFunction(() => document.querySelector('#property-title')?.value === 'Parallel gespeicherter Titel');
|
||||
checks.push({ name: 'conflict retains local edits, JSON export, explicit server reload', passed: true });
|
||||
|
||||
await page.locator('#structure [data-block-id="headline"]').click();
|
||||
await page.getByRole('button', { name: 'Design', exact: true }).click();
|
||||
await page.locator('#preview-status').filter({ hasText: 'Zum Auswählen' }).waitFor();
|
||||
await axe('desktop editor');
|
||||
await page.screenshot({ path: 'reports/editor/editor-desktop.png', fullPage: true });
|
||||
await page.getByRole('button', { name: 'Mobil', exact: true }).click();
|
||||
assert.equal(await page.locator('#preview').evaluate(element => Math.round(element.getBoundingClientRect().width)), 390);
|
||||
await page.screenshot({ path: 'reports/editor/editor-mobile-preview.png', fullPage: true });
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), true);
|
||||
await axe('mobile editor');
|
||||
await page.screenshot({ path: 'reports/editor/editor-phone.png', fullPage: true });
|
||||
await page.locator('#open-media-library').click();
|
||||
await page.locator('#media-status').filter({ hasText: '2 Bilder' }).waitFor();
|
||||
await axe('mobile media library');
|
||||
await page.screenshot({ path: 'reports/editor/media-phone.png', fullPage: true });
|
||||
await page.getByRole('button', { name: 'Schließen', exact: true }).click();
|
||||
assert.deepEqual(errors, []);
|
||||
await writeFile('reports/editor/result.json', JSON.stringify({ checks, publicDataUntouched: true }, null, 2));
|
||||
console.log('Editor end-to-end checks passed; isolated database, production data unchanged.');
|
||||
if (process.argv.includes('--audit')) {
|
||||
console.log('Auditing the published v3 document with responsive design, gallery images and effects.');
|
||||
await browser.close(); browser = null;
|
||||
await new Promise((resolve, reject) => {
|
||||
const audit = spawn(process.execPath, ['scripts/audit.mjs'], { windowsHide: true, stdio: 'inherit', env: { ...process.env, CMS_URL: origin, CMS_AUDIT_DIR: 'reports/lighthouse-editor' } });
|
||||
audit.on('error', reject);
|
||||
audit.on('exit', code => code === 0 ? resolve() : reject(new Error(`Designed-page audit failed (${code}).`)));
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Check failed:', error.message);
|
||||
await activePage?.screenshot({ path: 'reports/editor/failure.png', fullPage: true, timeout: 5000 }).catch(() => {});
|
||||
throw error;
|
||||
} finally {
|
||||
await browser?.close();
|
||||
server.kill();
|
||||
}
|
||||
Reference in new issue
Block a user