/** * Nimmt die Bildschirmfotos für die Anleitung auf. * * npm run build && npm run start (in einer zweiten Konsole) * npm run screenshots * * Die Bilder landen unter docs/bilder/ und werden bei jedem Lauf überschrieben. * So veralten sie nicht – wer die Oberfläche ändert, lässt das Skript neu laufen. * * Umgebungsvariablen: * LERNBAR_BASIS Adresse der laufenden Anwendung (Vorgabe http://localhost:3000) * LERNBAR_AUSBILDER E-Mail des Ausbilderkontos * LERNBAR_AZUBI E-Mail des Azubikontos * LERNBAR_PASSWORT_* zugehörige Passwörter */ import fs from 'node:fs'; import path from 'node:path'; import { chromium, type Page } from '@playwright/test'; const BASIS = process.env.LERNBAR_BASIS ?? 'http://localhost:3000'; const ZIEL = path.join(process.cwd(), 'docs', 'bilder'); const AUSBILDER = { email: process.env.LERNBAR_AUSBILDER ?? 'ausbilder@betrieb.de', passwort: process.env.LERNBAR_PASSWORT_AUSBILDER ?? 'ausbilder-start', }; const AZUBI = { email: process.env.LERNBAR_AZUBI ?? 'azubi@betrieb.de', passwort: process.env.LERNBAR_PASSWORT_AZUBI ?? 'azubi-start-2026', }; const SCHREIBTISCH = { width: 1280, height: 900 }; const HANDY = { width: 390, height: 844 }; async function anmelden(seite: Page, konto: { email: string; passwort: string }) { await seite.goto(`${BASIS}/anmelden`); await seite.waitForSelector('#email'); await seite.fill('#email', konto.email); await seite.fill('#passwort', konto.passwort); await seite.click('button[type=submit]'); await seite.waitForURL(`${BASIS}/`); } async function abmelden(seite: Page) { await seite.click('button:has-text("Abmelden")'); await seite.waitForURL(/anmelden/); } async function bild(seite: Page, name: string, ganzeSeite = true) { const datei = path.join(ZIEL, `${name}.png`); await seite.screenshot({ path: datei, fullPage: ganzeSeite }); console.log(` ${path.relative(process.cwd(), datei)}`); } async function main() { fs.mkdirSync(ZIEL, { recursive: true }); const browser = await chromium.launch(); const umgebung = await browser.newContext({ viewport: SCHREIBTISCH, locale: 'de-DE', colorScheme: 'light' }); const seite = await umgebung.newPage(); console.log('Bildschirmfotos werden aufgenommen …'); // --- Anmeldung --- await seite.goto(`${BASIS}/anmelden`); await seite.waitForSelector('#email'); await bild(seite, '01-anmelden'); // --- Ausbilder --- await anmelden(seite, AUSBILDER); await bild(seite, '02-ausbilder-ueberblick'); await seite.goto(`${BASIS}/verwaltung`); await seite.waitForSelector('#neu-name'); await bild(seite, '03-verwaltung'); await seite.goto(`${BASIS}/wochenplan`); await seite.waitForSelector('h1'); await bild(seite, '04-wochenplan'); await abmelden(seite); // --- Azubi --- await anmelden(seite, AZUBI); await bild(seite, '10-azubi-woche'); await seite.goto(`${BASIS}/handouts`); await seite.waitForSelector('h1'); await bild(seite, '11-handouts-liste'); await seite.goto(`${BASIS}/handouts?suche=subnetting`); await seite.waitForSelector('h2'); await bild(seite, '12-handouts-suche'); await seite.goto(`${BASIS}/handouts/N3`); await seite.waitForSelector('h1'); await seite.click('.pruefungsfrage > summary'); await bild(seite, '13-handout-n3'); await seite.goto(`${BASIS}/glossar`); await seite.waitForSelector('h1'); await bild(seite, '14-glossar'); // --- Dunkle Darstellung --- await seite.goto(`${BASIS}/handouts/N3`); await seite.waitForSelector('button[aria-pressed]'); await seite.click('button[aria-pressed="false"]'); await seite.waitForTimeout(200); await bild(seite, '20-dunkel'); await seite.click('button[aria-pressed="true"]'); // --- Handy --- const handy = await browser.newContext({ viewport: HANDY, locale: 'de-DE', isMobile: true, hasTouch: true, deviceScaleFactor: 2, }); const handySeite = await handy.newPage(); await anmelden(handySeite, AZUBI); await handySeite.goto(`${BASIS}/handouts/N3`); await handySeite.waitForSelector('h1'); await bild(handySeite, '30-handy-handout'); await browser.close(); console.log('Fertig.'); } main().catch((fehler) => { console.error('Die Bildschirmfotos konnten nicht aufgenommen werden.'); console.error(fehler instanceof Error ? fehler.message : fehler); console.error(`Läuft die Anwendung unter ${BASIS}? Stimmen LERNBAR_AUSBILDER und LERNBAR_AZUBI?`); process.exit(1); });