Mục Tiêu Module

Học các kiến thức nền tảng Playwright đáp ứng đủ cho cả 3 đối tượng: QA / Automation Tester (chuyển từ Selenium / Cypress), Frontend / Fullstack Developer (viết E2E test cho Next.js, React, Vue, Angular), Data Engineer / Scraper (cào dữ liệu, vượt rào anti-bot). Hoàn thành module này bạn có thể tự viết test E2E cơ bản, script scraping đơn giản, hoặc tích hợp Playwright vào workflow dev hằng ngày.

Prerequisites

✅ Máy tính với Node.js 20+ (khuyến nghị 22 LTS hoặc 24)
✅ Text editor / IDE (VS Code khuyến nghị)
✅ TypeScript cơ bản (biến, hàm, type annotation)
✅ HTML / CSS cơ bản (hiểu cấu trúc DOM, selectors)
✅ Khái niệm async / await trong JavaScript
📝 Git cơ bản (helpful cho phần CI / version control)
📝 Kinh nghiệm với 1 framework web (helpful nhưng không bắt buộc)
❌ Không cần kinh nghiệm test automation trước đó
❌ Không cần Selenium / Cypress background

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

Chuyển từ Selenium / Cypress sang Playwright
Viết E2E test suite cho web app
Debug test fail qua Trace Viewer & UI Mode

Ứng Dụng Sau Khi Học

Viết test cho luồng login, checkout, search trên web app
Cross-browser test (Chromium / Firefox / WebKit)
Debug test fail qua Trace Viewer & UI Mode
Generate test bằng Codegen từ user action

Thời Gian Học

Ước tính: 5-6 tuần
Tổng số bài: 422 bài học
Thời lượng mỗi bài: 5-15 phút (đọc + thực hành)
Thực hành: 1.5-2 giờ/ngày
Pace khuyến nghị: ~70-85 bài/tuần
Mini-projects cuối module: 3-5 ngày

Tools & Công Nghệ

Node.js 20 / 22 LTS / 24
@playwright/test hoặc playwright package
VS Code (khuyến nghị) + Playwright Extension
Terminal / Command line
Git cơ bản

Tài Nguyên Tham Khảo

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

Test login đúng / sai password / empty / SQL injection input
Test logout & session expiration
Lưu storageState để skip login ở các test sau
Multi-browser run (Chromium / Firefox / WebKit)
Generate HTML report

Module Tiếp Theo

Playwright Nâng Cao — Fixtures, Network nâng cao, Visual Regression, ARIA Snapshots, Component Testing, Clock API, Scraping patterns chuyên sâu, UI Mode & Trace Viewer master.
Playwright Thực Chiến — CDP & Coverage, AI / MCP / Test Agents, Electron / Android, CI/CD Monorepo, Production patterns (Email/OTP, DB Transaction, Lighthouse, Deep Links, Security DAST), Capstone Projects.

Danh Sách Bài Học

Giới thiệu Playwright

Playwright là gì? Giới thiệu tổng quan
Lịch sử & vị thế Playwright trong landscape 2026
Tại sao Playwright? Ưu điểm cốt lõi
So sánh Playwright vs Selenium WebDriver
So sánh Playwright vs Cypress
+6 bài nữa...

Cài đặt môi trường

Yêu cầu hệ thống (Windows, macOS, Linux)
Cài Node.js 20 / 22 / 24
Cài npm, pnpm, yarn — chọn package manager
Cài Playwright Test Runner: npm init playwright@latest
Cài Playwright Library: npm i playwright
+8 bài nữa...

Cấu trúc project & TypeScript

Cấu trúc thư mục chuẩn của Playwright project
File playwright.config.ts — anatomy
File package.json — scripts khuyến nghị
Folder tests/ — quy ước
Folder playwright/.auth/ — auth state
+6 bài nữa...

Kiến trúc Browser / Context / Page

Browser instance — vòng đời
BrowserContext — khái niệm "incognito"
Page object — đơn vị test cơ bản
Phân biệt Browser vs Context vs Page
Multiple contexts trong 1 browser — vì sao
+5 bài nữa...

2 Mode chạy: Test Runner vs Library

Test Runner mode (@playwright/test) — cho QA / Dev
Library mode (playwright) — cho Scraper
So sánh 2 mode: API, lifecycle, fixtures
Khi nào chọn Test Runner
Khi nào chọn Library mode
+2 bài nữa...

Script đầu tiên

Test đầu tiên với Test Runner: anatomy
Script scraper đầu tiên với Library: anatomy
async/await trong Playwright
Error handling cơ bản với try/catch
Chạy test: npx playwright test
+3 bài nữa...

CLI cơ bản

CLI tổng quan: npx playwright --help
playwright test flags
--headed chạy có giao diện
--debug mở Inspector
--ui mở UI Mode
+7 bài nữa...

VS Code Extension

Cài Playwright VS Code Extension
Test Explorer sidebar
Run test từ editor (codelens)
Pick Locator interactive
Record new test
+6 bài nữa...

Triết lý Locators

Vì sao locators là "trái tim" của Playwright
Web-first selectors — user-facing locators
Locator vs ElementHandle — khác biệt
Khái niệm strict mode (1 match duy nhất)
Auto-retry built-in trong locator
+1 bài nữa...

Locators - getByRole

getByRole() cơ bản
Danh sách ARIA roles thường gặp
getByRole với name option
getByRole với level (heading h1-h6)
getByRole với pressed (toggle button)
+6 bài nữa...

Locators - Text-based

getByText() exact match
getByText() substring (default)
getByText() với RegExp
getByLabel() form control
getByPlaceholder() input placeholder
+3 bài nữa...

Locators - Test ID

getByTestId() cơ bản
data-testid convention
Cấu hình testIdAttribute custom
Vì sao test-id là fallback cuối, không phải đầu

Locators - CSS

page.locator('selector') generic
CSS basic selectors
CSS pseudo :visible
CSS pseudo :has-text()
CSS pseudo :has()
+3 bài nữa...

Locators - XPath & Layout

XPath cơ bản trong Playwright
Khi nào dùng XPath vs CSS
Layout pseudo: :right-of()
Layout pseudo: :left-of()
Layout pseudo: :above() / :below()
+2 bài nữa...

Locators - Filter & Chain

.filter({ hasText })
.filter({ hasNotText })
.filter({ has }) — chứa element con
.filter({ hasNot })
.filter({ visible }) [v1.44]
+6 bài nữa...

Locators - Frames & Shadow DOM

iFrame — khái niệm cơ bản
frameLocator() cơ bản
Nested iframes
Locator.contentFrame() [v1.43]
FrameLocator.owner() [v1.43]
+2 bài nữa...

Locators - Utility methods

.count() đếm matches
.all() array của Locator
.allTextContents()
.allInnerTexts()
.textContent() vs .innerText()
+4 bài nữa...

Actions - Click

.click() cơ bản
Click options: button (left / right / middle)
Click options: clickCount (single / double / triple)
Click options: modifiers (Shift / Ctrl / Alt / Meta)
Click options: position (offset từ element)
+8 bài nữa...

Actions - Form input

.fill() set value tức thì
.clear() xoá field
.type() deprecated → dùng pressSequentially
.pressSequentially() gõ từng phím
.press() single key
+11 bài nữa...

Actions - Focus, Hover, Scroll

.focus()
.blur()
.hover()
.selectText()
.scrollIntoViewIfNeeded()
+1 bài nữa...

Actions - File Upload

.setInputFiles(path) 1 file
Upload nhiều file
Upload từ Buffer (in-memory)
Directory upload [v1.46]
Custom file picker (không phải native)
+1 bài nữa...

Actions - Drag & Drop, Mouse

.dragTo(target) cơ bản
Drag với offset
HTML5 native drag events
mouse.down() / up() / move()
mouse.wheel() scroll bằng wheel
+1 bài nữa...

Actions - Touch (Mobile)

touchscreen.tap(x, y)
Multi-touch qua dispatchEvent
Gesture: pan
Gesture: pinch-zoom
Gesture: swipe
+1 bài nữa...

Navigation

page.goto(url)
goto option: waitUntil: 'load'
goto option: waitUntil: 'domcontentloaded'
goto option: waitUntil: 'networkidle'
goto option: waitUntil: 'commit'
+4 bài nữa...

Auto-waiting & Actionability

Triết lý auto-waiting của Playwright
Actionability check #1: Attached
Actionability check #2: Visible
Actionability check #3: Stable
Actionability check #4: Enabled
+7 bài nữa...

Explicit Waits

waitForSelector() — legacy nhưng còn dùng
waitForFunction() cho điều kiện custom
waitForEvent() events bất kỳ
waitForRequest()
waitForResponse()
+3 bài nữa...

Assertions - Khái niệm

expect() web-first vs Jest expect
Vì sao assertion tự retry
Default timeout của expect (5s)
Custom timeout per assertion
.not. negation
+1 bài nữa...

Assertions - Visibility & State

.toBeVisible()
.toBeHidden()
.toBeAttached()
.toBeInViewport()
.toBeEnabled()
+5 bài nữa...

Assertions - Text & Value

.toHaveText() exact
.toHaveText() với RegExp
.toHaveText() array (multiple elements)
.toContainText()
.toHaveValue() cho input
+2 bài nữa...

Assertions - Attributes & CSS

.toHaveAttribute()
.toHaveClass() exact
.toContainClass() [v1.52]
.toHaveId()
.toHaveCSS() computed CSS
+1 bài nữa...

Assertions - Page & Response

.toHaveTitle()
.toHaveURL()
expect(response).toBeOK()
expect(response).toHaveStatus(200)

Assertions - Soft & Poll

expect.soft() — không dừng test khi fail
Multiple soft assertions trong 1 test
expect.poll(fn) retry function trả value
expect.toPass() retry block code
Custom interval cho toPass
+1 bài nữa...

Network Monitoring

page.on('request') listener
page.on('response') listener
page.on('requestfinished')
page.on('requestfailed')
Request class: url, method, headers
+5 bài nữa...

Route - Mock cơ bản

page.route(url, handler) overview
Glob pattern: * vs **
Glob pattern: {a,b}, ?
Regex matching trong route
Function predicate matching
+9 bài nữa...

Cookies & Storage

context.cookies() đọc tất cả
context.cookies([urls]) filter
context.addCookies([{...}])
context.clearCookies()
clearCookies với filter [v1.43]
+2 bài nữa...

Authentication - storageState

Vấn đề: re-login mỗi test = chậm
Khái niệm storageState
Login thủ công, lưu state
context.storageState({ path }) save
browser.newContext({ storageState }) load
+5 bài nữa...

Emulation cơ bản

devices presets — danh sách
devices['iPhone 15 Pro']
devices['Pixel 7']
viewport custom size
deviceScaleFactor (DPR)
+7 bài nữa...

Browser API - Evaluate

page.evaluate(fn) cơ bản
Truyền argument vào evaluate
Return value primitives
Return JSHandle với evaluateHandle()
Serialization limits — gì truyền được, gì không
+4 bài nữa...

Multi-page, Popups, Tabs

context.on('page') listener
page.on('popup') listener
context.pages() liệt kê
Chuyển đổi giữa tabs (bringToFront)
Đóng tab: page.close()
+1 bài nữa...

Dialogs (alert / confirm / prompt)

page.on('dialog') listener
dialog.accept() cho alert
dialog.dismiss() cho confirm
dialog.accept('text') cho prompt
beforeunload dialog
+2 bài nữa...

Downloads cơ bản

page.on('download') listener
Download.path() đường dẫn tạm
Download.saveAs(path) lưu vĩnh viễn
Download.suggestedFilename()
Download.cancel()
+2 bài nữa...

Screenshots & Video cơ bản

page.screenshot() toàn page
screenshot({ fullPage: true })
screenshot({ clip }) crop
locator.screenshot() chụp element
path lưu file
+4 bài nữa...

Debug cơ bản

page.pause() dừng để debug
headless: false quan sát
slowMo: 500 chậm từng action
--debug flag
Playwright Inspector overview
+2 bài nữa...

UI Mode cơ bản

Mở UI Mode: npx playwright test --ui
Layout UI Mode tổng quan
Chạy test từ UI Mode
Pick Locator trong UI Mode
Watch mode (eye icon)
+2 bài nữa...

Trace Viewer cơ bản

Cấu hình trace: 'on-first-retry'
Mở trace: npx playwright show-trace file.zip
Web app trace.playwright.dev drag-drop
DOM Snapshots: before / action / after
Tab Source — xem code
+4 bài nữa...

Codegen cơ bản

npx playwright codegen URL
Record actions tự động
Smart locator priority
Toolbar: Assert visibility
Toolbar: Assert text
+3 bài nữa...

Test Runner cơ bản (QA / Dev)

test('name', fn) syntax
test.describe() group
test.beforeAll() & afterAll()
test.beforeEach() & afterEach()
test.skip() bỏ qua
+5 bài nữa...

Library Mode cơ bản (Scraper)

chromium.launch() manual
firefox.launch() & webkit.launch()
browser.newContext(options)
context.newPage()
Lifecycle: launch → context → page → close
+3 bài nữa...

Capstone phần Cơ bản (3 mini-projects)

Mini-project (QA): Test login form đầy đủ
Mini-project (Dev): Test 1 component card React
Mini-project (Scraper): Crawl 1 trang blog cơ bản
Tổng kết Phần Cơ bản — checklist tự đánh giá

Tips Học Hiệu Quả

Gõ tay code: Mở terminal song song, gõ từng dòng thay vì copy-paste.
Dùng UI Mode từ đầu: Chạy npx playwright test --ui ngay từ bài đầu để quan sát hành vi.
Test trên site thật: Áp dụng vào site bạn dùng hằng ngày (Wikipedia, blog, dashboard nội bộ).
Đọc trace mỗi lần fail: npx playwright show-trace là công cụ debug chính.
Ưu tiên getByRole trước CSS / XPath: tập thói quen accessibility-first.
Khai thác VS Code Extension: Pick Locator, Record at cursor, codelens run.
Không nhảy cóc bài: mỗi bài kế thừa kiến thức bài trước.
Theo dõi release notes: Playwright update mỗi tháng, scan changelog để cập nhật.

Lộ Trình Học Tập

Tuần 1: Khởi động & Môi trường (Bài 1 - 24)
├── Cài đặt Node.js & Playwright
├── So sánh Playwright với Selenium/Cypress
└── Lộ trình cho QA / Dev / Scraper

Tuần 2: Kiến trúc & TypeScript (Bài 25 - 45)
├── Cấu trúc thư mục chuẩn
├── TypeScript Configuration (tsconfig)
└── Vòng đời Browser, Context, Page

Tuần 3: Locators & Tương tác (Bài 46 - 80)
├── Built-in Locators (getByRole, getByText...)
├── Tương tác Mouse & Keyboard
└── Auto-waiting & Assertions

Tuần 4: Xử lý Form & Nâng cao (Bài 81 - 150)
├── Input, Dropdown, Checkbox, Upload
├── Xử lý Dialog, Alert, Frame
└── Tương tác với iFrame & Shadow DOM

Tuần 5: Session & Debugging (Bài 151 - 200)
├── Authentication & Storage State
├── Tracing & UI Mode
└── Codegen & Debugging Tools

Tuần 6: Thực chiến E2E (Các dự án)
├── Xây dựng Page Object Model (POM)
├── Tích hợp CI/CD (GitHub Actions)
└── Export HTML Report & Video

Thẻ: ndarray

Series liên quan

Deep Learning

Python, Data & Math Foundations