Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Bug]: Trace viewer pads narrow (phone-sized) snapshots with a checkerboard strip

Chiusa
  • Qualcosa non va?
#43,313 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Una pull request collegata è già stata integrata.

  • #43314 di @hoangtaiki — chiusa senza merge
  • #43321 di @pavelfeldman — integrata

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
playwright, typescript
Ambito
frontend, testing-qa

Direzione di ricerca

The issue identifies packages/trace-viewer/src/ui/snapshotTab.tsx and the SnapshotWrapper frame sizing logic. Read the existing sizing code and the test mentioned in the report, then check how 390px and 200px recorded viewports render. Done means the 390px frame matches the viewport and the 200px frame retains a 320px minimum; two linked pull requests are already open or closed against this issue.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Version

main at 606f017a1 (the same line is in the 1.58 viewer)

Steps to reproduce
  1. Record a trace with a phone-sized viewport:
import { chromium } from 'playwright-core';

const browser = await chromium.launch();
const context = await browser.newContext({ viewport: { width: 390, height: 664 } });
await context.tracing.start({ screenshots: true, snapshots: true });
const page = await context.newPage();
await page.setContent('<h1>Hello</h1><button>Go</button>');
await page.getByRole('button', { name: 'Go' }).click();
await context.tracing.stop({ path: 'trace.zip' });
await browser.close();
  1. Open it with npx playwright show-trace trace.zip.
  2. Select the Click action and look at the Snapshot tab (Action, Before or After).

No real website is needed; the same happens with any trace whose viewport is narrower than 480px, for example the viewport of a mobile device descriptor.

Expected behavior

The snapshot fills the browser frame: the frame is as wide as the recorded viewport (390px here).

Actual behavior

The frame is 480px wide while the snapshot iframe is 390px wide, so a 90px checkerboard strip appears beside the page. Measured in the viewer: .snapshot-container has width 480px, the snapshot iframe has width 390px. The strip is about 19% of the frame for a 390px viewport.

Additional context

The frame width comes from SnapshotWrapper in packages/trace-viewer/src/ui/snapshotTab.tsx:

const renderedBrowserFrameSize = {
  width: Math.max(snapshotContainerSize.width, 480),
  height: Math.max(snapshotContainerSize.height + windowHeaderHeight, 320),
};

The minimum was added in #37640 so the browser header does not break around very small snapshots, with the checkerboard marking the out of bounds area. That makes sense for tiny snapshots, but 480 is wider than most phones, so every mobile-width trace gets the strip.

The header (traffic lights, address bar, menu icon) still fits at 320px, so lowering the minimum width to 320 removes the strip for phone widths and keeps the safety net for tiny snapshots. I have a small change with a test (a 390px viewport gives a 390px frame, a 200px viewport keeps the 320px minimum) and can open a PR if that direction is acceptable.

I searched the existing issues and did not find one about this. #37216 is about mobile previews in UI mode, but it is about scrollbars, not this strip.

Environment
System:
    OS: macOS (arm64)
  Browsers:
    Chromium headless shell 156.0.8078.12 (playwright chromium-headless-shell v1249)
  npmPackages:
    playwright-core: built from main at 606f017a1
Screenshot
Image
Lingua principale
TypeScript
Stelle
97.4k
Fork
6.6k
Merge medio
22h 17m
PR unite (30g)
278

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/playwright

Tutte le issue di microsoft/playwright

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.