Testing de responsividad y diseno adaptativo en multiples viewports (Mobile, Tablet, Desktop) usando Playwright MCP para redimensionar el navegador y capturar screenshots comparativos.
Overview
El viewport testing valida que el diseno se adapte correctamente a:
Mobile (375x812) — iPhone SE / iPhone 14 standard
Tablet (768x1024) — iPad standard
Desktop (1440x900) — Laptop standard
Combinado con Pixelmatch para comparar contra disenos de Penpot en cada breakpoint.
Breakpoints Estandar
Breakpoints primarios
Nombre
Width
Height
Dispositivo referencia
CSS Media Query
Mobile S
320px
568px
iPhone SE (1st gen)
max-width: 374px
Mobile
相關技能
375px
812px
iPhone 14
max-width: 767px
Mobile L
428px
926px
iPhone 14 Pro Max
max-width: 767px
Tablet
768px
1024px
iPad
min-width: 768px and max-width: 1023px
Tablet L
1024px
1366px
iPad Pro 12.9"
min-width: 1024px and max-width: 1279px
Desktop
1440px
900px
Laptop standard
min-width: 1280px
Desktop L
1920px
1080px
Full HD monitor
min-width: 1440px
Breakpoints minimos recomendados
Para testing eficiente, usar al menos estos 3:
Mobile: 375 x 812 (el mas comun)
Tablet: 768 x 1024 (breakpoint clasico)
Desktop: 1440 x 900 (laptop estandar)
Mobile (375px):
- [ ] Single column layout
- [ ] No horizontal scrollbar
- [ ] Content fills full width (con padding)
- [ ] Stacked cards/elements
- [ ] Hidden sidebar (hamburger menu)
Tablet (768px):
- [ ] 2-column grid donde aplique
- [ ] Sidebar colapsable o mini
- [ ] Tablas con scroll horizontal si necesario
- [ ] Sufficient spacing entre elementos
Desktop (1440px):
- [ ] Full multi-column layout
- [ ] Sidebar expandida
- [ ] Tablas completas visibles
- [ ] Max-width en contenido (no se estira infinitamente)
Tipografia
- [ ] Texto legible sin zoom en todos los viewports
- [ ] Tamano minimo 16px en mobile (evita zoom en iOS)
- [ ] Line-height adecuado (1.4-1.6 para body text)
- [ ] Headings se escalan proporcionalmente
- [ ] No texto truncado que pierda significado
Mobile:
- [ ] Hamburger menu funcional
- [ ] Menu overlay/slide-in correcto
- [ ] Close button accesible
- [ ] Bottom navigation (si aplica)
Tablet:
- [ ] Navigation adaptada (icons + text, o hamburger)
- [ ] Submenus accesibles
Desktop:
- [ ] Full navigation bar
- [ ] Hover states en items
- [ ] Dropdowns/megamenus funcionales
- [ ] Active state visible
Forms
- [ ] Inputs ocupan full width en mobile
- [ ] Labels encima de inputs en mobile (no al lado)
- [ ] Keyboard apropiado (email, tel, number) en mobile
- [ ] Form no se rompe con keyboard abierto
- [ ] Submit button accesible en todos los viewports
- [ ] Error messages visibles sin scroll
Problemas Comunes y Soluciones
Horizontal Scroll
# Detectar elementos que causan overflow:
# Usar Playwright MCP:
-> browser_resize(width=375, height=812)
-> browser_snapshot()
# Buscar en el accessibility tree elementos que se salen del viewport
# Causas comunes:
# 1. Tablas anchas sin overflow-x
# 2. Imagenes sin max-width: 100%
# 3. Elementos con width fijo en px
# 4. Pre/code blocks sin overflow-wrap
# 5. Flexbox/grid sin flex-wrap
Layout Shifts (CLS)
# Cambiar viewport y observar si hay layout shifts:
-> browser_resize(width=1440, height=900)
-> browser_screenshot() # Desktop
-> browser_resize(width=375, height=812)
-> browser_wait(time=500) # Esperar reflow
-> browser_screenshot() # Mobile
# Verificar que no hay:
# - Contenido que salta al cargar imagenes
# - Fonts que causan reflow (FOUT/FOIT)
# - Ads/embeds que empujan contenido
Breakpoint Boundary Testing
# Testear justo en los bordes de los breakpoints:
# Justo antes del breakpoint tablet (767px)
-> browser_resize(width=767, height=1024)
-> browser_screenshot()
# Justo en el breakpoint tablet (768px)
-> browser_resize(width=768, height=1024)
-> browser_screenshot()
# Verificar que la transicion es suave y no hay estados "rotos"
Reporte para Beads
Formato estandar
bd comments add task-id "[UI/UX Tester] Responsive Testing Report:
Page: /dashboard
Mobile (375x812):
Layout: ✅ Single column, sidebar hidden
Scroll: ✅ No horizontal overflow
Touch: ✅ All targets >= 44px
Text: ✅ Readable without zoom
Nav: ✅ Hamburger menu works
Issues: None
Tablet (768x1024):
Layout: ✅ 2-column grid
Scroll: ✅ No horizontal overflow
Touch: ✅ All targets >= 44px
Nav: ✅ Collapsed sidebar
Orientation: ✅ Portrait + Landscape OK
Issues: None
Desktop (1440x900):
Layout: ✅ Full 3-column + sidebar
Scroll: ✅ No overflow
Hover: ✅ All hover states work
Nav: ✅ Full navigation bar
Issues: None
Visual vs Penpot:
Mobile: 98.2% match ✅
Tablet: 97.5% match ✅
Desktop: 99.1% match ✅
Overall: PASS (0 issues)"
Formato de bug responsive
bd create "Responsive: Table overflows on Mobile 375px in /dashboard" \
-t bug -p 1 -l uiux,responsive,frontend \
--assignee knowledge-4yh \
-d "Viewport testing: tabla de datos hace overflow horizontal en 375px.
Viewport: 375x812
Page: /dashboard
Element: .data-table
Overflow: 120px beyond viewport
Screenshot: tests/screenshots/dashboard-mobile.png
Suggested fixes:
1. Add overflow-x: auto to table container
2. Use responsive table pattern (cards on mobile)
3. Hide non-essential columns on mobile with display: none"