kantarciandClaude Fable 5.1
32ee28888e
Umut, with a card of an icon next to a text as the example: "bei Rows die Breite ändern, am besten per Drag and Drop im Editor". Rows only ever had equal columns - both the classic `columns` token and the free `gridColumns` produce `repeat(n, 1fr)`. A row now carries the free style `columnWidths`, a list of shares such as `2 1` or `66.7 33.3`, per device and without a new document schema. `StyleCompiler::columnTracks()` turns it into `grid-template-columns`, pads or cuts the shares to the number of columns, and gives a device whose layout stacks the columns a single track, because the desktop rule carries an id and would otherwise outrank the class that stacks a phone. In the editor the border between two side-by-side columns of the selected row is a handle: dragging restyles the row inline while the pointer moves and writes one undo step on release; the arrow keys nudge by five points. The design panel shows the same value as the text field "Spaltenbreiten". The Playwright editor check drags the handle with the real mouse. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
968 lines
66 KiB
JavaScript
968 lines
66 KiB
JavaScript
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());
|
|
// Jede angeforderte Skriptdatei mitschreiben. `public/.htaccess` laesst .js ein Jahr lang als
|
|
// `immutable` zwischenspeichern; eine Datei ohne Fassungskennung waere damit nach einem Update
|
|
// fuer immer veraltet - genau so brach der Editor mit "does not provide an export named ...".
|
|
const skripte = [];
|
|
page.on('request', anfrage => {
|
|
const url = new URL(anfrage.url());
|
|
if (url.pathname.startsWith('/assets/') && url.pathname.endsWith('.js')) skripte.push(url);
|
|
});
|
|
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 });
|
|
};
|
|
const tab = name => page.getByRole('tab', { name, exact: true }).click();
|
|
const treeSelect = async id => { await tab('Struktur'); await page.locator(`#structure [data-block-id="${id}"]`).click(); await page.locator(`#structure [data-edit-block="${id}"]`).click(); };
|
|
const treeToggle = async id => { await tab('Struktur'); await page.locator(`#structure [data-toggle="${id}"]`).click(); };
|
|
const addFromLibrary = async selector => { await tab('Elemente'); await page.locator(`#library ${selector}`).click(); };
|
|
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.');
|
|
|
|
// --- Die Verwaltungsnavigation ------------------------------------------------------------
|
|
// Sie steckt in einem details-Element: auf dem Telefon ein Klappmenue, am Schreibtisch die
|
|
// stehende Spalte. Am Schreibtisch ist der Schalter ausgeblendet - und ein geschlossenes
|
|
// details versteckt seinen Inhalt von sich aus. Ohne eine Regel, die ihn zurueckholt, ist die
|
|
// Navigation dort nicht bloss zugeklappt, sondern unerreichbar. Genau so ist 1.5.4 ausgeliefert
|
|
// worden, und genau das faellt hier auf.
|
|
const navigation = page.getByRole('navigation', { name: 'Verwaltung' });
|
|
const schalter = page.locator('.shell-menu > summary');
|
|
assert.equal(await schalter.isVisible(), false, 'am Schreibtisch gibt es keinen Menueschalter');
|
|
assert.equal(await navigation.isVisible(), true, 'am Schreibtisch steht die Navigation da');
|
|
const eintrag = navigation.getByRole('link', { name: 'Seiten', exact: true });
|
|
const flaeche = await eintrag.boundingBox();
|
|
assert.ok(flaeche && flaeche.height > 0 && flaeche.width > 0, 'ihre Eintraege sind anklickbar');
|
|
|
|
// Auf dem Telefon dagegen: ein Schalter, zunaechst zu, ein Klick oeffnet.
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
assert.equal(await schalter.isVisible(), true, 'auf dem Telefon gibt es den Schalter');
|
|
assert.equal(await navigation.isVisible(), false, 'und die Liste ist zunaechst zu');
|
|
await schalter.click();
|
|
assert.equal(await navigation.isVisible(), true, 'ein Klick oeffnet sie');
|
|
await page.setViewportSize({ width: 1600, height: 1100 });
|
|
checks.push({ name: 'the administration navigation is reachable on both sizes', passed: true });
|
|
console.log('Administration navigation passed.');
|
|
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.');
|
|
// Der Editor laedt fuenf Module ueber Importe, die selbst keine Fassung tragen; die
|
|
// Importkarte in base.html.twig haengt sie an. Ohne sie kaeme das alte Modul aus dem Cache.
|
|
assert.ok(skripte.some(url => url.pathname === '/assets/editor-model.js'), 'editor-model.js wird geladen');
|
|
const ohneFassung = [...new Set(skripte.filter(url => !url.searchParams.has('v')).map(url => url.pathname))];
|
|
assert.deepEqual(ohneFassung, [], `Skripte ohne Fassungskennung: ${ohneFassung.join(', ')}`);
|
|
checks.push({ name: 'every module is requested with a version key', passed: true });
|
|
console.log(`Fassungskennung an allen ${new Set(skripte.map(u => u.pathname)).size} Skriptdateien.`);
|
|
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: 'Entwurf ·' }).waitFor();
|
|
// One sidebar, contextual fields and a root insertion from a deeply selected element.
|
|
await page.reload();
|
|
await frame.locator('h1').waitFor();
|
|
await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
|
|
for (const width of [1920, 1100, 850, 390]) {
|
|
await page.setViewportSize({ width, height: 1100 });
|
|
await page.waitForTimeout(100);
|
|
assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth), true, `workspace fits ${width}`);
|
|
for (const selector of ['.sidebar', '.sidebar-body', '.library-buttons']) {
|
|
assert.equal(await page.locator(selector).first().evaluate(el => el.scrollWidth <= el.clientWidth + 1), true, `${selector} fits ${width}`);
|
|
}
|
|
}
|
|
await page.setViewportSize({ width: 1600, height: 1100 });
|
|
await frame.locator('h1').click();
|
|
const sectionCount = await frame.locator('main > .block-section').count();
|
|
await addFromLibrary('[data-add="section"]');
|
|
await page.waitForFunction(count => document.querySelector('#preview').contentDocument.querySelectorAll('main > .block-section').length === count + 1, sectionCount);
|
|
await page.locator('#undo').click();
|
|
await page.waitForFunction(count => document.querySelector('#preview').contentDocument.querySelectorAll('main > .block-section').length === count, sectionCount);
|
|
await page.locator('#redo').click();
|
|
await page.waitForFunction(count => document.querySelector('#preview').contentDocument.querySelectorAll('main > .block-section').length === count + 1, sectionCount);
|
|
await page.locator('#undo').click();
|
|
await frame.locator('h1').click();
|
|
await addFromLibrary('[data-add="image"]');
|
|
await page.locator('[data-panel="design"]').click();
|
|
assert.equal(await page.locator('#style-fontSize').count(), 0);
|
|
assert.equal(await page.locator('#style-objectFit').isVisible(), true);
|
|
await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
|
|
await page.screenshot({ path: 'reports/editor/context-image.png', fullPage: true });
|
|
await page.getByRole('button', { name: 'Alle Eigenschaften anzeigen', exact: true }).click();
|
|
assert.equal(await page.locator('#style-fontSize').count(), 1);
|
|
await page.locator('#undo').click();
|
|
await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
|
|
await frame.locator('main .block-text').first().click();
|
|
await page.locator('[data-panel="design"]').click();
|
|
assert.equal(await page.locator('#style-objectFit').count(), 0);
|
|
assert.equal(await page.locator('#style-fontSize').isVisible(), true);
|
|
const textWidth = await frame.locator('main .block-text').first().evaluate(el => ({ width: el.getBoundingClientRect().width, parent: el.parentElement.clientWidth }));
|
|
assert.ok(Math.abs(textWidth.width - textWidth.parent) < 2, 'text uses its container width');
|
|
const sizeGroup = page.locator('.design-group').filter({ has: page.locator('summary', { hasText: /^Größe$/ }) });
|
|
await sizeGroup.locator('summary').click();
|
|
await page.locator('#style-maxWidth').locator('xpath=following-sibling::select').selectOption('ch');
|
|
await page.locator('#style-maxWidth').fill('60');
|
|
await page.locator('#style-maxWidth').blur();
|
|
await page.waitForFunction(() => {
|
|
const el = document.querySelector('#preview').contentDocument.querySelector('main .block-text');
|
|
return Boolean(el && el.getBoundingClientRect().width < el.parentElement.clientWidth - 100);
|
|
});
|
|
await page.getByLabel('Maximale Breite Vorgabe', { exact: true }).selectOption('none');
|
|
await page.waitForFunction(() => {
|
|
const el = document.querySelector('#preview').contentDocument.querySelector('main .block-text');
|
|
return Boolean(el && getComputedStyle(el).maxWidth === 'none');
|
|
});
|
|
await page.locator('#undo').click();
|
|
await page.locator('#undo').click();
|
|
await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
|
|
await page.locator('.sidebar-body').evaluate(el => el.scrollTop = 0);
|
|
await page.screenshot({ path: 'reports/editor/flexible-workspace.png', fullPage: true });
|
|
await page.locator('[data-panel="content"]').click();
|
|
checks.push({ name: 'one sidebar, root sections, contextual image/text properties and full text width', passed: true });
|
|
|
|
// A layout starts empty: it must be visible, reachable and editable before it has any text.
|
|
const previewReady = () => page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
|
|
await frame.locator('h1').click();
|
|
await addFromLibrary('[data-add="section"]');
|
|
await previewReady();
|
|
const emptySection = frame.locator('main > .editor-empty-container');
|
|
await emptySection.waitFor();
|
|
const newSectionId = await emptySection.getAttribute('id');
|
|
assert.ok((await emptySection.boundingBox()).height > 100, 'new empty section has a visible hit area');
|
|
await page.screenshot({ path: 'reports/editor/empty-section.png', fullPage: true });
|
|
await frame.getByRole('button', { name: '2 Spalten in dieser Sektion anlegen', exact: true }).press('Enter');
|
|
await previewReady();
|
|
const emptyColumns = frame.locator(`#${newSectionId} .block-column`);
|
|
assert.equal(await emptyColumns.count(), 2);
|
|
for (let index = 0; index < 2; index++) assert.ok((await emptyColumns.nth(index).boundingBox()).height > 80, 'empty column has a hit area');
|
|
const secondColumnId = await emptyColumns.nth(1).getAttribute('id');
|
|
const firstColumnId = await emptyColumns.first().getAttribute('id');
|
|
await frame.getByRole('button', { name: 'Spalte 2 von 2: Inhalt hinzufügen', exact: true }).press('Enter');
|
|
assert.equal(await page.locator('#library-search').evaluate(el => el === document.activeElement), true);
|
|
assert.match(await page.locator('#insert-hint').innerText(), /Spalte 2 von 2/);
|
|
await page.locator('#library-search').fill('Text');
|
|
await addFromLibrary('[data-add="text"]');
|
|
await frame.locator(`#${secondColumnId} .block-text`).waitFor();
|
|
await previewReady();
|
|
assert.equal(await frame.locator(`#${firstColumnId} .editor-empty`).count(), 1, 'unfilled sibling stays visible');
|
|
await tab('Elemente');
|
|
await page.locator('#library-search').fill('');
|
|
const dragSource = page.locator('#library [data-add="button"]');
|
|
await frame.locator(`#${firstColumnId} .editor-empty`).scrollIntoViewIfNeeded();
|
|
await dragSource.scrollIntoViewIfNeeded();
|
|
const sourceBox = await dragSource.boundingBox();
|
|
let targetBox = await frame.locator(`#${firstColumnId} .editor-empty`).boundingBox();
|
|
await page.mouse.move(sourceBox.x + sourceBox.width / 2, sourceBox.y + sourceBox.height / 2);
|
|
await page.mouse.down();
|
|
await page.mouse.move(sourceBox.x + sourceBox.width / 2 + 10, sourceBox.y + sourceBox.height / 2, { steps: 3 });
|
|
await page.mouse.move(targetBox.x + targetBox.width / 2, targetBox.y + targetBox.height / 2, { steps: 10 });
|
|
// Chromium dispatches dragenter on the first move into a target, dragover on the next.
|
|
await page.mouse.move(targetBox.x + targetBox.width / 2, targetBox.y + targetBox.height / 2);
|
|
await page.locator('.ov-drop-label').filter({ hasText: 'Spalte 1 von 2' }).waitFor();
|
|
await page.screenshot({ path: 'reports/editor/empty-layout-drag.png', fullPage: true });
|
|
const beforeDragScroll = await page.locator('#preview').evaluate(el => el.contentWindow.scrollY);
|
|
const frameBox = await page.locator('#preview').boundingBox();
|
|
await page.mouse.move(frameBox.x + 50, frameBox.y + frameBox.height - 8, { steps: 5 });
|
|
await page.mouse.move(frameBox.x + 50, frameBox.y + frameBox.height - 8);
|
|
await page.waitForFunction(top => document.querySelector('#preview').contentWindow.scrollY > top + 10, beforeDragScroll);
|
|
await page.mouse.move(frameBox.x + 50, frameBox.y + frameBox.height / 2);
|
|
await page.mouse.move(frameBox.x + 50, frameBox.y + frameBox.height / 2);
|
|
await frame.locator(`#${firstColumnId} .editor-empty`).scrollIntoViewIfNeeded();
|
|
targetBox = await frame.locator(`#${firstColumnId} .editor-empty`).boundingBox();
|
|
await page.mouse.move(targetBox.x + targetBox.width / 2, targetBox.y + targetBox.height / 2, { steps: 6 });
|
|
await page.mouse.move(targetBox.x + targetBox.width / 2, targetBox.y + targetBox.height / 2);
|
|
await page.mouse.up();
|
|
await frame.locator(`#${firstColumnId} .button`).waitFor();
|
|
assert.equal(await frame.locator(`#${newSectionId} .editor-empty`).count(), 0, 'placeholders disappear after filling');
|
|
await page.locator('#undo').click(); await previewReady();
|
|
assert.equal(await frame.locator(`#${firstColumnId} .editor-empty`).count(), 1, 'undo restores the empty target');
|
|
await page.locator('#redo').click(); await previewReady();
|
|
await frame.locator(`#${firstColumnId} .button`).waitFor();
|
|
await page.locator('#undo').click(); await previewReady();
|
|
await page.locator('#undo').click(); await previewReady();
|
|
await page.screenshot({ path: 'reports/editor/empty-layout-desktop.png', fullPage: true });
|
|
await page.getByRole('button', { name: 'Mobil', exact: true }).click();
|
|
await frame.getByRole('button', { name: 'Spalte 2 von 2: Inhalt hinzufügen', exact: true }).scrollIntoViewIfNeeded();
|
|
await page.screenshot({ path: 'reports/editor/empty-layout-mobile.png', fullPage: true });
|
|
await page.getByRole('button', { name: 'Desktop', exact: true }).click();
|
|
await page.locator('#save').click();
|
|
await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
|
|
await page.reload(); await previewReady();
|
|
assert.equal(await frame.locator(`#${newSectionId} .editor-empty`).count(), 2, 'saved empty columns survive reload');
|
|
for (const device of ['Desktop', 'Mobil']) {
|
|
await page.getByRole('button', { name: device, exact: true }).click();
|
|
const destination = frame.locator(`#${secondColumnId}`);
|
|
await destination.scrollIntoViewIfNeeded();
|
|
const box = await destination.boundingBox();
|
|
await tab('Struktur');
|
|
await page.locator(`#structure [data-block-id="${firstColumnId}"]`).dragTo(destination, {
|
|
targetPosition: device === 'Desktop' ? { x: box.width - 8, y: 8 } : { x: 8, y: box.height - 8 },
|
|
});
|
|
await previewReady();
|
|
assert.equal(await frame.locator(`#${newSectionId} .block-column`).first().getAttribute('id'), secondColumnId, `column order follows the ${device} layout`);
|
|
await page.locator('#undo').click(); await previewReady();
|
|
assert.equal(await frame.locator(`#${newSectionId} .block-column`).first().getAttribute('id'), firstColumnId);
|
|
}
|
|
await page.getByRole('button', { name: 'Desktop', exact: true }).click();
|
|
// Umut: "bei Rows die Breite ändern, am besten per Drag and Drop im Editor". The border
|
|
// between the two columns is a handle; dragging it to the right widens the first column.
|
|
await treeSelect(firstColumnId);
|
|
await frame.locator(`#${firstColumnId}`).scrollIntoViewIfNeeded();
|
|
const resizeHandle = page.locator('.ov-resize');
|
|
await resizeHandle.waitFor();
|
|
assert.equal(await resizeHandle.count(), 1, 'two columns have one border to drag');
|
|
const columnTracks = () => frame.locator(`#${newSectionId} .block-row`).first().evaluate(el => getComputedStyle(el).gridTemplateColumns.split(' ').map(Number.parseFloat));
|
|
const evenTracks = await columnTracks();
|
|
assert.ok(Math.abs(evenTracks[0] - evenTracks[1]) < 2, `columns start out equal: ${evenTracks}`);
|
|
const handleBox = await resizeHandle.boundingBox();
|
|
await page.mouse.move(handleBox.x + handleBox.width / 2, handleBox.y + handleBox.height / 2);
|
|
await page.mouse.down();
|
|
await page.mouse.move(handleBox.x + handleBox.width / 2 + 120, handleBox.y + handleBox.height / 2, { steps: 8 });
|
|
await page.mouse.up();
|
|
await previewReady();
|
|
const widenedTracks = await columnTracks();
|
|
assert.ok(widenedTracks[0] > widenedTracks[1] * 1.3, `dragging the border widened the first column: ${widenedTracks}`);
|
|
await page.screenshot({ path: 'reports/editor/column-widths.png', fullPage: true });
|
|
// The same value is visible as numbers in the design panel of the row.
|
|
await treeSelect(await frame.locator(`#${newSectionId} .block-row`).first().getAttribute('id'));
|
|
await page.getByRole('button', { name: 'Design', exact: true }).click();
|
|
const layoutGroup = page.locator('.design-group').filter({ has: page.locator('summary', { hasText: 'Layout' }) }).first();
|
|
if (!(await layoutGroup.evaluate(element => element.open))) await layoutGroup.locator('summary').click();
|
|
assert.match(await page.locator('#style-columnWidths').inputValue(), /^\d+(\.\d)? \d+(\.\d)?$/, 'shares are stored per column');
|
|
// On a phone the columns stack, so there is no border to drag - and one undo restores equal columns.
|
|
await page.getByRole('button', { name: 'Mobil', exact: true }).click();
|
|
await treeSelect(firstColumnId);
|
|
await page.waitForFunction(() => document.querySelectorAll('.ov-resize').length === 0);
|
|
await page.getByRole('button', { name: 'Desktop', exact: true }).click();
|
|
await page.locator('#undo').click(); await previewReady();
|
|
const restoredTracks = await columnTracks();
|
|
assert.ok(Math.abs(restoredTracks[0] - restoredTracks[1]) < 2, `undo restores equal columns: ${restoredTracks}`);
|
|
const savedEmptyDraft = await page.evaluate(async () => (await (await fetch(document.querySelector('#editor').dataset.api)).json()).document);
|
|
assert.equal(JSON.stringify(savedEmptyDraft).includes('editor-empty'), false, 'editing aids never enter content');
|
|
const publicBefore = await (await fetch(origin)).text();
|
|
assert.equal(publicBefore.includes(newSectionId), false, 'draft remains private');
|
|
await page.locator('#publish').click(); await page.locator('#confirm-publish').click();
|
|
await page.locator('#save-status').filter({ hasText: 'Veröffentlicht' }).waitFor();
|
|
const publishedEmpty = await (await fetch(origin)).text();
|
|
assert.ok(publishedEmpty.includes(newSectionId));
|
|
assert.equal(/editor-empty|data-editor-target|preview-containers|preview\.css|Inhalt hinzufügen/.test(publishedEmpty), false, 'public output has no editor aids');
|
|
// Restore the fixture through the same editor actions; subsequent tests retain their baseline.
|
|
await treeSelect(newSectionId);
|
|
await page.locator('#delete').click();
|
|
await page.locator('#save').click();
|
|
await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
|
|
await page.locator('#publish').click(); await page.locator('#confirm-publish').click();
|
|
await page.locator('#save-status').filter({ hasText: 'Veröffentlicht' }).waitFor();
|
|
await page.reload(); await previewReady();
|
|
checks.push({ name: 'empty sections and columns: keyboard insertion, exact drop target, undo, responsive preview, reload and public isolation', passed: true });
|
|
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 });
|
|
|
|
// --- Die Vorschau als Arbeitsflaeche -------------------------------------------------------
|
|
// Rahmen, Werkzeugleiste am Element, Einfuegepunkte und Ziehen aus dem Werkzeugkasten.
|
|
const inPreview = selector => page.evaluate(
|
|
sel => document.querySelector('#preview').contentDocument?.querySelector(sel)?.id ?? null, selector);
|
|
await frame.locator('h1').click();
|
|
await page.locator('.ov-select').waitFor({ state: 'visible' });
|
|
assert.equal(await page.locator('.ov-toolbar-name').innerText(), 'Überschrift');
|
|
await page.getByRole('toolbar', { name: 'Aktionen für das gewählte Element' }).waitFor();
|
|
// Die Leiste benennt das Element, auf das sie wirkt - sonst haette sie denselben Namen wie
|
|
// die gleichnamige Schaltflaeche in der Seitenleiste.
|
|
await page.getByRole('button', { name: 'Überschrift duplizieren', exact: true }).waitFor();
|
|
await page.getByRole('button', { name: 'Element über Überschrift auswählen', exact: true }).click();
|
|
assert.notEqual(await page.locator('#properties-title').innerText(), 'Überschrift');
|
|
|
|
// Einfuegepunkt: das naechste Element landet genau dort und nicht am Ende.
|
|
await frame.locator('h1').click();
|
|
const headingId = await inPreview('h1');
|
|
await page.getByRole('button', { name: 'Element dahinter einfügen', exact: true }).click();
|
|
await page.locator('#insert-hint').waitFor({ state: 'visible' });
|
|
await addFromLibrary('button[data-add="text"]');
|
|
assert.equal(await page.locator('#properties-title').innerText(), 'Text');
|
|
assert.equal(await page.locator('#insert-hint').isVisible(), false);
|
|
await page.waitForFunction(id => {
|
|
const next = document.querySelector('#preview').contentDocument?.querySelector(`#${id}`)?.nextElementSibling;
|
|
return Boolean(next?.classList.contains('block-text'));
|
|
}, headingId);
|
|
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
|
|
|
// Ziehen aus dem Werkzeugkasten auf die Seite.
|
|
await frame.locator('h1').waitFor();
|
|
const beforeButtons = await page.locator('#structure [data-block-id]').count();
|
|
await tab('Elemente');
|
|
await page.locator('#library button[data-add="button"]').dragTo(frame.locator('h1'), { targetPosition: { x: 12, y: 4 } });
|
|
await page.waitForFunction(count => document.querySelectorAll('#structure [data-block-id]').length === count + 1, beforeButtons);
|
|
assert.equal(await page.locator('#properties-title').innerText(), 'Button');
|
|
// Oben abgelegt heisst davor, nicht dahinter.
|
|
await page.waitForFunction(id => {
|
|
const previous = document.querySelector('#preview').contentDocument?.querySelector(`#${id}`)?.previousElementSibling;
|
|
return Boolean(previous?.classList.contains('button'));
|
|
}, headingId);
|
|
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
|
await page.waitForFunction(count => document.querySelectorAll('#structure [data-block-id]').length === count, beforeButtons);
|
|
checks.push({ name: 'canvas toolbar, insert points and drag from the toolbox', passed: true });
|
|
await page.screenshot({ path: 'reports/editor/canvas-overlay.png' });
|
|
// --- Der Werkzeugkasten kennt den Zusammenhang ---------------------------------------------
|
|
// Eine Zeile kommt nicht aus dem Nichts, und eine Spalte gehoert in eine Zeile.
|
|
const toolboxState = type => page.evaluate(selector => {
|
|
const button = document.querySelector(selector);
|
|
return button ? { disabled: button.disabled, title: button.title } : null;
|
|
}, `#library button[data-add="${type}"]:not([data-row])`);
|
|
const rowState = () => page.evaluate(() => {
|
|
const button = document.querySelector('#library button[data-row="2"]');
|
|
return { disabled: button.disabled, title: button.title };
|
|
});
|
|
|
|
await page.locator('#select-page').click();
|
|
assert.equal((await toolboxState('column')).disabled, true, 'Spalte ohne Zeile gesperrt');
|
|
assert.match((await toolboxState('column')).title, /gehört in Zeile/);
|
|
assert.equal((await rowState()).disabled, true, 'Zeile ohne Sektion gesperrt');
|
|
assert.match((await rowState()).title, /gehört in eine Sektion/);
|
|
assert.equal((await toolboxState('section')).disabled, false, 'Sektion geht immer');
|
|
|
|
// In einer Sektion wird die Zeile moeglich, die Spalte noch nicht. Die Sektion kommt aus dem
|
|
// Strukturbaum, nicht aus der Vorschau: dort steht auch der Kopfbereich, und der gehoert
|
|
// einem anderen Dokument.
|
|
await tab('Struktur');
|
|
await page.locator('#structure .tree-item').filter({ hasText: 'Sektion' }).first().click();
|
|
assert.equal(await page.locator('#properties-title').textContent(), 'Sektion');
|
|
assert.equal((await rowState()).disabled, false, 'Zeile in der Sektion moeglich');
|
|
assert.equal((await toolboxState('column')).disabled, true, 'Spalte in der Sektion weiterhin gesperrt');
|
|
|
|
// Und in der Zeile wird die Spalte moeglich.
|
|
const columnsBefore = await page.locator('#structure .tree-item').filter({ hasText: 'Spalte' }).count();
|
|
await addFromLibrary('button[data-row="3"]');
|
|
assert.equal(await page.locator('#properties-title').textContent(), 'Zeile');
|
|
assert.equal((await toolboxState('column')).disabled, false, 'Spalte in der Zeile moeglich');
|
|
assert.match((await toolboxState('column')).title, /Wird in Zeile eingefügt/);
|
|
// Die Zeile bringt ihre drei Spalten mit. Die Testseite hat schon welche, also zaehlt die
|
|
// Differenz.
|
|
assert.equal(await page.locator('#structure .tree-item').filter({ hasText: 'Spalte' }).count(), columnsBefore + 3);
|
|
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
|
// Jeder Eintrag traegt eine Zeichnung statt eines Schriftzeichens.
|
|
await tab('Elemente');
|
|
const mitBild = await page.locator('#library button .library-preview svg').count();
|
|
const knoepfe = await page.locator('#library button').count();
|
|
assert.equal(mitBild, knoepfe, `alle ${knoepfe} Eintraege haben ein Vorschaubild`);
|
|
|
|
// Die Suche greift ueber alle Gruppen und blendet leere Gruppen aus.
|
|
await page.locator('#library-search').fill('galerie');
|
|
await page.locator('#library-found').filter({ hasText: 'von' }).waitFor();
|
|
assert.equal(await page.locator('#library button:visible').count(), 1, 'genau die Galerie bleibt');
|
|
assert.equal(await page.locator('#library .library-group:visible').count(), 1, 'nur ihre Gruppe bleibt');
|
|
// Auch der Gruppenname findet: "Aufbau" gehoert zu Sektion, Zeile und Spalte.
|
|
await page.locator('#library-search').fill('aufbau');
|
|
assert.equal(await page.locator('#library button:visible').count(), 5, 'Sektion, drei Zeilen, Spalte');
|
|
await page.locator('#library-search').fill('gibtesnicht');
|
|
await page.locator('#library-found').filter({ hasText: 'Kein Element' }).waitFor();
|
|
await page.locator('#library-search').fill('');
|
|
assert.equal(await page.locator('#library button:visible').count(), knoepfe, 'leere Suche zeigt wieder alles');
|
|
|
|
checks.push({ name: 'the toolbox follows the structure', passed: true });
|
|
await page.screenshot({ path: 'reports/editor/toolbox.png' });
|
|
console.log('Context aware toolbox passed.');
|
|
|
|
// Zurueck in den Zustand, den dieser Abschnitt vorgefunden hat: die folgenden Pruefungen
|
|
// setzen eine bestehende Auswahl voraus.
|
|
await frame.getByRole('heading', { name: 'Meine bearbeitete Website', exact: true }).click();
|
|
await page.locator('#duplicate:not([disabled])').waitFor();
|
|
console.log('Canvas overlay, insert points and drag and drop passed.');
|
|
|
|
// Die Vorschau darf nie sichtbar sein, solange ihre Gestaltung fehlt. Vorher hing das Anwenden
|
|
// am Ladeereignis des Rahmens - und das feuert erst, wenn das letzte Bild geladen ist. Auf der
|
|
// nachgebauten Startseite von kant-it.de stand die Vorschau dadurch 1440 ms lang mit falschen
|
|
// Farben da: schwarze Knöpfe statt roter.
|
|
const beobachtung = page.evaluate(async () => {
|
|
const rahmen = document.getElementById('preview');
|
|
const verlauf = [];
|
|
let ungestylt = 0;
|
|
// Zweierlei wird festgehalten: dass der Rahmen ueberhaupt verdeckt wird, waehrend das neue
|
|
// Dokument entsteht - und ob er je sichtbar war, ohne seine Gestaltung zu haben.
|
|
new MutationObserver(() => verlauf.push(rahmen.style.visibility || 'sichtbar'))
|
|
.observe(rahmen, { attributes: true, attributeFilter: ['style'] });
|
|
const bis = performance.now() + 5000;
|
|
while (performance.now() < bis) {
|
|
const doc = rahmen.contentDocument;
|
|
if ('visible' === getComputedStyle(rahmen).visibility
|
|
&& doc?.getElementById('kant-styles')
|
|
&& 0 === (doc.adoptedStyleSheets ?? []).length) {
|
|
ungestylt++;
|
|
}
|
|
await new Promise(r => setTimeout(r, 30));
|
|
}
|
|
return { verlauf, ungestylt };
|
|
});
|
|
await page.click('#duplicate');
|
|
const { verlauf, ungestylt } = await beobachtung;
|
|
assert.equal(ungestylt, 0, 'Die Vorschau war sichtbar, bevor ihre Gestaltung angewandt war.');
|
|
// Der Rahmen muss verdeckt worden und danach wieder sichtbar geworden sein. Ohne diese Prüfung
|
|
// hinge der Nachweis am Zufall: auf einer kleinen Seite ist das Fenster zu kurz, um es zu
|
|
// treffen - auf der nachgebauten Startseite von kant-it.de war es 1440 ms lang.
|
|
assert.ok(verlauf.includes('hidden'), 'Die Vorschau wird beim Aufbau nicht verdeckt.');
|
|
assert.equal(verlauf[verlauf.length - 1], 'sichtbar', 'Die Vorschau bleibt verdeckt.');
|
|
await page.click('#undo');
|
|
await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
|
|
checks.push({ name: 'preview never shows unstyled content', passed: true });
|
|
console.log('Preview edits and history passed.');
|
|
|
|
await tab('Struktur');
|
|
await page.getByRole('button', { name: 'Einklappen', exact: true }).click();
|
|
assert.equal(await page.locator('#structure .tree-item').count(), 3);
|
|
await page.getByLabel('Element auf der Seite 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 auf der Seite 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();
|
|
// Enter in the tree only selects; editing is the button next to the selected row.
|
|
await page.locator('#structure [data-edit-block="headline"]').click();
|
|
await page.getByRole('button', { name: 'Design', exact: true }).click();
|
|
|
|
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 });
|
|
};
|
|
// Free values: a number plus a unit, not a fixed list. Filling and blurring fires the change.
|
|
const setLength = async (id, value, unit = 'px') => {
|
|
await page.locator(`#${id}`).fill(String(value));
|
|
await page.locator(`#${id}`).blur();
|
|
if (unit !== 'px') await page.locator(`#${id}`).locator('xpath=following-sibling::select').selectOption(unit);
|
|
};
|
|
const openGroup = async name => {
|
|
const group = page.locator('.design-group').filter({ has: page.locator('summary', { hasText: name }) });
|
|
if (!(await group.first().evaluate(element => element.open))) await group.first().locator('summary').click();
|
|
};
|
|
|
|
await setLength('style-fontSize', 72);
|
|
await frameValue('#headline', 'fontSize', '72px');
|
|
assert.equal(await page.locator('#preview').evaluate(element => element.contentWindow.innerWidth), 1240);
|
|
|
|
// Tablet and mobile inherit until they get an own value, and a reset makes them inherit again.
|
|
await page.getByRole('button', { name: 'Tablet', exact: true }).click();
|
|
await frameValue('#headline', 'fontSize', '72px');
|
|
await setLength('style-fontSize', 52);
|
|
await frameValue('#headline', 'fontSize', '52px');
|
|
await page.getByRole('button', { name: 'Mobil', exact: true }).click();
|
|
await frameValue('#headline', 'fontSize', '52px');
|
|
await setLength('style-fontSize', 36);
|
|
await frameValue('#headline', 'fontSize', '36px');
|
|
await page.getByRole('button', { name: 'Mobil 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');
|
|
|
|
// A single value can be reset on its own, without touching the rest of the device.
|
|
await page.getByLabel('Ausrichtung', { exact: true }).selectOption('center');
|
|
await frameValue('#headline', 'textAlign', 'center');
|
|
await page.getByRole('button', { name: 'Ausrichtung zurücksetzen', exact: true }).click();
|
|
await frameValue('#headline', 'textAlign', 'start');
|
|
await page.getByRole('button', { name: 'Desktop', exact: true }).click();
|
|
await frameValue('#headline', 'fontSize', '72px');
|
|
|
|
// Colours: a palette reference resolves to the theme variable, a hex value is taken as it is.
|
|
await page.locator('#style-color').click();
|
|
await page.locator('#style-color-choices [data-color="@link"]').click();
|
|
await frameValue('#headline', 'color', 'rgb(164, 81, 15)');
|
|
const contrast = page.locator('.contrast-note');
|
|
await contrast.waitFor();
|
|
assert.match(await contrast.textContent(), /Kontrast \d/, 'The panel reports a contrast ratio.');
|
|
|
|
// Per side spacing on the section, and a hover rule that also covers keyboard focus.
|
|
await treeSelect('hero');
|
|
await page.getByRole('button', { name: 'Design', exact: true }).click();
|
|
await setLength('style-padding-top', 96);
|
|
await frameValue('#hero', 'paddingTop', '96px');
|
|
await page.getByRole('button', { name: 'Mobil', exact: true }).click();
|
|
await setLength('style-padding-top', 32);
|
|
await frameValue('#hero', 'paddingTop', '32px');
|
|
await page.getByRole('button', { name: 'Desktop', exact: true }).click();
|
|
|
|
// --- Die Optionen selbst ------------------------------------------------------------------
|
|
// Geraetechips je Option, Abstandsrahmen mit Kette, Ziehfeld.
|
|
|
|
// Der Chip zeigt, wo ein abweichender Wert liegt: Innenabstand hat oben gerade Desktop und
|
|
// Mobil bekommen, Tablet nicht.
|
|
const chip = device => page.locator(`#style-padding-unit`).locator('xpath=ancestor::div[contains(@class,"side-wrap")]/preceding-sibling::div[contains(@class,"design-side-head")][1]')
|
|
.locator(`.device-chip[data-device="${device}"]`);
|
|
await chip('desktop').waitFor();
|
|
assert.equal(await chip('desktop').evaluate(el => el.classList.contains('device-chip-own')), true, 'Desktop hat einen eigenen Innenabstand');
|
|
assert.equal(await chip('mobile').evaluate(el => el.classList.contains('device-chip-own')), true, 'Mobil hat einen eigenen Innenabstand');
|
|
assert.equal(await chip('tablet').evaluate(el => el.classList.contains('device-chip-own')), false, 'Tablet erbt');
|
|
assert.equal(await chip('desktop').getAttribute('aria-pressed'), 'true', 'Desktop ist die bearbeitete Groesse');
|
|
|
|
// Ein Klick auf den Chip wechselt Bedienfeld und Vorschau zusammen.
|
|
await chip('mobile').click();
|
|
assert.equal(await page.locator('[data-viewport="mobile"]').getAttribute('aria-pressed'), 'true');
|
|
await chip('desktop').click();
|
|
assert.equal(await page.locator('[data-viewport="desktop"]').getAttribute('aria-pressed'), 'true');
|
|
|
|
// Der Rahmen aendert ohne Kette nur die eine Seite.
|
|
await setLength('style-padding-left', 24);
|
|
await frameValue('#hero', 'paddingLeft', '24px');
|
|
await frameValue('#hero', 'paddingRight', '0px');
|
|
// Mit Kette werden alle vier gleichgezogen.
|
|
await page.locator('.side-link').first().click();
|
|
assert.equal(await page.locator('.side-link').first().getAttribute('aria-pressed'), 'true');
|
|
await setLength('style-padding-top', 40);
|
|
for (const seite of ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft']) await frameValue('#hero', seite, '40px');
|
|
await page.locator('.side-link').first().click();
|
|
|
|
// Die gemeinsame Einheit schreibt die gesetzten Seiten um, ohne Zahlen zu verlieren.
|
|
await page.locator('#style-padding-unit').selectOption('rem');
|
|
await frameValue('#hero', 'paddingTop', '640px');
|
|
|
|
// Das Ziehfeld: seitwaerts ziehen aendert den Wert, und der ganze Zug ist ein Undo-Schritt.
|
|
await treeSelect('headline');
|
|
await openGroup('Typografie');
|
|
const scrub = page.locator('#style-fontSize');
|
|
await scrub.scrollIntoViewIfNeeded();
|
|
const box = await scrub.boundingBox();
|
|
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
|
await page.mouse.down();
|
|
await page.mouse.move(box.x + box.width / 2 + 20, box.y + box.height / 2, { steps: 10 });
|
|
await page.mouse.up();
|
|
const gezogen = Number(await scrub.inputValue());
|
|
assert.equal(gezogen, 92, `Ziehen um 20 px erhoeht 72 auf 92, gemessen: ${gezogen}`);
|
|
await frameValue('#headline', 'fontSize', '92px');
|
|
await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
|
|
await frameValue('#headline', 'fontSize', '72px');
|
|
checks.push({ name: 'device chips, spacing box and scrub fields', passed: true });
|
|
|
|
// Aufraeumen: dieser Abschnitt hat den Innenabstand des Hero auf 40rem an allen Seiten
|
|
// gebracht. Das drueckt die Spaltenbreite auf null, und alles Folgende haette unsichtbare
|
|
// Inhalte gepruef. Zurueck auf den Zustand von vorher: 96 px oben, sonst nichts.
|
|
await treeSelect('hero');
|
|
await page.getByRole('button', { name: 'Design', exact: true }).click();
|
|
await page.locator('#style-padding-unit').selectOption('px');
|
|
for (const seite of ['right', 'bottom', 'left']) await setLength(`style-padding-${seite}`, '');
|
|
await setLength('style-padding-top', 96);
|
|
await frameValue('#hero', 'paddingTop', '96px');
|
|
await frameValue('#hero', 'paddingLeft', '0px');
|
|
await openGroup('Abstand');
|
|
await page.locator('#style-padding-top').scrollIntoViewIfNeeded();
|
|
await page.screenshot({ path: 'reports/editor/options.png' });
|
|
console.log('Per option device chips, spacing box and scrub fields passed.');
|
|
|
|
// The background group is collapsed by default, and the readable field next to the swatch is
|
|
// what a person types into.
|
|
await openGroup('Hintergrund');
|
|
await page.locator('#style-backgroundColor-hover').click();
|
|
const hoverColor = page.locator('#style-backgroundColor-hover-hex');
|
|
await hoverColor.fill('#112233');
|
|
await hoverColor.press('Enter');
|
|
// The preview carries its stylesheet as template text, applied by the editor as a constructed
|
|
// stylesheet; the hover rule has to arrive through that path, not as a style element.
|
|
await page.waitForFunction(() => {
|
|
const doc = document.querySelector('#preview').contentDocument;
|
|
const template = doc?.getElementById('kant-styles')?.content.textContent ?? '';
|
|
const adopted = [...(doc?.adoptedStyleSheets ?? [])].some(sheet => [...sheet.cssRules].some(rule => rule.selectorText?.includes('#hero:hover')));
|
|
return template.includes('#hero:hover,#hero:focus-within') && adopted;
|
|
});
|
|
checks.push({ name: 'free styles: units, inheritance, single reset, palette colour, per-side spacing, hover rule', passed: true });
|
|
|
|
await tab('Elemente');
|
|
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();
|
|
// The preset carries its own responsive tokens: one column on mobile, two from tablet up.
|
|
await page.getByRole('button', { name: 'Mobil', exact: true }).click();
|
|
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 treeSelect('headline');
|
|
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 addFromLibrary('[data-add="gallery"]');
|
|
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 treeSelect(imageId);
|
|
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 treeSelect(galleryId);
|
|
await page.getByRole('button', { name: 'Design', exact: true }).click();
|
|
await openGroup('Layout');
|
|
await page.locator('#style-gridColumns').fill('2');
|
|
await page.locator('#style-gridColumns').blur();
|
|
const columnsOfGallery = async expected => {
|
|
await page.waitForFunction(({ id, expected }) => {
|
|
const doc = document.querySelector('#preview').contentDocument;
|
|
const element = doc?.querySelector(`#${id}`);
|
|
return element && doc.defaultView.getComputedStyle(element).gridTemplateColumns.split(' ').length === expected;
|
|
}, { id: galleryId, expected });
|
|
};
|
|
await columnsOfGallery(2);
|
|
// Motion presets are keyframes, which the free system cannot express, so they stay available.
|
|
await openGroup('Bewegung und Effekte');
|
|
await page.getByLabel('Schatten', { exact: true }).selectOption('soft');
|
|
await page.getByLabel('Hover-Effekt', { exact: true }).selectOption('lift');
|
|
for (const [effect, transform] of [['left', 'translateX(-56px)'], ['right', 'translateX(56px)']]) {
|
|
await page.getByLabel('Einblendung beim Erscheinen', { exact: true }).selectOption(effect);
|
|
await frame.locator(`#${galleryId}.fx-entrance-${effect}`).waitFor();
|
|
await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
|
|
await page.evaluate(id => {
|
|
const element = document.querySelector('#preview').contentDocument.getElementById(id);
|
|
window.observedEntrance = [];
|
|
const animate = element.animate.bind(element);
|
|
element.animate = (frames, options) => { window.observedEntrance.push(frames); return animate(frames, options); };
|
|
element.scrollIntoView();
|
|
}, galleryId);
|
|
await page.getByRole('button', { name: 'Bewegung in der Vorschau abspielen', exact: true }).click();
|
|
await page.waitForFunction(() => window.observedEntrance.length > 0);
|
|
assert.equal(await page.evaluate(() => window.observedEntrance[0][0].transform), transform);
|
|
await page.getByRole('button', { name: 'Bewegung in der Vorschau stoppen', exact: true }).click();
|
|
}
|
|
// Default setting: the preview plays even when the browser asks for less motion (Flatsome mode).
|
|
await page.emulateMedia({ reducedMotion: 'reduce' });
|
|
await page.evaluate(() => { window.observedEntrance = []; });
|
|
await page.getByRole('button', { name: 'Bewegung in der Vorschau abspielen', exact: true }).click();
|
|
await page.waitForFunction(() => window.observedEntrance.length > 0);
|
|
assert.equal(await page.locator('#motion-status').isVisible(), false, 'no motion note while the site ignores the preference');
|
|
await page.getByRole('button', { name: 'Bewegung in der Vorschau stoppen', exact: true }).click();
|
|
// Setting "Browservorgabe beachten", as the preview would carry it: nothing plays, the note shows.
|
|
await page.evaluate(() => { document.querySelector('#preview').contentDocument.documentElement.classList.add('motion-respect'); window.observedEntrance = []; });
|
|
await page.emulateMedia({ reducedMotion: 'no-preference' });
|
|
await page.waitForTimeout(200);
|
|
await page.emulateMedia({ reducedMotion: 'reduce' });
|
|
await page.locator('#motion-status').waitFor({ state: 'visible' });
|
|
await page.getByRole('button', { name: 'Bewegung in der Vorschau abspielen', exact: true }).click();
|
|
await page.waitForTimeout(800);
|
|
assert.equal(await page.evaluate(() => window.observedEntrance.length), 0, 'reduced motion suppresses entrance playback when respected');
|
|
await page.getByRole('button', { name: 'Bewegung in der Vorschau stoppen', exact: true }).click();
|
|
await page.emulateMedia({ reducedMotion: 'no-preference' });
|
|
await page.locator('#motion-status').waitFor({ state: 'hidden' });
|
|
checks.push({ name: 'distinct left/right entrance playback, Flatsome-mode playback and respected reduced motion in the sandbox', passed: true });
|
|
await page.getByLabel('Einblendung beim Erscheinen', { exact: true }).selectOption('rise');
|
|
await frame.locator(`#${galleryId}.fx-entrance-rise`).waitFor();
|
|
await page.getByRole('button', { name: 'Mobil', exact: true }).click();
|
|
await openGroup('Layout');
|
|
await page.locator('#style-gridColumns').fill('1');
|
|
await page.locator('#style-gridColumns').blur();
|
|
await columnsOfGallery(1);
|
|
await page.getByRole('button', { name: 'Desktop', exact: true }).click();
|
|
await columnsOfGallery(2);
|
|
await page.emulateMedia({ reducedMotion: 'reduce' });
|
|
await frameValue(`#${galleryId}`, 'animationName', 'none');
|
|
await frameValue(`#${galleryId}`, 'transform', 'none');
|
|
await page.emulateMedia({ reducedMotion: 'no-preference' });
|
|
await (await tab('Elemente'), 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 treeSelect('headline');
|
|
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 addFromLibrary('[data-add="text"]');
|
|
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 treeToggle(presetSection);
|
|
await treeToggle(galleryId);
|
|
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.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), [], JSON.stringify(contentAudit.violations.map(v => ({ id: v.id, nodes: v.nodes.map(n => ({ target: n.target, summary: n.failureSummary?.split('\n')[1] })) })), null, 1));
|
|
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 });
|
|
|
|
// Every management screen, not just the page list: they carry tables, disclosures and now the
|
|
// media grid, and none of that was ever checked automatically before.
|
|
for (const [name, path] of [
|
|
['user administration', '/admin/benutzer'],
|
|
['own account', '/admin/konto'],
|
|
['media library', '/admin/media'],
|
|
['menus', '/admin/menus'],
|
|
['forms', '/admin/forms'],
|
|
['statistics', '/admin/statistik'],
|
|
['system and update', '/admin/system'],
|
|
['areas', '/admin/partials'],
|
|
['design', '/admin/theme'],
|
|
['settings', '/admin/settings'],
|
|
]) {
|
|
await page.goto(origin + path);
|
|
assert.equal(new URL(page.url()).pathname, path, path);
|
|
await axe(name);
|
|
}
|
|
// The media screen renders its images itself, so the library has to be visible without the dialog.
|
|
await page.goto(origin + '/admin/media');
|
|
assert.equal(await page.locator('.library-tile').count(), 2);
|
|
// The drop area is an enhancement of a real file input: choosing files has to reach the input
|
|
// and be named back to the user. Nothing is submitted here.
|
|
await page.locator('#files').setInputFiles(fixture.images);
|
|
await page.locator('[data-chosen]').filter({ hasText: '2 Datei(en) gewählt' }).waitFor();
|
|
await page.screenshot({ path: 'reports/editor/media-screen.png', fullPage: true });
|
|
checks.push({ name: 'management screens reachable, media library rendered as a page', passed: true });
|
|
|
|
// The consent question, switched on the way an administrator would switch it on, and then
|
|
// looked at from a visitor's browser: the banner has to appear, and the embed must not load.
|
|
await page.goto(origin + '/admin/settings');
|
|
await page.getByLabel('Einwilligungshinweis anzeigen', { exact: true }).check();
|
|
await page.getByLabel('Adresse der Datenschutzseite', { exact: true }).fill('grundlagen');
|
|
await page.getByRole('button', { name: 'Einstellungen speichern', exact: true }).click();
|
|
await page.locator('.notice.ok').waitFor();
|
|
|
|
// A page with an embed, added through the API so the check stays about consent, not the editor.
|
|
const forEmbed = await (await context.request.get(origin + '/admin/api/pages/test-projektstand')).json();
|
|
const withEmbed = structuredClone(forEmbed.document);
|
|
withEmbed.schemaVersion = 14;
|
|
withEmbed.blocks.push({
|
|
id: 'karte', type: 'embed',
|
|
props: { group: 'external', title: 'Anfahrt', provider: 'OpenStreetMap', url: 'https://karten.example/einbetten', hint: '', height: 320 },
|
|
});
|
|
const embedSave = await context.request.post(origin + '/admin/api/pages/test-projektstand/draft', { headers: { 'X-CSRF-Token': forEmbed.csrfToken }, data: { document: withEmbed, expectedVersion: forEmbed.version } });
|
|
assert.equal(embedSave.status(), 200, await embedSave.text());
|
|
// The version and the revision after a save are whatever the server says, not an assumption.
|
|
const afterSave = await (await context.request.get(origin + '/admin/api/pages/test-projektstand')).json();
|
|
const published = await context.request.post(origin + '/admin/api/pages/test-projektstand/publish', { headers: { 'X-CSRF-Token': afterSave.csrfToken }, data: { revisionId: afterSave.revisionId, expectedVersion: afterSave.version } });
|
|
assert.equal(published.status(), 200, await published.text());
|
|
|
|
// A separate context: a visitor without the administration's cookies.
|
|
const visitor = await browser.newContext({ viewport: { width: 1100, height: 900 } });
|
|
const visitorPage = await visitor.newPage();
|
|
await visitorPage.goto(origin + '/projektstand');
|
|
await visitorPage.locator('.consent-bar').waitFor();
|
|
assert.equal(await visitorPage.locator('iframe').count(), 0, 'Nothing may load before consent.');
|
|
assert.equal((await visitorPage.content()).includes('karten.example/einbetten'), false, 'The address must not even be in the markup.');
|
|
const blocked = await new AxeBuilder({ page: visitorPage }).withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'best-practice']).analyze();
|
|
assert.deepEqual(blocked.violations.map(v => v.id), [], 'consent banner accessibility');
|
|
await visitorPage.screenshot({ path: 'reports/editor/consent-banner.png', fullPage: false });
|
|
|
|
// Consenting through the embed's own button grants exactly that group, and then it loads.
|
|
await visitorPage.getByRole('button', { name: 'Inhalt laden und einwilligen', exact: true }).click();
|
|
await visitorPage.locator('iframe').waitFor({ state: 'attached' });
|
|
assert.equal(await visitorPage.locator('.consent-bar').count(), 0, 'A decision is a decision.');
|
|
assert.equal(await visitorPage.locator('.legal-bar').count(), 0, 'Footer links are placed by the author (since 1.8.1).');
|
|
await visitorPage.screenshot({ path: 'reports/editor/consent-granted.png', fullPage: false });
|
|
// And the way back: the consent page can refuse again, which blocks the embed once more.
|
|
await visitorPage.goto(origin + '/einwilligung');
|
|
await new AxeBuilder({ page: visitorPage }).withTags(['wcag2a', 'wcag2aa', 'wcag21aa']).analyze()
|
|
.then(result => assert.deepEqual(result.violations.map(v => v.id), [], 'consent page accessibility'));
|
|
await visitorPage.getByRole('button', { name: 'Nur notwendige', exact: true }).click();
|
|
await visitorPage.goto(origin + '/projektstand');
|
|
assert.equal(await visitorPage.locator('iframe').count(), 0, 'A refusal must stick.');
|
|
await visitor.close();
|
|
checks.push({ name: 'consent banner, blocked embed, granting per embed and revoking', passed: true });
|
|
console.log('Consent checks passed.');
|
|
|
|
// Back to the way the rest of the run expects it: no question, so the other screens stay as they were.
|
|
await page.goto(origin + '/admin/settings');
|
|
await page.getByLabel('Einwilligungshinweis anzeigen', { exact: true }).uncheck();
|
|
await page.getByRole('button', { name: 'Einstellungen speichern', exact: true }).click();
|
|
await page.locator('.notice.ok').waitFor();
|
|
|
|
// Back into the editor. The draft differs from the published state by now, so wait for the
|
|
// structure rather than for a particular save status.
|
|
await page.goto(origin + '/admin/pages/test-home');
|
|
await tab('Struktur');
|
|
await page.locator('#structure [data-block-id="headline"]').waitFor();
|
|
await treeSelect('headline');
|
|
await page.getByRole('button', { name: 'Design', exact: true }).click();
|
|
await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).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 (await tab('Elemente'), 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();
|
|
}
|