| name | frontend-pr-screenshots |
| description | Obligatorisk før enhver frontend-PR med synlige UI-endringer opprettes eller oppdateres — ta før/etter-screenshots (390px og 1440px) med Playwright og legg dem som tabell i PR-beskrivelsen. |
Før/etter-screenshots i frontend-PR-er
Krav
- Alle PR-er som endrer noe visuelt skal ha en «Før / etter»-tabell i PR-beskrivelsen,
med fullside-screenshots av hver berørt side i 390×844 (mobil) og 1440×900 (desktop).
UI-et er mobile-first, så 390px-bildet er ikke valgfritt.
- PR-er uten visuell effekt (refaktorering, config, docs) skal i stedet ha linjen
«Ingen visuelle endringer.» i beskrivelsen.
Fremgangsmåte
1. «Etter» — branchen din
Kjør dev-serveren (npm run dev, port 3001) med branchen sjekket ut, og ta
fullside-screenshots med Playwright. Ta bildet fra en fersk page/tab og vent på
innhold før du knipser — fullPage-screenshot fra en gjenbrukt tab kan henge:
const p = await page.context().newPage();
await p.setViewportSize({ width: 390, height: 844 });
await p.goto('http://localhost:3001/<side>', { waitUntil: 'load' });
await p.getByText('<tekst som finnes på siden>').first().waitFor({ state: 'visible' });
await p.waitForTimeout(1500);
await p.screenshot({ path: '<mappe>/<side>-etter-390.png', fullPage: true });
await p.close();
2. «Før» — master
Bytt de endrede filene midlertidig til master-versjonen i samme dev-server
(hot reload plukker det opp), knips, og bytt tilbake:
git checkout origin/master -- <endrede filer>
git checkout <din-branch> -- <endrede filer>
Alternativ: bruk https://peoply.app/ hvis prod beviselig er i sync med master.
3. Last opp til screenshots-branchen
Bildene bor på den historikk-løse branchen screenshots (kun bilder, aldri kode),
i én mappe per PR:
git worktree add /tmp/screenshots-wt screenshots
mkdir -p /tmp/screenshots-wt/pr-<nr>
cp *.png /tmp/screenshots-wt/pr-<nr>/
git -C /tmp/screenshots-wt add -A
git -C /tmp/screenshots-wt commit -m "docs: screenshots for PR #<nr>"
git -C /tmp/screenshots-wt push -u origin screenshots
git worktree remove /tmp/screenshots-wt
4. Tabellen i PR-beskrivelsen
## Før / etter
| Viewport | Før | Etter |
| --- | --- | --- |
| 390px (mobil) | <img src="https://raw.githubusercontent.com/MAPSuio/peoply-frontend/screenshots/pr-<nr>/<side>-for-390.png" width="300" /> | <img src="https://raw.githubusercontent.com/MAPSuio/peoply-frontend/screenshots/pr-<nr>/<side>-etter-390.png" width="300" /> |
| 1440px (desktop) | <img src="https://raw.githubusercontent.com/MAPSuio/peoply-frontend/screenshots/pr-<nr>/<side>-for-1440.png" width="420" /> | <img src="https://raw.githubusercontent.com/MAPSuio/peoply-frontend/screenshots/pr-<nr>/<side>-etter-1440.png" width="420" /> |
Gjenta radene per berørt side. Verifiser at raw-URL-ene svarer 200 før du
oppdaterer PR-en (curl -s -o /dev/null -w "%{http_code}" <url>).
