Website and API Testing Automation with Playwright Javascript Typescript (KHÔNG DẠY CODE JS TS)

• 🛠️ Hướng dẫn cài đặt môi trường

• 🚀 Khởi tạo dự án Playwright

• 📊 Chạy test và xem báo cáo

• 🔬 Phân tích sâu về page object

🏗️ Phần 1: Nền tảng - Cấu trúc một File Test Chuyên nghiệp

🚀 Phần 2: Tăng tốc - Sử dụng Playwright Codegen

✅ Nền tảng & Triết lý:

✅ Làm chủ Locator Hướng tới Người dùng

✅ Nắm vững Chiến lược Dự phòng:

✅ Sử dụng Locator Kỹ thuật (CSS & XPath)

✅ Khai phá Sức mạnh Quan hệ của Playwright

🛡️ Tin tưởng Auto-Waiting trên Hành Động (Actions) 

🎯 Dùng Web-First Assertions làm "Chốt Chặn An Toàn" 

🚀 Làm chủ page.goto() với waitUntil

✅ Kỹ thuật Lấy Dữ liệu: Hiểu rõ và sử dụng hiệu quả .textContent(), .innerText(), .getAttribute(), .inputValue(), .allTextContents(), và xử lý Strict Mode.

✅ Khẳng định Giá trị Tức thời: Nắm vững các expect thông thường (toBe, toEqual, toContain, toHaveLength, objectContaining, arrayContaining) để kiểm tra dữ liệu.

Hiểu rõ 'Actionability' ⏳✅

Từ click() đến dragTo() 🖱️🖐️

Gửi phím tắt hiệu quả ⌨️⚡

☑️ Dùng setChecked() cho checkbox/radio (role=checkbox) và click() cho element "giả".

⬇️ Phân biệt selectOption() (cho ) và click() (cho custom dropdowns).

⚠️ Xử lý alert, confirm của trình duyệt bằng page.on('dialog') (lắng nghe trước).

🖥️ Tương tác với HTML Modals (React/AntD) bằng locator (ví dụ: getByRole('dialog')).

🔄 Dùng page.once để xử lý nhiều dialogs (OK/Cancel) trong cùng một test.

📤 Xử lý upload (kể cả input ẩn) bằng setInputFiles và download bằng waitForEvent.

🖼️ Tương tác với iframe (ví dụ: cổng thanh toán, quảng cáo) bằng page.frameLocator().

🗄️ Tự động "xuyên" Shadow DOM (Open) để tìm element như bình thường.

🔒 Hiểu rõ giới hạn của Shadow DOM (Closed) và khi nào bắt buộc dùng evaluate().

🏞️ Phát hiện ảnh hỏng (404/CORS) bằng evaluate (check naturalWidth) và network response.

🧠 Dùng evaluate() để tối ưu (1 round trip) hoặc đọc thuộc tính "ẩn" (như scrollTop, localStorage).

✅ Tránh evaluate(): Luôn ưu tiên hàm gốc (như textContent(), inputValue()) vì có auto-waiting.

📅 Xử lý Date Picker: Dùng date-fns (như differenceInMonths) để tính toán số lần click trước, thay vì lặp và đọc UI.

📊 Xử lý Table (Bảng): Dùng "Header Map" (Ánh xạ Cột) để chống lỗi (robust) khi thứ tự cột thay đổi.

⚡️ Tối ưu Table: Dùng locator:has-text (lọc hàng) + "Header Map" (lọc cột) để lấy 1 ô (cell) nhanh nhất.