Merge origin/main in feature/terminplaner-tp2 (Analyse-Cockpit, Subdomain-Sperre, Projekte)
Konflikte: funktionen.js folgt der Aufteilung aus main (fn-util.js, analyse.js); der Link
'Zu Verträge' der Analyse-Seite kommt jetzt auch in analyse.js aus vertraege-link.js.
Checkout und Team-Ansicht übernehmen assertOwnProject(..., { forNewOrder: true }) und
includeArchived aus main. Test-Pins der absoluten Importe nachgezogen.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed
commit
af63b69ec1
56 files changed
+4583
-717
No files matched your search
+317
-42
@@ -1,4 +1,5 @@
|
||||
// Playwright-Check Analyse-Panel (Einschalten-Dialog + aktives Panel): statischer Server fuer public/ + gemockte API.
|
||||
// Playwright-Check Analyse (Cockpit): statischer Server fuer public/ + gemockte API.
|
||||
// Zustaende: Einschalten, aktiv (volle Daten, neu, wenig Daten, Dev-Modus, alter Collector, langer Pfad, 503), Reiter, Zeitraum.
|
||||
// Nicht Teil von npm test. Aufruf: node test/ui/analyse.ui.mjs [Ausgabeordner]
|
||||
import http from 'node:http'
|
||||
import { readFile, mkdir } from 'node:fs/promises'
|
||||
@@ -7,7 +8,7 @@ import { fileURLToPath } from 'node:url'
|
||||
import { chromium } from '/root/.npm/_npx/db89d7302a373f10/node_modules/playwright-core/index.mjs'
|
||||
|
||||
const pub = path.join(path.dirname(fileURLToPath(import.meta.url)), '../../public')
|
||||
const SHOTS = process.argv[2] || '/root/reports/website-analyse-2026-10-01'
|
||||
const SHOTS = process.argv[2] || '/root/reports/analyse-ueberarbeitung-2026-10-04/screens'
|
||||
await mkdir(SHOTS, { recursive: true })
|
||||
const TYPES = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.svg': 'image/svg+xml', '.png': 'image/png', '.ico': 'image/x-icon', '.webmanifest': 'application/json' }
|
||||
const server = http.createServer(async (req, res) => {
|
||||
@@ -22,83 +23,357 @@ const server = http.createServer(async (req, res) => {
|
||||
await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve))
|
||||
const base = `http://127.0.0.1:${server.address().port}`
|
||||
|
||||
/* --- Testdaten: Form wie analytics/src/stats.js, Werte wie die Fixture "Boulderhalle Überhang" --- */
|
||||
const legal = { avv: '/rechtliches/avv-website-analyse-2026-10-02.html', lb: '/rechtliches/leistungsbeschreibung-website-analyse-2026-10-02.html' }
|
||||
const controller = { ok: true, company: 'Bäckerei Berg GmbH', address: 'Hauptstraße 1, 12345 Musterstadt', email: 'info@baeckerei-berg.example' }
|
||||
const base1 = { projectId: 'p1', projectName: 'Bäckerei Berg', liveUrl: 'https://baeckerei.example', features: { news: { state: 'off' } } }
|
||||
const baseProject = { projectId: 'p1', projectName: 'Boulderhalle Überhang', liveUrl: 'https://baeckerei.example', features: { news: { state: 'off' } } }
|
||||
const analyse = (over) => ({ state: 'active', eligible: true, devMode: false, accentColor: '#1d4ed8', avvVersion: '2026-10-02', activatedAt: '2026-08-12T09:00:00.000Z', legal, controller, ...over })
|
||||
const project = (over = {}) => ({ ...baseProject, analyse: analyse(over) })
|
||||
|
||||
const TODAY = '2026-10-04'
|
||||
const addDays = (day, n) => new Date(Date.UTC(+day.slice(0, 4), +day.slice(5, 7) - 1, +day.slice(8, 10) + n)).toISOString().slice(0, 10)
|
||||
const daysOf = (from, n, base, spike = -1) => Array.from({ length: n }, (_, i) => ({
|
||||
day: addDays(from, i), pv: i === spike ? 371 : Math.round(base * (1 + 0.25 * Math.sin(i / 2.3))), visitors: 80 + (i % 7) * 4, contacts: 4 + (i % 5), avgSec: 100 + (i % 9) * 3,
|
||||
}))
|
||||
const TOTALS = {
|
||||
7: { pv: 1640, visitors: 560, contacts: 41, consentRate: 0.61, engaged: 400, avgSec: 101, avgScroll: 62 },
|
||||
30: { pv: 6930, visitors: 2410, contacts: 188, consentRate: 0.61, engaged: 1800, avgSec: 108, avgScroll: 64 },
|
||||
90: { pv: 19800, visitors: 6700, contacts: 530, consentRate: 0.6, engaged: 5000, avgSec: 111, avgScroll: 63 },
|
||||
}
|
||||
const BEFORE = {
|
||||
7: { pv: 1500, visitors: 520, contacts: 35, consentRate: 0.6, engaged: 380, avgSec: 99, avgScroll: 60 },
|
||||
30: { pv: 6080, visitors: 2210, contacts: 143, consentRate: 0.6, engaged: 1500, avgSec: 114, avgScroll: 60 },
|
||||
90: { pv: 17900, visitors: 6200, contacts: 470, consentRate: 0.6, engaged: 4500, avgSec: 112, avgScroll: 61 },
|
||||
}
|
||||
const SCALE = { 7: 0.25, 30: 1, 90: 3 } // Anteil der 30-Tage-Zahlen je Zeitraum
|
||||
const PAGES = [['/', 2480], ['/preise', 1310], ['/kurse', 1150], ['/routen', 960], ['/oeffnungszeiten', 640], ['/team', 410], ['/kontakt', 300], ['/impressum', 120], ['/datenschutz', 90]]
|
||||
// Der Zeitraum endet gestern (abgeschlossene Tage); heute steht getrennt in `today`
|
||||
function makeStats(range, over = {}) {
|
||||
const from = addDays(TODAY, -range)
|
||||
const pfrom = addDays(from, -range)
|
||||
return {
|
||||
range, from, to: addDays(TODAY, -1), firstDay: addDays(pfrom, -40), totals: TOTALS[range], series: daysOf(from, range, 231, Math.min(14, range - 1)),
|
||||
today: { day: TODAY, pv: 42, visitors: 17, contacts: 2 },
|
||||
pages: PAGES.map(([key, count]) => ({ key, count: Math.round(count * SCALE[range]) })),
|
||||
refs: [{ key: 'google.com', count: 880 }, { key: '', count: 700 }, { key: 'instagram.com', count: 400 }, { key: 'l.facebook.com', count: 290 }].map((r) => ({ ...r, count: Math.round(r.count * SCALE[range]) })),
|
||||
countries: [{ key: 'DE', count: 6000 }, { key: 'AT', count: 600 }, { key: 'CH', count: 330 }],
|
||||
devices: [{ key: 'm', count: 4590 }, { key: 'd', count: 2030 }, { key: 't', count: 310 }],
|
||||
contacts: [{ key: 'tel', count: 96 }, { key: 'mail', count: 41 }, { key: 'wa', count: 38 }, { key: 'out', count: 13 }],
|
||||
banner: { shown: 3950, accept: 2410, reject: 1540 },
|
||||
previous: {
|
||||
from: pfrom, to: addDays(from, -1), complete: true, totals: BEFORE[range], series: daysOf(pfrom, range, 200),
|
||||
contacts: [{ key: 'tel', count: 75 }, { key: 'mail', count: 32 }, { key: 'wa', count: 21 }, { key: 'out', count: 13 }],
|
||||
},
|
||||
...over,
|
||||
}
|
||||
}
|
||||
const longPath = `/${'a'.repeat(120)}`
|
||||
const OLD = (range) => ({
|
||||
totals: { pv: 612, visitors: 214, contacts: 18, consentRate: 0.62 }, series: daysOf(addDays(TODAY, -13), 14, 40).map(({ day, pv }) => ({ day, pv })),
|
||||
pages: [{ key: '/', count: 300 }], refs: [], countries: [], devices: [], contacts: [], banner: { shown: 10, accept: 6, reject: 4 }, range,
|
||||
})
|
||||
// je Zustand: die Website und die Statistik (nach range)
|
||||
const SCENARIOS = {
|
||||
off: { ...base1, analyse: { state: 'off', eligible: true, accentColor: '#1d4ed8', avvVersion: '2026-10-02', legal, controller } },
|
||||
missing: { ...base1, analyse: { state: 'off', eligible: true, accentColor: '#1d4ed8', avvVersion: '2026-10-02', legal, controller: { ok: false, company: '', address: '', email: '', missing: ['firma'] } } },
|
||||
active: { ...base1, analyse: { state: 'active', eligible: true, accentColor: '#1d4ed8', avvVersion: '2026-10-02', legal, controller } },
|
||||
}
|
||||
const days = Array.from({ length: 14 }, (_, i) => ({ day: `2026-09-${String(17 + i).padStart(2, '0')}`, pv: 20 + ((i * 7) % 13) * 4 }))
|
||||
const stats = {
|
||||
totals: { pv: 612, visitors: 214, contacts: 18, consentRate: 0.62 }, series: days,
|
||||
pages: [{ key: '/', count: 300 }, { key: '/kontakt', count: 120 }], refs: [{ key: '', count: 200 }, { key: 'google.com', count: 90 }],
|
||||
countries: [{ key: 'DE', count: 500 }], devices: [{ key: 'm', count: 380 }, { key: 'd', count: 230 }], contacts: [{ key: 'tel', count: 12 }],
|
||||
banner: { shown: 300, accept: 186, reject: 114 },
|
||||
off: { project: project({ state: 'off' }) },
|
||||
missing: { project: project({ state: 'off', controller: { ok: false, company: '', address: '', email: '', missing: ['firma'] } }) },
|
||||
full: { project: project(), stats: (r) => makeStats(r) },
|
||||
neu: { project: project(), stats: (r) => makeStats(r, { firstDay: addDays(TODAY, -12), previous: { ...makeStats(r).previous, complete: false } }) },
|
||||
wenig: { project: project(), stats: (r) => makeStats(r, { totals: { ...TOTALS[r], pv: 12 } }) },
|
||||
dev: { project: project({ devMode: true }), stats: (r) => makeStats(r) },
|
||||
alt: { project: project(), stats: (r) => OLD(r) },
|
||||
stark: { project: project(), stats: (r) => makeStats(r, { series: daysOf(addDays(TODAY, -r), r, 2400, Math.min(14, r - 1)) }) },
|
||||
sehrStark: { project: project(), stats: (r) => makeStats(r, { series: daysOf(addDays(TODAY, -r), r, 12000, Math.min(14, r - 1)) }) },
|
||||
langerPfad: { project: project(), stats: (r) => makeStats(r, { pages: [{ key: longPath, count: 900 }, { key: '/kurz', count: 500 }], refs: [{ key: `${'h'.repeat(90)}.example.com`, count: 300 }] }) },
|
||||
fehler: { project: project(), stats: null },
|
||||
zwei: { projects: [project(), { ...baseProject, projectId: 'p2', projectName: 'Zweite Website mit einem wirklich sehr langen Namen, der nicht in eine Zeile passt', analyse: analyse({}) }], stats: (r) => makeStats(r) },
|
||||
}
|
||||
|
||||
let scenario = 'off'
|
||||
const browser = await chromium.launch()
|
||||
let statsRequests = []
|
||||
let delayFirst30 = 0
|
||||
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
|
||||
const launch = () => chromium.launch().catch(() => chromium.launch({ executablePath: '/root/.cache/ms-playwright/chromium-1234/chrome-linux64/chrome' }))
|
||||
const browser = await launch()
|
||||
let failed = 0
|
||||
const check = (name, ok) => { console.log(`${ok ? 'OK ' : 'FAIL'} ${name}`); if (!ok) failed += 1 }
|
||||
const TIMEOUT = Number(process.env.UI_TIMEOUT) || 120000
|
||||
try {
|
||||
for (const [label, viewport] of [['desktop', { width: 1280, height: 900 }], ['phone', { width: 390, height: 844 }]]) {
|
||||
const ctx = await browser.newContext({ viewport })
|
||||
for (const [label, viewport, touch] of [['desktop', { width: 1440, height: 1000 }, false], ['phone', { width: 402, height: 874 }, true]]) {
|
||||
const ctx = await browser.newContext({ viewport, hasTouch: touch })
|
||||
ctx.setDefaultTimeout(TIMEOUT)
|
||||
const page = await ctx.newPage()
|
||||
const errors = []
|
||||
page.on('pageerror', (e) => errors.push(e.message))
|
||||
await page.route('**/api/**', async (route) => {
|
||||
const p = new URL(route.request().url()).pathname
|
||||
const json = (b) => route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(b) })
|
||||
const url = new URL(route.request().url())
|
||||
const p = url.pathname
|
||||
const json = (b, status = 200) => route.fulfill({ status, contentType: 'application/json', body: JSON.stringify(b) }).catch(() => {})
|
||||
const sc = SCENARIOS[scenario]
|
||||
if (p === '/api/auth/me') return json({ authenticated: true, role: 'customer', customer: { id: 'c1', code: '1001', name: 'Berta Berg', email: 'b@example.test' } })
|
||||
if (p === '/api/projects') return json({ projects: [{ id: 'p1', name: 'Bäckerei Berg', status: 'live' }] })
|
||||
if (p === '/api/projects') return json({ projects: [{ id: 'p1', name: 'Boulderhalle Überhang', status: 'live' }] })
|
||||
if (p === '/api/features') return json({ features: [] })
|
||||
if (p === '/api/activity') return json({ tickets: [] })
|
||||
if (p === '/api/funktionen') return json({ projects: [SCENARIOS[scenario]] })
|
||||
if (p === '/api/funktionen/analyse/stats') return json(stats)
|
||||
if (p === '/api/funktionen') return json({ projects: sc.projects || [sc.project] })
|
||||
if (p === '/api/funktionen/analyse/stats') {
|
||||
const range = Number(url.searchParams.get('range'))
|
||||
statsRequests.push(range)
|
||||
if (range === 30 && delayFirst30 > 0) {
|
||||
delayFirst30 -= 1
|
||||
await sleep(1500)
|
||||
}
|
||||
if (!sc.stats) return json({ error: 'Auswertung nicht erreichbar' }, 503)
|
||||
return json(sc.stats(range))
|
||||
}
|
||||
if (p === '/api/funktionen/analyse/heatmap-link') return json({ url: `${base}/offline.html` })
|
||||
if (p === '/api/funktionen/analyse/deactivate') return json({ ok: true })
|
||||
return json({})
|
||||
})
|
||||
const open = async (sc) => {
|
||||
// waitFor: Selektor, der den fertigen Zustand anzeigt
|
||||
const open = async (sc, waitFor = '.an-ov:not(.an-skeleton)') => {
|
||||
scenario = sc
|
||||
statsRequests = []
|
||||
await page.goto('about:blank')
|
||||
await page.goto(`${base}/dashboard.html#analyse`)
|
||||
await page.waitForSelector('#analyse-body .kb-panel')
|
||||
await page.waitForTimeout(900)
|
||||
await page.waitForSelector('#analyse-body .an')
|
||||
await page.waitForSelector(waitFor)
|
||||
await page.waitForTimeout(300)
|
||||
}
|
||||
const shot = async (name) => {
|
||||
const height = await page.evaluate(() => Math.min(document.documentElement.scrollHeight, 3200))
|
||||
const height = await page.evaluate(() => Math.min(document.documentElement.scrollHeight, 4200))
|
||||
await page.setViewportSize({ width: viewport.width, height: Math.max(viewport.height, height) })
|
||||
await page.waitForTimeout(150)
|
||||
await page.screenshot({ path: `${SHOTS}/task-7-${label}-${name}.png` })
|
||||
await page.waitForTimeout(250)
|
||||
await page.screenshot({ path: `${SHOTS}/${label}-${name}.png` })
|
||||
await page.setViewportSize(viewport)
|
||||
}
|
||||
const noScroll = async (n) => check(`${label} kein_horizontaler_scroll ${n}`, await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth))
|
||||
const noScroll = () => page.evaluate(() => document.scrollingElement.scrollWidth <= window.innerWidth)
|
||||
const text = (sel) => page.evaluate((s) => document.querySelector(s)?.textContent ?? '', sel)
|
||||
const count = (sel) => page.evaluate((s) => document.querySelectorAll(s).length, sel)
|
||||
const L = (name) => `${label} ${name}`
|
||||
|
||||
await open('off')
|
||||
const text = await page.textContent('#analyse-body')
|
||||
check(`${label} verantwortlicher`, text.includes('Bäckerei Berg GmbH') && text.includes('info@baeckerei-berg.example'))
|
||||
check(`${label} links`, (await page.$$eval('#analyse-body a[href^="/rechtliches/"]', (a) => a.map((x) => x.getAttribute('href')))).join() === `${legal.avv},${legal.lb}`)
|
||||
check(`${label} knopf_gesperrt_ohne_haken`, await page.isDisabled('#an-on'))
|
||||
/* --- Einschalten (wie bisher) --- */
|
||||
await open('off', '#an-on')
|
||||
const body = await text('#analyse-body')
|
||||
const linkOk = (await page.$$eval('#analyse-body a[href^="/rechtliches/"]', (a) => a.map((x) => x.getAttribute('href')))).join() === `${legal.avv},${legal.lb}`
|
||||
const disabledFirst = await page.isDisabled('#an-on')
|
||||
const preview = (await text('#an-preview')).includes('Annehmen') && (await text('#an-preview')).includes('Ablehnen')
|
||||
await page.check('#an-avv')
|
||||
check(`${label} knopf_frei_mit_haken`, !(await page.isDisabled('#an-on')))
|
||||
await noScroll('einschalten')
|
||||
const enabled = !(await page.isDisabled('#an-on'))
|
||||
check(L('Einschalten: Banner-Vorschau, Häkchen schaltet Knopf frei (wie bisher)'), body.includes('Bäckerei Berg GmbH') && body.includes('info@baeckerei-berg.example') && linkOk && preview && disabledFirst && enabled)
|
||||
check(L('Einschalten: Kopfleiste ohne Zeitraum und Reiter, Status "Analyse ist noch ausgeschaltet"'), (await count('.an-top')) === 1 && (await count('.an-seg')) === 0 && (await count('.an-tabs')) === 0 && (await text('.an-status')).includes('Analyse ist noch ausgeschaltet'))
|
||||
check(L('kein_horizontaler_scroll einschalten'), await noScroll())
|
||||
await shot('einschalten')
|
||||
|
||||
await open('missing')
|
||||
await open('missing', '#an-missing')
|
||||
await page.check('#an-avv')
|
||||
check(`${label} gesperrt_ohne_angaben`, (await page.isDisabled('#an-on')) && Boolean(await page.$('#an-missing')))
|
||||
check(L('gesperrt_ohne_angaben'), (await page.isDisabled('#an-on')) && Boolean(await page.$('#an-missing')))
|
||||
await shot('fehlende-angaben')
|
||||
|
||||
await open('active')
|
||||
await page.waitForSelector('.an-kpis')
|
||||
await noScroll('aktiv')
|
||||
/* --- aktiv, volle Daten --- */
|
||||
await open('full')
|
||||
check(L('aktiv: Block "Das Wichtigste" mit "14 % mehr"'), (await text('.an-sum')).includes('Das Wichtigste') && (await text('.an-sum')).includes('14 % mehr'))
|
||||
check(L('aktiv: 4 Kacheln, 3 Chips ▲, 1 Chip ▼'), (await count('.an-kpis .an-kpi')) === 4 && (await count('.an-kpis .an-delta.up')) === 3 && (await count('.an-kpis .an-delta.down')) === 1 && (await text('.an-kpis')).includes('▲') && (await text('.an-kpis')).includes('▼'))
|
||||
check(L('aktiv: Kopfleiste mit "Heute bisher: 42 Aufrufe" und Stand-Uhrzeit, Zeitraum 30 Tage gewählt, Reiter Übersicht gewählt'), /^Analyse aktiv · Heute bisher: 42 Aufrufe · Stand: \d\d:\d\d Uhr$/.test(await text('.an-status')) && (await page.getAttribute('.an-seg .on', 'data-range')) === '30' && (await page.getAttribute('.an-tabbtn[aria-selected="true"]', 'data-tab')) === 'uebersicht')
|
||||
check(L('kein_horizontaler_scroll aktiv'), await noScroll())
|
||||
// Raster: Desktop 4 Kacheln nebeneinander, Handy 2 x 2; Diagramm und Kontaktkarte gleich hoch (Desktop)
|
||||
const tiles = await page.$$eval('.an-kpis .an-kpi', (els) => els.map((e) => { const r = e.getBoundingClientRect(); return { x: Math.round(r.left), y: Math.round(r.top), w: Math.round(r.width) } }))
|
||||
check(L(touch ? 'Kacheln 2 × 2' : 'Kacheln 4 nebeneinander'), touch
|
||||
? tiles[0].y === tiles[1].y && tiles[2].y === tiles[3].y && tiles[2].y > tiles[0].y && tiles[0].x === tiles[2].x && tiles[1].x > tiles[0].x
|
||||
: tiles.every((t) => t.y === tiles[0].y))
|
||||
await page.evaluate(() => document.querySelector('.an-chart').scrollIntoView({ block: 'center' }))
|
||||
await page.waitForTimeout(200)
|
||||
const boxes = await page.evaluate(() => {
|
||||
const r = (s) => { const b = document.querySelector(s).getBoundingClientRect(); return { top: Math.round(b.top), height: Math.round(b.height), left: b.left, right: b.right } }
|
||||
return { chart: r('.an-chartbox'), contacts: r('.an-contacts'), svg: r('.an-chart') }
|
||||
})
|
||||
if (!touch) {
|
||||
check(L(`Diagramm und Kontaktkarte gleich hoch (${boxes.chart.height} / ${boxes.contacts.height} px)`), boxes.chart.top === boxes.contacts.top && Math.abs(boxes.chart.height - boxes.contacts.height) <= 1)
|
||||
check(L(`Diagramm füllt seine Karte (${boxes.svg.height} von ${boxes.chart.height} px)`), boxes.svg.height >= boxes.chart.height * 0.6)
|
||||
} else {
|
||||
check(L('Handy: Diagramm und Kontaktkarte untereinander'), boxes.contacts.top > boxes.chart.top && boxes.chart.left === boxes.contacts.left)
|
||||
}
|
||||
// Blase am Diagramm: nächster Tag, zeigt "…: N Aufrufe (davor M)"; Maus verlässt / Tippen daneben blendet aus
|
||||
const svg = boxes.svg
|
||||
const px = svg.left + (svg.right - svg.left) * 0.62
|
||||
const py = svg.top + svg.height / 2
|
||||
if (touch) {
|
||||
await page.touchscreen.tap(px, py)
|
||||
} else {
|
||||
await page.mouse.move(px, py)
|
||||
}
|
||||
await page.waitForSelector('.an-tip:not([hidden])')
|
||||
const tip = await text('.an-tip')
|
||||
check(L(`Diagramm-Blase: "${tip}"`), /^\S+, \d\d\.\d\d\.: [\d.]+ Aufrufe \(davor [\d.]+\)$/.test(tip) && (await count('.an-dot.on')) === 1)
|
||||
if (touch) {
|
||||
// neben das Diagramm tippen (nicht in die App-Leiste oben, die führt zurück)
|
||||
const h = await page.locator('.an-chartbox h3').boundingBox()
|
||||
await page.touchscreen.tap(h.x + 10, h.y + h.height / 2)
|
||||
} else {
|
||||
await page.mouse.move(2, 2)
|
||||
}
|
||||
await page.waitForFunction(() => document.querySelector('.an-tip')?.hidden === true)
|
||||
check(L('Diagramm-Blase: verschwindet wieder, kein Punkt bleibt markiert'), (await count('.an-dot.on')) === 0)
|
||||
// Achsenbeschriftung: gerendert ca. 11-12 px (viewBox 640 skaliert mit der Breite), nichts ragt aus der Karte, x-Beschriftungen überlappen nicht
|
||||
const axis = () => page.evaluate(() => {
|
||||
const svg = document.querySelector('.an-chart')
|
||||
const scale = svg.getBoundingClientRect().width / 640
|
||||
const box = document.querySelector('.an-chartbox').getBoundingClientRect()
|
||||
const texts = [...svg.querySelectorAll('.an-axis')].map((t) => ({ r: t.getBoundingClientRect(), px: parseFloat(getComputedStyle(t).fontSize) * scale, anchor: t.getAttribute('text-anchor'), s: t.textContent }))
|
||||
const xs = texts.filter((t) => t.anchor === 'middle').sort((a, b) => a.r.left - b.r.left)
|
||||
return {
|
||||
px: Math.min(...texts.map((t) => t.px)), pxMax: Math.max(...texts.map((t) => t.px)),
|
||||
inside: texts.every((t) => t.r.left >= box.left + 1 && t.r.right <= box.right - 1),
|
||||
gap: xs.every((t, i) => !i || t.r.left >= xs[i - 1].r.right + 4),
|
||||
y: texts.filter((t) => t.anchor === 'end').map((t) => t.s).join(','),
|
||||
}
|
||||
})
|
||||
const ax = await axis()
|
||||
check(L(`Achsenbeschriftung ca. 11-12 px (${ax.px.toFixed(1)} px), liegt in der Karte, x-Werte überlappen nicht`), ax.px >= 10.5 && ax.pxMax <= 13 && ax.inside && ax.gap)
|
||||
const faint = await page.evaluate(() => getComputedStyle(document.querySelector('.an-credit')).color)
|
||||
check(L(`Hilfstext "--an-faint" kontrastreich (${faint})`), Number(/rgba?\([^)]*?,\s*([\d.]+)\)$/.exec(faint)?.[1] ?? 1) >= 0.55)
|
||||
if (touch) {
|
||||
const heights = await page.evaluate(() => Object.fromEntries(['.an-tabbtn', '.an-seg button', '.an-ltab', '.an-more', '.an-teaser .an-btn'].map((sel) => [sel, Math.min(...[...document.querySelectorAll(sel)].map((e) => e.getBoundingClientRect().height))])))
|
||||
check(L(`Tippflächen mindestens 40 px: ${Object.entries(heights).map(([k, v]) => `${k} ${v.toFixed(0)}`).join(', ')}`), Object.values(heights).every((h) => h >= 39.5))
|
||||
}
|
||||
// Ranglisten: Umschalter und "Alle anzeigen" ändern nur ihre Karte
|
||||
check(L('Rangliste: 6 Zeilen und "Alle anzeigen"'), (await count('[data-rank="seen"] .an-lr')) === 6 && (await count('[data-rank="seen"] [data-rank-more]')) === 1)
|
||||
await page.click('[data-rank="seen"] [data-rank-more]')
|
||||
check(L('Rangliste: "Alle anzeigen" zeigt alle 9 Seiten'), (await count('[data-rank="seen"] .an-lr')) === 9 && (await count('[data-rank="seen"] [data-rank-more]')) === 0)
|
||||
await page.click('[data-rank="seen"] [data-rank-tab="refs"]')
|
||||
check(L('Rangliste: Umschalter Herkunft, Seiten-Reiter der anderen Karte unverändert'), (await page.getAttribute('[data-rank="seen"]', 'data-rank-active')) === 'refs' && (await page.getAttribute('[data-rank="who"]', 'data-rank-active')) === 'devices' && (await text('[data-rank="seen"]')).includes('Google'))
|
||||
await shot('aktiv')
|
||||
|
||||
// Reiter per Pfeiltaste (Reihenfolge Übersicht, Heatmap, Einstellungen)
|
||||
await page.focus('.an-tabbtn[data-tab="uebersicht"]')
|
||||
await page.keyboard.press('ArrowRight')
|
||||
await page.waitForSelector('.an-tabbtn[data-tab="heatmap"][aria-selected="true"]')
|
||||
await page.keyboard.press('ArrowLeft')
|
||||
await page.waitForSelector('.an-tabbtn[data-tab="uebersicht"][aria-selected="true"]')
|
||||
check(L('Reiter: Pfeiltasten wechseln die Reiter'), (await count('.an-ov:not(.an-skeleton) .an-kpis')) === 1)
|
||||
|
||||
// Zeitraum 7: neue Anfrage, nur die Übersicht lädt neu, Reiter bleibt
|
||||
const before = statsRequests.length
|
||||
await page.click('.an-seg [data-range="7"]')
|
||||
await page.waitForFunction(() => document.querySelector('.an-lead')?.textContent.includes('7 Tagen'))
|
||||
check(L('Zeitraum 7 → Anfrage range=7, Reiter bleibt Übersicht'), statsRequests.length > before && statsRequests.at(-1) === 7 && (await page.getAttribute('.an-seg .on', 'data-range')) === '7' && (await page.getAttribute('.an-tabbtn[aria-selected="true"]', 'data-tab')) === 'uebersicht')
|
||||
|
||||
// Heatmap: iframes erst nach dem Reiterwechsel (Teaser-Knopf und Reiterknopf wechseln beide)
|
||||
await open('full')
|
||||
const iframesBefore = await count('iframe')
|
||||
await page.click('.an-teaser [data-tab="heatmap"]')
|
||||
await page.waitForFunction(() => document.querySelectorAll('.hs-dev iframe').length === 2)
|
||||
check(L('Teaser "Öffnen" wechselt in den Reiter Heatmap'), (await page.getAttribute('.an-tabbtn[aria-selected="true"]', 'data-tab')) === 'heatmap' && (await count('.an-top .an-seg')) === 0)
|
||||
await open('full')
|
||||
await page.click('.an-tabbtn[data-tab="heatmap"]')
|
||||
await page.waitForFunction(() => document.querySelectorAll('.hs-dev iframe').length === 2)
|
||||
check(L('Reiter Heatmap: vorher 0 iframes, nach Klick 2 iframes'), iframesBefore === 0 && (await count('.hs-dev iframe')) === 2 && (await count('#an-heat-page')) === 1)
|
||||
check(L('Heatmap: Seitenauswahl und Computer/Tablet-Schalter in einer Leiste'), await page.evaluate(() => { const bar = document.querySelector('.an-heat-bar'); return Boolean(bar?.querySelector('#an-heat-page') && bar.querySelector('.hs-switch button')) }))
|
||||
check(L('kein_horizontaler_scroll heatmap'), await noScroll())
|
||||
await page.waitForTimeout(600)
|
||||
await shot('heatmap')
|
||||
// zurück in die Übersicht: die iframes verschwinden, die Zahlen stehen sofort wieder da
|
||||
await page.click('.an-tabbtn[data-tab="uebersicht"]')
|
||||
await page.waitForSelector('.an-ov:not(.an-skeleton) .an-kpis')
|
||||
check(L('Reiterwechsel zurück: Übersicht ohne iframes'), (await count('iframe')) === 0)
|
||||
|
||||
// Einstellungen
|
||||
await page.click('.an-tabbtn[data-tab="einstellungen"]')
|
||||
await page.waitForSelector('#an-off-ask')
|
||||
const settings = await text('#analyse-body')
|
||||
check(L('Reiter Einstellungen: "Analyse ausschalten" sichtbar, "aktiv seit"'), (await page.isVisible('#an-off-ask')) && settings.includes('Analyse ausschalten') && /aktiv seit 12\.08\.2026/.test(settings) && settings.includes('Fassung 2026-10-02') && (await count('.an-docs a')) === 2 && (await count('.an-swatch')) === 1 && (await count('.an-top .an-seg')) === 0)
|
||||
check(L('kein_horizontaler_scroll einstellungen'), await noScroll())
|
||||
const errColor = await page.evaluate(() => {
|
||||
const p = document.createElement('p')
|
||||
p.className = 'error'
|
||||
p.textContent = 'x'
|
||||
document.querySelector('#an-off').appendChild(p)
|
||||
const c = getComputedStyle(p).color
|
||||
p.remove()
|
||||
return c
|
||||
})
|
||||
check(L(`Fehlertext beim Ausschalten rot (${errColor})`), errColor === 'rgb(252, 165, 165)')
|
||||
await shot('einstellungen')
|
||||
await page.click('#an-off-ask')
|
||||
await page.click('#an-off-yes')
|
||||
await page.waitForSelector('#an-off-done')
|
||||
check(`${label} ausschalten_bestaetigung`, (await page.textContent('#an-off-done')).includes('Ab jetzt werden keine Daten mehr gespeichert'))
|
||||
check(L('ausschalten_bestaetigung'), (await text('#an-off-done')).includes('Ab jetzt werden keine Daten mehr gespeichert'))
|
||||
await shot('ausgeschaltet')
|
||||
check(`${label} keine_js_fehler`, errors.length === 0)
|
||||
|
||||
// verzögerte erste Antwort überschreibt die spätere nicht
|
||||
delayFirst30 = 1
|
||||
await open('full', '.an-seg')
|
||||
await page.click('.an-seg [data-range="7"]')
|
||||
await page.waitForFunction(() => document.querySelector('.an-lead')?.textContent.includes('7 Tagen'))
|
||||
await page.waitForTimeout(1900)
|
||||
const lateOk = (await text('.an-lead')).includes('7 Tagen') && !(await text('.an-lead')).includes('30 Tagen') && statsRequests.join() === '30,7' && (await page.getAttribute('.an-seg .on', 'data-range')) === '7'
|
||||
// auch der Zustand dahinter bleibt der 7-Tage-Stand: "Alle anzeigen" und der Umschalter malen mit 7-Tage-Zahlen (Startseite 620, Google 220)
|
||||
const firstRow = (card) => text(`[data-rank="${card}"] .an-lr`)
|
||||
const before7 = await firstRow('seen')
|
||||
await page.click('[data-rank="seen"] [data-rank-more]')
|
||||
const more = await firstRow('seen')
|
||||
await page.click('[data-rank="seen"] [data-rank-tab="refs"]')
|
||||
const refs = await firstRow('seen')
|
||||
check(L('verzögerte erste Antwort (range=30, 1,5 s) überschreibt die spätere (range=7) nicht'), lateOk && before7.includes('620') && more.includes('620') && !more.includes('2.480') && refs.includes('220') && !refs.includes('880') && (await count('[data-rank="seen"] .an-lr')) === 4)
|
||||
delayFirst30 = 0
|
||||
|
||||
// Heatmap-Reiter während der ersten Übersicht-Anfrage: nutzt sie mit, statt dieselbe Anfrage noch einmal zu stellen
|
||||
delayFirst30 = 1
|
||||
await open('full', '.an-seg')
|
||||
await page.click('.an-tabbtn[data-tab="heatmap"]')
|
||||
await page.waitForFunction(() => document.querySelectorAll('.hs-dev iframe').length === 2)
|
||||
check(L('Heatmap-Reiter nutzt die laufende 30-Tage-Anfrage mit'), statsRequests.join() === '30')
|
||||
delayFirst30 = 0
|
||||
|
||||
// Website wechseln: Reiter bleibt
|
||||
await open('zwei')
|
||||
await page.click('.an-tabbtn[data-tab="einstellungen"]')
|
||||
await page.waitForSelector('#an-off-ask')
|
||||
check(L('mehrere Websites: Auswahlfeld in der Kopfleiste, langer Name bricht nichts'), (await count('#an-project option')) === 2 && (await noScroll()))
|
||||
await page.selectOption('#an-project', 'p2')
|
||||
await page.waitForSelector('#an-off-ask')
|
||||
check(L('Websitewechsel: Reiter Einstellungen bleibt'), (await page.getAttribute('.an-tabbtn[aria-selected="true"]', 'data-tab')) === 'einstellungen' && (await page.inputValue('#an-project')) === 'p2')
|
||||
await shot('zwei-websites')
|
||||
|
||||
/* --- weitere Zustände --- */
|
||||
await open('neu')
|
||||
check(L('neu: "Vergleich ab" statt Chips, Satz "Seit dem Start der Analyse"'), (await count('.an-kpis .an-delta')) === 0 && (await text('.an-kpis')).includes('Vergleich ab') && (await text('.an-sum')).includes('Seit dem Start der Analyse') && (await count('.an-prev')) === 0)
|
||||
await shot('neu')
|
||||
|
||||
await open('wenig')
|
||||
check(L('wenig: Leerzustand'), (await count('.an-sum-empty')) === 1 && (await text('.an-sum')).includes('Sobald ein paar mehr Besuche da sind'))
|
||||
await shot('wenig')
|
||||
|
||||
await open('dev')
|
||||
check(L('dev: "Im Dev-Modus wird nicht gemessen."'), (await text('.an-status')).includes('Im Dev-Modus wird nicht gemessen.') && (await page.getAttribute('.an-site', 'data-state')) === 'warn')
|
||||
await shot('dev')
|
||||
|
||||
await open('alt')
|
||||
check(L('alt: kein "Heute bisher" (alter Collector), Stand bleibt'), /^Analyse aktiv · Stand: \d\d:\d\d Uhr$/.test(await text('.an-status')))
|
||||
check(L('alt: keine Chips, keine pageerror'), (await count('.an-delta')) === 0 && (await count('.an-prev')) === 0 && errors.length === 0 && (await text('.an-kpis')).includes('612'))
|
||||
await shot('alt')
|
||||
|
||||
await open('fehler', '.an-error')
|
||||
const requestsBefore = statsRequests.length
|
||||
check(L('fehler: "Auswertung gerade nicht erreichbar" + Neu laden'), (await text('.an-error')).includes('Auswertung gerade nicht erreichbar') && (await text('#an-retry')) === 'Neu laden' && (await count('.an-tabs')) === 1)
|
||||
await page.click('#an-retry')
|
||||
for (let i = 0; i < 50 && statsRequests.length === requestsBefore; i += 1) await sleep(100)
|
||||
await page.waitForSelector('.an-error')
|
||||
check(L('fehler: "Neu laden" fragt erneut an'), statsRequests.length === requestsBefore + 1)
|
||||
await shot('fehler')
|
||||
|
||||
for (const [sc, label5] of [['stark', 'vierstellige'], ['sehrStark', 'fünfstellige']]) {
|
||||
await open(sc)
|
||||
const big = await axis()
|
||||
check(L(`${label5} y-Werte (${big.y}) nicht abgeschnitten, x-Werte überlappen nicht, Schrift ${big.px.toFixed(1)} px`), big.inside && big.gap && big.px >= 10.5 && big.pxMax <= 13)
|
||||
await shot(sc === 'stark' ? 'skala-4-stellig' : 'skala-5-stellig')
|
||||
}
|
||||
|
||||
await open('langerPfad')
|
||||
const name = await page.evaluate(() => { const n = document.querySelector('[data-rank="seen"] .an-name'); return { sw: n.scrollWidth, cw: n.clientWidth, title: n.title } })
|
||||
check(L(`langer Pfad${touch ? ', 402 px' : ''}: document.scrollingElement.scrollWidth <= innerWidth`), (await noScroll()) && name.sw > name.cw && name.title.length > 100)
|
||||
await shot('langer-pfad')
|
||||
|
||||
check(L('keine pageerror in allen Zuständen'), errors.length === 0)
|
||||
if (errors.length) console.log(errors.join('\n'))
|
||||
await ctx.close()
|
||||
}
|
||||
} finally {
|
||||
|
||||
Reference in new issue
Block a user