Cross-browser & Responsive Testing

Xây dựng matrix dựa trên analytics data của sản phẩm. Không test tất cả — focus theo market share và user base.

• Network TabMonitor API calls, check response data, response time, status codes. Filter by XHR/Fetch để chỉ thấy API. Export HAR file để attach vào bug report. Throttle network (3G/4G) để test performance.
• Console TabJavaScript errors (đỏ), warnings (vàng). Mọi bug report nên check console. Nếu có error → attach screenshot console vào bug report. Dùng console.log để debug khi cần.
• Elements TabInspect DOM, xem CSS styles, verify aria attributes, check dynamic content. Không thay đổi production — chỉ inspect. Useful để debug layout issues.
• Application TabCookies (session, auth tokens), localStorage, sessionStorage, IndexedDB. Test: sau logout, session cookies bị clear chưa? Auth token còn không?
• Performance TabRecord page load, xem Largest Contentful Paint, Total Blocking Time, Layout Shifts. Basic performance profiling không cần JMeter.
• Device ToolbarCtrl+Shift+M (Chrome): simulate mobile devices, custom viewport, touch events. Quick check responsive trước khi test trên real device.

• Mobile (320px–767px)Layout stack vertical, hamburger menu, font size không quá nhỏ (min 16px body), touch targets ≥ 44×44px, no horizontal scroll, images scale, form inputs full-width.
• Tablet (768px–1023px)2-column layout, navigation collapse/expand, images và tables scale đúng, sidebar behavior (collapse vs overlay).
• Desktop (1024px–1440px)Full layout, sidebar visible, tables show all columns, modal dialogs center properly.
• Wide (1440px+)Max-width container, không bị stretched, content centered, không có awkward whitespace.

Common Responsive Issues cần check:

• Text overflow và truncation — text bị cắt hoặc tràn ra ngoài container
• Image distortion — không giữ aspect ratio hoặc bị pixelated
• Button/link too small — touch target < 44px trên mobile
• Horizontal scrollbar — content tràn ngang, rất bad UX
• Form elements bị che bởi soft keyboard trên mobile
• Popup/modal không responsive — bị cắt hoặc không scrollable
• Z-index issues — dropdown bị chặn bởi element khác

So sánh screenshot tự động để phát hiện thay đổi UI không mong muốn.

• PercySaaS tool integrate với CI. Tự động so sánh screenshots, highlight pixel differences, review trong UI. Phổ biến cho Storybook và Playwright/Cypress.
• ApplitoolsAI-powered visual testing, smart ignore (dynamic content như timestamps), cross-browser comparison. Premium tool.
• BackstopJSOpen-source, tự host, config bằng JSON. Chụp screenshot reference → compare với test run → diff report. Free nhưng cần setup.
• Playwright screenshotawait expect(page).toHaveScreenshot(); — Built-in, đơn giản nhất. Lưu baseline screenshots vào repo.

• Layout không bị vỡ — no overflow, misalign, overlapping elements
• Web fonts load đúng — no FOUT (Flash of Unstyled Text)
• JavaScript errors trong console — check F12 trước khi sign off
• CSS3 features render đúng — gradients, flexbox, grid, animations
• Form validation — HTML5 validation behavior khác nhau theo browser
• Date/time picker — native picker khác nhau theo browser, check custom implementation
• File upload — accept attribute, multiple files, drag-drop
• Video/audio playback — codec support khác nhau (Safari: HLS, Chrome: WebM)
• PDF/file download — không bị blocked bởi browser security
• Clipboard (copy/paste) — permission handling khác nhau
• Push notifications — permission flow khác nhau
• Geolocation — permission và fallback behavior
• Print layout — nếu sản phẩm có print use case
• Back/Forward button behavior — không mất state
• Page zoom 200% — content vẫn usable

• BrowserStack LiveReal device và browser cloud. Test ngay trên real iOS Safari, real Android Chrome. Hỗ trợ >3000 devices. Best for cross-device testing.
• LambdaTestTương tự BrowserStack, thường rẻ hơn. Real browsers, automation grid.
• Sauce LabsAutomation-focused. Selenium/Playwright/Cypress grid. Good CI integration.
• Chrome DevTools Device ModeFree, built-in. Good cho quick responsive check nhưng không thay thế real device testing.
• Responsively AppFree desktop app hiển thị nhiều viewport cùng lúc. Quick review cho responsive issues.