dev-proPRO
OverviewLộ Trình HọcPhỏng VấnAI System
dev-pro— Thực chiến Frontend React, Next.js & Luyện phỏng vấn
contact@dev-pro.online•Code thật. Phỏng vấn thật.
Seri React Mastery8 Lộ trình · Sandbox
Seri React Mastery
8 tracks
T01
React Core Foundations0/7 hoàn thành
T02
React Hooks Mastery0/5 hoàn thành
T03
React Component Architecture & Forms0/4 hoàn thành
T04
React & Compiler: Modern Path0/4 hoàn thành
T05
Form Engineering: RHF + Zod + Server Actions0/2 hoàn thành
T06
Advanced React Performance Patterns0/4 hoàn thành
T07
Enterprise React Testing & Production Readiness0/5 hoàn thành
  • Bài học (5)
  • Tư Duy Testing Chuẩn với Vitest & React Testing Library (RTL)18m•intermediate
  • Mocking Tầng Mạng với MSW (Mock Service Worker)20m•advanced
  • Kiểm Thử Custom Hooks & Zustand Store Độc Lập18m•intermediate
  • Accessibility (a11y) & Kiến Trúc Chịu Lỗi (Error Resilience)20m•advanced
  • Playwright E2E: Kiểm Thử Critical User Journeys24m•advanced
T08
Production Capstone: TeamBoard0/1 hoàn thành
Tiến độ React0/32 bài
Enterprise React Testing & Production Readiness
advanced
24 phút
#Playwright
#E2E
#Test Strategy
#Browser Testing

Playwright E2E: Kiểm Thử Critical User Journeys

Kiểm thử ứng dụng thật qua browser, tập trung vào các hành trình có giá trị cao thay vì lặp lại mọi unit test.

Core Mental Model

Unit test kiểm tra logic nhỏ nhanh; integration test kiểm tra nhiều module phối hợp; E2E kiểm tra hệ thống qua browser như người dùng. E2E đắt và chậm hơn nên dành cho critical journeys: đăng nhập, checkout, phân quyền và mutation quan trọng.

Key Takeaways & Principles

Dùng locator theo role/label thay vì CSS implementation detail; Playwright tự chờ actionability nên tránh sleep cố định.
Mỗi test phải độc lập: tạo dữ liệu riêng qua fixture/API và dọn dẹp hoặc dùng tenant/test database cô lập.
Chờ kết quả người dùng nhìn thấy hoặc response cụ thể, không chờ timeout tùy ý.
Giữ ít E2E có giá trị cao, nhiều integration test cho nhánh lỗi; lưu trace/screenshot/video khi CI thất bại.