296 bài viết
Playwright MCP (AI agent điều khiển trình duyệt qua Model Context Protocol)
Playwright MCP là server MCP chính thức của Microsoft, expose các tool (`browser_navigate`, `browser_click`, `browser_snapshot`...) để AI a…
Chạy Playwright trên CI/CD & Docker (GitHub Actions, image chính thức)
Playwright có sẵn Docker image `mcr.microsoft.com/playwright` cài đủ browsers + system deps, và config mặc định đã có nhánh CI (`forbidOnly…
Accessibility Testing với Axe (Kiểm thử WCAG tự động trong Playwright)
Tích hợp `@axe-core/playwright` để quét trang theo bộ rule WCAG (color-contrast, label, ARIA...) ngay trong Playwright test — `AxeBuilder` …
Page Events: console, pageerror, requestfailed (Bắt tín hiệu và lỗi từ trang)
`page` là EventEmitter: `console` (log của trang), `pageerror` (uncaught exception), `requestfailed`, `response`, `dialog`... Lắng nghe bằn…
page.evaluate, exposeFunction & exposeBinding (Cầu nối Node ↔ Browser)
`page.evaluate` chạy JS bên trong trang để đọc state nội bộ hay thao tác DOM khi locator không đủ; `exposeFunction`/`exposeBinding` đi chiề…
Clock API (Đóng băng và điều khiển thời gian trong trang)
`page.clock` (Playwright 1.45+) cho phép thay thế `Date`, `setTimeout`, `setInterval`, `requestAnimationFrame` của trang bằng fake clock đi…
Offline Mode & Color Scheme (Giả lập mất mạng, dark mode và media features)
Playwright cho phép bật chế độ offline (`context.setOffline`) và giả lập media features (`colorScheme` dark/light, `reducedMotion`, `forced…
Geolocation, Permissions & Locale/Timezone (Giả lập vị trí, quyền trình duyệt, ngôn ngữ, múi giờ)
Browser context options cho phép giả lập tọa độ GPS, cấp/từ chối quyền trình duyệt (geolocation, camera, notifications...) và set locale + …
Device Emulation (Giả lập thiết bị: viewport, userAgent, devices preset)
Device emulation là khả năng giả lập toàn bộ môi trường thiết bị (viewport, userAgent, deviceScaleFactor, isMobile, hasTouch) ở tầng browse…
Cookies & local/session Storage (Đọc ghi trạng thái phía client)
Playwright cho phép thao tác trực tiếp với cookie (context.cookies/addCookies/clearCookies) và storage của trang (localStorage/sessionStora…
storageState & Authentication (Đăng nhập 1 lần, dùng cho mọi test)
storageState là snapshot của cookies + localStorage (và IndexedDB từ bản mới) của một browser context, lưu ra file JSON và nạp lại khi tạo …
WebSockets trong Playwright (Bắt và kiểm tra realtime connection)
Playwright hỗ trợ bắt WebSocket connection qua page.on('websocket'), cho phép đọc từng frame gửi/nhận (framereceived/framesent) để verify a…
Network Events (request, response, requestfailed & waitForResponse)
Playwright phát event cho mọi hoạt động mạng của page: request đi ra, response về, request fail. Kết hợp page.waitForResponse/waitForReques…
APIRequestContext & API Testing (Test API trực tiếp, không cần mở trang)
Playwright có sẵn HTTP client (APIRequestContext) để gọi REST API trực tiếp từ test — không cần browser, không cần thư viện ngoài như axios…
HAR Record & Replay (Ghi và phát lại traffic mạng)
Playwright cho phép ghi toàn bộ request/response của trang ra file HAR (HTTP Archive) lúc chạy test lần đầu, rồi lần sau dùng page.routeFro…
Mock API Responses (route.fulfill — trả dữ liệu giả cho request)
Mock API trong Playwright là dùng page.route kết hợp route.fulfill để trả response tuỳ ý (JSON, file, status code) thay vì để request đến s…
Network Interception với page.route (Chặn và điều khiển request mạng)
page.route là cơ chế của Playwright cho phép chặn mọi HTTP request đi ra từ trang web, rồi quyết định xử lý nó: cho đi tiếp (route.continue…
TestInfo (Metadata của test đang chạy & đính kèm bằng chứng vào report)
TestInfo là object Playwright truyền vào mỗi test chứa metadata về lần chạy hiện tại: title, file, project, retry số mấy, worker, thư mục o…
page.pause() & page.on('console') (Debug nhanh và bắt log trình duyệt)
`page.pause()` là 'breakpoint mềm' dừng test và mở Inspector ngay tại dòng đó; `page.on('console')` / `page.on('pageerror')` lắng nghe mọi …
Playwright VS Code Extension (Run, debug, pick locator ngay trong editor)
Extension Playwright Test for VS Code (chính chủ Microsoft) đưa toàn bộ vòng đời test vào editor: nút play/debug cạnh từng test, breakpoint…
UI Mode (Chế độ giao diện — chạy & soi test trực quan)
`npx playwright test --ui` mở giao diện đồ hoạ để phát triển test: cây test bên trái, watch mode tự chạy lại khi code thay đổi, và time-tra…
Playwright Inspector & PWDEBUG (Debug từng bước với trình inspector)
Playwright Inspector là cửa sổ debug chạy song song trình duyệt: step qua từng action, xem locator được resolve, đọc log auto-wait và pick …
Codegen / Test Generator (Sinh code tự động bằng cách thao tác trình duyệt)
Codegen (`npx playwright codegen`) mở trình duyệt và ghi lại mọi thao tác — click, fill, navigate — thành code Playwright theo thời gian th…
Screenshots & Videos (Chụp màn hình & quay video khi chạy test)
Playwright cung cấp 3 loại bằng chứng khi test chạy: screenshot (ảnh tĩnh), video (quay cả phiên) và trace (xem bài Trace Viewer). Cấu hình…
Trace Viewer (Trình xem trace — phát lại toàn bộ hành trình test)
Trace Viewer là công cụ 'quay ngược thời gian' của Playwright: mỗi action đều kèm DOM snapshot, screenshot, network request và console log …
Merge Reports trên CI (Gộp kết quả khi sharding nhiều máy)
Khi chia test suite thành nhiều shard chạy song song trên nhiều máy CI, mỗi shard sinh ra một report riêng không thể xem chung. Playwright …
Retries & Xử lý Flaky Test (Test chập chờn)
Retry là cơ chế tự động chạy lại test khi fail — giúp CI đỡ fail oan vì test chập chờn (flaky) do timing hay môi trường. Nhưng retry chỉ là…
Reporters (HTML, List, JUnit, Blob, JSON & Custom Reporter)
Reporter quyết định kết quả test được hiển thị và lưu trữ thế nào sau khi chạy. Playwright đi kèm sẵn HTML report kèm trace/screenshot, các…
playwright.config.ts (File cấu hình trung tâm của test suite)
playwright.config.ts là file cấu hình gốc điều khiển toàn bộ hành vi của test run: nơi tìm test, timeout, retry, số worker chạy song song, …
Custom Fixtures (Mở rộng test bằng test.extend)
Fixture là cơ chế dependency injection của Playwright Test — mọi thứ test dùng (page, context, data, Page Object) đều được cung cấp qua fix…
Project Dependencies & Global Setup/Teardown (Chạy setup một lần trước toàn bộ test)
Cơ chế của Playwright cho phép khai báo một project "setup" chạy trước các project test chính (ví dụ login một lần rồi lưu storageState), h…
Projects (multi-browser / multi-env trong playwright.config.ts)
Project là một cấu hình chạy định nghĩa trong playwright.config.ts — mỗi project có browser, viewport, baseURL, grep và dependencies riêng,…
Serial mode — test.describe.serial (chạy tuần tự, phụ thuộc lẫn nhau)
test.describe.serial ép các test trong nhóm chạy tuần tự đúng thứ tự trên cùng một worker, và test trước fail thì test sau bị skip. Nó dành…
Parameterized tests (sinh nhiều test từ dữ liệu)
Parameterized tests là kỹ thuật dùng vòng for/forEach trên mảng dữ liệu để sinh ra nhiều test cùng một kịch bản với input khác nhau — Playw…
Tags & grep (đánh nhãn và lọc test khi chạy)
Tags là nhãn @smoke/@regression/@flaky đặt trong title hoặc qua field `tag` của test, còn --grep/--grep-invert là cờ CLI lọc test theo rege…
Annotations — skip, fixme, fail, slow (đánh dấu trạng thái test)
Annotations là các cờ đánh dấu trạng thái của test: test.skip bỏ qua, test.fixme đánh dấu 'biết hỏng chưa fix', test.fail kỳ vọng fail (kno…
test.step (chia nhỏ test thành các bước có tên)
test.step bọc một nhóm action/assertion thành một bước có tên, hiển thị dạng cây trên HTML report và trace viewer. Nó giải quyết hai vấn đề…
test.describe & Hooks (nhóm test và hàm setup/teardown)
test.describe là block gom các test cùng feature thành một suite trên report, còn hooks (beforeAll/beforeEach/afterEach/afterAll) là các hà…
Visual Comparisons (toHaveScreenshot — so khớp ảnh chụp màn hình)
Visual comparison (snapshot testing) là cơ chế chụp màn hình page/element rồi so pixel với ảnh baseline đã lưu: toHaveScreenshot tạo baseli…
expect.configure & toPass (tuỳ biến retry — poll logic nghiệp vụ)
expect.configure tạo một bản expect riêng với default mới (timeout, soft, message) để không phải lặp option ở từng assertion. Còn expect(..…
Non-retrying Assertions (expect(value) kiểu Jest — assert giá trị đã lấy ra)
Non-retrying assertion là expect kiểu Jest truyền thống: expect(value).toBe(...) kiểm tra một giá trị JavaScript đã có sẵn (số, chuỗi, obje…
Soft Assertions (expect.soft — gom nhiều lỗi một lượt chạy)
expect.soft là cơ chế soft assertion: khi một soft assertion fail, test KHÔNG dừng lại mà chạy tiếp, gom tất cả lỗi lại và chỉ fail ở cuối …
Page Assertions (expect(page) — toHaveTitle / toHaveURL)
expect(page) là nhóm assertion web-first áp trên cả Page object: chủ yếu là toHaveTitle và toHaveURL để kiểm tra tiêu đề tab và địa chỉ hiệ…
expect(locator) Assertions (Web-first assertions trên Locator)
expect(locator) là nhóm assertion 'web-first' của Playwright: thay vì kiểm tra một lần rồi fail ngay, nó tự động retry cho đến khi element …
Navigation & Load States (Điều hướng và trạng thái tải)
Navigation & load states là cách Playwright điều hướng và đo 'độ sẵn sàng' của trang qua các mốc `domcontentloaded`, `load`, `networkidle`.…
Downloads & Uploads (Tải xuống và tải lên file)
Downloads & Uploads là hai hướng file trong test: download được bắt bằng `page.waitForEvent('download')` rồi `download.saveAs()` lưu về máy…
Dialogs (Alert, Confirm, Prompt)
Dialogs là các hộp thoại native của browser: `alert()`, `confirm()`, `prompt()`, `beforeunload`. Chúng chặn toàn bộ page nên không query đư…
Multiple Pages, Tabs & Popups (Nhiều trang và tab)
Multiple pages/tabs là tình huống một hành động (click link `target="_blank"`, OAuth redirect...) mở ra tab/popup mới trong cùng browser co…
Shadow DOM
Shadow DOM là cơ chế đóng gói DOM của Web Components — markup bên trong shadow root bị cách ly với document ngoài nên CSS/XPath thường khôn…
FrameLocator & iframe (Làm việc với nội dung nhúng)
FrameLocator là API của Playwright để thao tác với nội dung bên trong `<iframe>` — thứ mà locator thường không chui vào được. `page.frameLo…
Explicit Waits (Chờ đợi tường minh)
Explicit waits là cơ chế chủ động chờ một điều kiện cụ thể xảy ra (element xuất hiện, response trả về, trạng thái trang, biểu thức JS đúng)…
Keyboard & Mouse Input (Nhập liệu bàn phím và chuột)
Keyboard & Mouse input là nhóm API của Playwright mô phỏng thao tác bàn phím và chuột ở mức thấp (`page.keyboard`, `page.mouse`), bên cạnh …
Tương tác phần tử cơ bản (Click, Fill, Press, Check, Select...)
Bộ API tương tác cơ bản của Locator: click, dblclick, fill, press, check/uncheck, selectOption, hover, clear, type. Tất cả đều đi qua actio…
Locator vs ElementHandle (Đối tượng mới vs legacy)
ElementHandle là API thế hệ cũ của Playwright (và Puppeteer): nó giữ tham chiếu TRỰC TIẾP tới một DOM node cụ thể. Locator ra đời để thay t…
Strict Mode (Chế độ nghiêm ngặt — một action một element)
Strict mode là luật bất biến của Playwright: một action trên locator chỉ được phép resolve ra ĐÚNG 1 element — match 0 hoặc 2+ đều throw lỗ…
Filtering & Chaining Locators (Lọc & lồng locator)
Filtering & chaining là kỹ thuật thu hẹp phạm vi locator: `.filter()` lọc danh sách theo điều kiện (hasText, has, hasNot, visible), `and_()…
data-testid Attribute (Hợp đồng ổn định giữa Dev & QA)
data-testid là attribute HTML chuyên dụng cho automation — không ảnh hưởng UI, không bị CSS/JS dùng, và chỉ đổi khi team chủ động đổi. Play…
CSS & XPath Selectors (Selector truyền thống & fallback engines)
CSS & XPath là hai ngôn ngữ selector kinh điển mà Playwright hỗ trợ qua engine `css=` (mặc định) và `xpath=`, cộng thêm engine tiện ích `te…
getBy* Locators (Bộ locator theo ngữ nghĩa người dùng)
getBy* là bộ locator ưu tiên số 1 của Playwright: getByRole, getByText, getByLabel, getByPlaceholder, getByTestId, getByAltText, getByTitle…
Locator (Định vị phần tử — trái tim của Playwright)
Locator là đối tượng đại diện cho một hoặc nhiều phần tử trên trang — khái niệm trung tâm của Playwright. Khác với cách lấy element truyền …