BlogCode.vn Logo
BlogSeriesRoadmap

Danh sách bài viết

Playwright Nâng Cao - Test Framework, Patterns & Chuyên Sâu Tính Năng

Module Playwright Nâng Cao — đào sâu Fixtures (custom, scope, options), Authentication multi-role, Network nâng cao (HAR, WebSocket routing, API Testing), Locator handlers, Visual Regression, ARIA Snapshots & Accessibility, Component Testing (React/Vue/Svelte), Clock API, Scraping patterns chuyên sâu, UI Mode & Trace Viewer master, Reporters & Emulation nâng cao. Hoàn thành module này = đủ kỹ năng senior, đáp ứng test suite production scale.

27/05/2026
15 phút đọc
0 lượt xem
Playwright Nâng Cao - Test Framework, Patterns & Chuyên Sâu Tính Năng

Mục Tiêu Module

  • Học kỹ năng Senior cho Playwright: Custom Fixtures (test.extend), Multi-role Authentication, Network nâng cao với HAR record/replay và WebSocket routing, Locator Handlers cho dismiss banner tự động, Visual Regression Testing với toHaveScreenshot, ARIA Snapshots, Component Testing React/Vue/Svelte, Clock API mock time, Scraping anti-bot + proxy + multi-context, UI Mode & Trace Viewer toàn diện, Custom Reporter API, Emulation đầy đủ (color-scheme, reduced-motion, throttling, custom device). Hoàn thành module này = đủ kỹ năng senior, đáp ứng test suite production scale.

Prerequisites

  • ✅ Đã hoàn thành Series 1 — Playwright Cơ Bản (419 bài)
  • ✅ Tự viết được test E2E cho app web cơ bản
  • ✅ Đọc và phân tích Trace Viewer khi test fail
  • ✅ Hiểu auto-waiting, web-first assertions, fixture cơ bản
  • ✅ TypeScript ở mức trung cấp (generics, type narrowing)
  • 📝 Hiểu OOP basics (helpful cho POM advanced)
  • 📝 Đã từng dùng API testing tool (Postman / Insomnia, helpful)
  • 📝 Đã biết Git + CI/CD basic (helpful, không bắt buộc)

Ai Nên Học Module Này?

  • QA / Automation đã có kinh nghiệm với Playwright cơ bản, muốn build framework test scale lớn
  • Frontend / Fullstack Dev muốn thêm Visual Regression + Component Testing + A11y testing
  • Senior Data Engineer / Scraper muốn anti-bot, proxy rotation, multi-context concurrency

Ứng Dụng Sau Khi Học

  • Build framework test scale lớn với Custom Fixtures + POM nâng cao
  • Setup multi-role authentication (admin / user / guest) per-worker
  • Mock & test WebSocket / SSE realtime
  • Visual Regression CI workflow với baseline branch khác
  • Test accessibility (ARIA snapshots, axe integration) cho compliance WCAG
  • Test component React/Vue trực tiếp không cần render toàn page
  • Mock time cho test scheduled / session timeout
  • Scrape production-grade với proxy, anti-bot patches, multi-context

Thời Gian Học

  • Ước tính: 4 tuần (~12h/tuần)
  • Tổng số bài: 440 bài học (12 chương)
  • Thời lượng mỗi bài: 5-15 phút (đọc + thực hành)
  • Pace khuyến nghị: ~110 bài/tuần

Tools & Công Nghệ

  • Playwright v1.45+ (Clock API)
  • TypeScript 5.x
  • axe-playwright (A11y testing)
  • playwright-lighthouse (cross-ref Series 3)
  • VS Code Extension
  • Testcontainers (nếu có)

Bài Tập

  • 📖 Concept: Lý thuyết + use case ngắn gọn
  • 💻 Code Example: Snippet thực tế chạy được
  • ✍️ Hands-on: 1-2 bài tập áp dụng ngay
  • 🐛 Common Pitfalls: Lỗi thường gặp & cách tránh
  • 💡 Tips: Best practice từ Senior
  • 🎯 Challenge: Bài tập nâng cao (optional)

Projects Cuối Module

  • Capstone series 2 nằm trong Series 3 (Playwright Thực Chiến) — E-commerce E2E, SaaS B2B Monorepo, Production Scraper, MCP Agent

Module Tiếp Theo

  • Playwright Thực Chiến — Low-level (CDP, Coverage), AI/MCP/Test Agents, Experimental Platforms (Electron, Android), CI/CD Monorepo, BDD, Production-Grade Patterns (Email/OTP, DB Transaction, Lighthouse, Deep Links, Security DAST), Capstone Projects.

Danh Sách Bài Học

Chương A · Test Framework nâng cao

  • Built-in Fixtures deep dive
  • Option Fixtures — cấu hình per-test
  • Custom Fixtures với test.extend()
  • Hooks deep: beforeAll / afterAll scope
  • Annotations & Tags mới (v1.42+)
  • +95 bài nữa (Projects matrix, Parallel & Sharding, Retries, Timeouts, Parameterize, Global Setup)...

Chương B · Authentication nâng cao

  • Multi-role storageState (admin / user / guest)
  • Per-worker authentication
  • API-based login (skip UI)
  • SSO / OAuth flow
  • JWT token injection
  • +10 bài nữa (2FA TOTP, IndexedDB storageState, setStorageState runtime)...

Chương C · Network nâng cao

  • Route handler nâng cao (modify, abort, continue)
  • HAR record — ghi lại traffic
  • HAR replay — phát lại offline
  • WebSocket routing & mock
  • SSE (Server-Sent Events) mock
  • +51 bài nữa (APIRequestContext deep, FormData, TLS certs, Hybrid UI+API)...

Chương D · Locators nâng cao

  • Locator Handlers — dismiss cookie banner tự động
  • Custom Selector Engines
  • ARIA snapshots (giới thiệu)
  • locator.normalize() — chuẩn hóa whitespace
  • Anti-patterns locator — cần tránh
  • +13 bài nữa (locator stability patterns)...

Chương E · Visual Regression

  • toHaveScreenshot() — so sánh ảnh
  • mask — che vùng dynamic
  • threshold — tolerance pixel
  • snapshotPathTemplate — tổ chức baseline
  • animations: 'disabled' cho stable screenshot
  • +23 bài nữa (fonts wait, anti-flaky checklist, canvas preview)...

Chương F · Accessibility Testing

  • WCAG 2.2 — tổng quan tiêu chuẩn
  • toHaveRole() — native A11y assertion
  • toHaveAccessibleName()
  • toHaveAccessibleDescription()
  • ARIA snapshots YAML format
  • +21 bài nữa (axe-playwright, fingerprint violations, audit report)...

Chương G · Component Testing

  • Setup CT với React
  • Setup CT với Vue
  • Setup CT với Svelte / Solid
  • mount() / unmount() / update()
  • Hooks file — global setup cho CT
  • +18 bài nữa (router fixture, MSW integration, CT limitations)...

Chương H · Clock API

  • clock.install() — khởi tạo clock mock
  • clock.setFixedTime() — đóng băng thời gian
  • clock.setSystemTime() — đặt thời điểm cụ thể
  • clock.pauseAt() — dừng tại mốc
  • clock.fastForward() / runFor()
  • +12 bài nữa (resume, session timeout, polling UI, animation use cases)...

Chương I · Scraping Patterns nâng cao

  • Library mode deep — manual lifecycle
  • connectOverCDP — attach browser ngoài
  • launchServer — remote browser pool
  • Pagination & Infinite scroll patterns
  • Anti-bot & Stealth patching
  • +50 bài nữa (Proxy rotation, Workers/Service Workers interception)...

Chương J · UI Mode & Trace Viewer master

  • UI Mode advanced — filter, watch, timeline
  • Trace modes: on / off / retain-on-failure / on-first-retry
  • Trace Viewer nâng cao — network tab, console tab
  • Codegen nâng cao — --save-storage, ARIA generator
  • Debug nâng cao — --debug=cli, breakpoints
  • +44 bài nữa...

Chương K · Reporters & Output

  • Built-in reporters: List / Dot / Line / HTML
  • JSON / JUnit / GitHub / Blob reporters
  • Allure reporter setup
  • Custom Reporter API — implement từ đầu
  • Slack / Telegram notification on fail
  • +21 bài nữa...

Chương L · Emulation nâng cao

  • Color scheme: dark / light / no-preference
  • Reduced motion emulation
  • Forced colors (Windows High Contrast)
  • Media print emulation
  • Network throttling (slow 3G, offline)
  • +8 bài nữa (CPU throttle qua CDP, custom device, contrast)...

Tips Học Hiệu Quả

  • Đọc release notes hằng tháng: Playwright update liên tục — scan CHANGELOG.md để nắm API mới trước khi học bài.
  • Build fixture cho project thực: Tạo custom fixture cho project của bạn ngay sau Chương A, không chỉ làm theo ví dụ.
  • Visual Regression với baseline branch: Tạo branch snapshots/ riêng để version baseline, tránh conflict khi làm team.
  • Đọc axe docs song song Chương F: axe-core có rule set riêng — biết rule nào map WCAG criterion nào giúp debug nhanh hơn.
  • Code review POM với teammate: Sau khi học xong fixture + POM nâng cao, đưa code cho người khác review — hầu hết lỗi kiến trúc bộc lộ ở bước này.
  • Đọc Playwright source code: Phần Custom Selector Engine và Reporter API hiểu sâu hơn khi đọc source packages/playwright-core/src.
  • Tham gia Discord Playwright: Kênh #questions và #showcase — nhiều pattern thực tế không có trong docs chính thức.
  • Test scraper với site sandbox: Dùng books.toscrape.com, quotes.toscrape.com để test anti-bot pattern thay vì scrape site production.

Lộ Trình Học Tập

Tuần 1: Chương A — Test Framework (Bài 1 - 100)
├── Custom Fixtures + Hooks + Tags
├── Projects matrix, Parallel & Sharding
└── Retries, Timeouts, Parameterize, Global Setup

Tuần 2: Chương B + C + D (Bài 101 - 189)
├── Auth multi-role + 2FA
├── Network nâng cao + WebSocket + API Testing
└── Locator Handlers, Custom Selectors, ARIA

Tuần 3: Chương E + F + G + H (Bài 190 - 283)
├── Visual Regression toHaveScreenshot
├── A11y với ARIA Snapshots + axe
├── Component Testing React/Vue/Svelte
└── Clock API mock time

Tuần 4: Chương I + J + K + L (Bài 284 - 440)
├── Scraping anti-bot + proxy + multi-context
├── UI Mode + Trace Viewer master
├── Custom Reporter + Allure
└── Emulation đầy đủ
playwrightplaywright-advancedtest-frameworkfixturesvisual-regressionaccessibilitycomponent-testingweb-scrapingnetwork-mockingaria-snapshotsclock-apitypescript