[Playwright Typescript] Bài 9 - Dùng evaluate() và Xử lý Widgets (Lịch & Bảng)

const myButton = page.locator('#my-btn');

const bgColor = await myButton.evaluate(el => {
  return window.getComputedStyle(el).getPropertyValue('background-color');
});
// 'bgColor' bây giờ sẽ là giá trị thật: "rgb(255, 0, 0)"

const locator = page.locator('#my-element');

const data = await locator.evaluate(el => {
  // Toàn bộ code này chạy bên trong trình duyệt (rất nhanh)
  return {
    a: el.getAttribute('data-a'),
    b: el.getAttribute('data-b'),
    c: el.getAttribute('data-c'),
    text: el.textContent
  };
}); 
// data = { a: '...', b: '...', c: '...', text: '...' }
// Chỉ mất 1 lệnh khứ hồi duy nhất.

const input = panel.locator('#eh-input');

await input.evaluate((el: HTMLInputElement) => {  
  // 1. Lấy hàm setter "gốc" của trình duyệt
  const setter = Object.getOwnPropertyDescriptor(    
    window.HTMLInputElement.prototype,    
    'value'  
  )?.set;  
  
  // 2. Gọi hàm setter đó để gán giá trị
  setter?.call(el, 'Hello evaluate');  
  
  // 3. Gửi sự kiện 'input' để thông báo cho React
  el.dispatchEvent(new Event('input', { bubbles: true }));
});

Phần 2: 📅 Xử lý Date Picker (Lịch) với date-fns

Khi xử lý Date Picker (công cụ chọn lịch), chúng ta có 2 chiến lược:

Chiến lược "Mù quáng" (Kém hiệu quả): Click nút "Next" hoặc "Prev" lặp đi lặp lại. Trong mỗi vòng lặp, đọc text của tháng/năm trên UI (await locator.textContent()) để xem đã đến đúng tháng/năm chưa.

Nhược điểm: Rất chậm (vì nhiều hành động click và read) và không đáng tin cậy.

Chiến lược "Tính toán" (Hiệu quả ): Sử dụng một thư viện (như date-fns) để tính toán chính xác số lần cần click trước khi tương tác với UI.

Ưu điểm: Cực kỳ nhanh (chỉ click đúng số lần) và ổn định.

date-fns là gì? (Bộ công cụ của bạn 🔧)

Date object (đối tượng Ngày) gốc của JavaScript rất khó dùng. Việc cộng/trừ tháng, tính toán chênh lệch, hay format (định dạng) ngày đều rất phức tạp và dễ gây lỗi.

date-fns là một thư viện JavaScript hiện đại, nhẹ, cung cấp các hàm "an toàn" để xử lý mọi thao tác về ngày/tháng.

Nó giống như một bộ "cờ lê" chuyên dụng. Thay vì bạn phải tự "gõ búa" để xử lý Date, date-fns đưa cho bạn đúng dụng cụ bạn cần.

Các hàm date-fns hay dùng

parse(ymd, 'yyyy-MM-dd', ...): "Dịch" 📝

Nghĩa là: Lấy một chuỗi (string) như "2025-10-29" và "dịch" (parse) nó thành một đối tượng Date thật mà máy tính hiểu được.

isValid(parsed): "Kiểm tra" ✅

Nghĩa là: Kiểm tra xem kết quả của parse có phải là một ngày hợp lệ không (ví dụ: "2025-02-30" là không hợp lệ).

startOfMonth(date): "Reset về đầu tháng" 🗓️

Nghĩa là: Lấy một ngày bất kỳ (ví dụ: 2025-10-29) và trả về đối tượng Date của ngày đầu tiên trong tháng đó (2025-10-01). Việc này rất quan trọng để so sánh 2 tháng với nhau.

differenceInMonths(targetDate, currentDate): "Đo chênh lệch" 📏

Nghĩa là: Tính toán xem có bao nhiêu tháng chênh lệch giữa hai ngày. Đây là "bộ não" của thuật toán.

differenceInMonths('2025-03-01', '2025-01-01') ➜ trả về 2.

differenceInMonths('2025-01-01', '2025-03-01') ➜ trả về -2.

getMonth(parsed) / getYear(parsed): "Lấy thông tin" 🏷️

Nghĩa là: Lấy số tháng (0-11) hoặc số năm từ một đối tượng Date.

Đây là các bước chi tiết cho một "thuật toán" xử lý Date Picker hiệu quả, không phụ thuộc vào UI (UI-independent) mà dựa trên tính toán logic.

Chiến lược này tránh việc "đọc" UI trong một vòng lặp (vốn rất chậm). Thay vào đó, chúng ta tính toán mọi thứ trong JavaScript trước, sau đó mới ra lệnh cho Playwright thực thi.

📦 Bước 1: Xác định Trạng thái (Define States)

Bạn cần xác định 2 điểm thời gian:

Ngày Mục tiêu (Target Date): Là ngày bạn muốn chọn (ví dụ: "2025-08-29"). Bạn cần "dịch" (parse) nó từ chuỗi (string) thành một đối tượng Date (dùng parse của date-fns).

Ngày Hiện tại (Current Date): Là tháng/năm mà Date Picker hiển thị khi vừa mở.

Lưu ý quan trọng: Bạn phải biết trạng thái bắt đầu này. Trong hầu hết các trường hợp, nó là new Date() (ngày giờ hệ thống hiện tại).

🗓️ Bước 2: Chuẩn hóa (Normalize)

Bạn không quan tâm đến ngày 29 hay 05; bạn chỉ quan tâm đến tháng/năm để điều hướng.

Hãy "reset" cả hai ngày về ngày đầu tiên của tháng (dùng startOfMonth) để so sánh chúng một cách công bằng.

Target: 2025-08-29 ➜ 2025-08-01

Current: 2025-11-05 (ví dụ) ➜ 2025-11-01

🧮 Bước 3: Tính toán Chênh lệch (Calculate the Difference)

Đây là "bộ não" 🧠 của thuật toán.

Sử dụng differenceInMonths(Target, Current).

Hàm này sẽ trả về một số nguyên (âm, dương, hoặc 0) cho biết chính xác số lần bạn cần click.

Ví dụ:

differenceInMonths('2025-08-01', '2025-11-01') ➜ trả về -3

(Nghĩa là: "Mục tiêu của bạn là -3 tháng so với hiện tại").

👆 Bước 4: Thực thi Điều hướng (Execute Navigation)

Bây giờ, bạn "thực thi" con số bạn vừa tính toán:

Đọc kết quả (monthsDiff).

Nếu monthsDiff < 0 (bằng -3):

Gán button = page.locator('#prev-button')

Gán clicks = Math.abs(-3) (là 3)

Nếu monthsDiff > 0 (ví dụ: là 2):

Gán button = page.locator('#next-button')

Gán clicks = 2

Dùng một vòng lặp for để click button đúng clicks lần.

Kết quả: Sau bước này, bạn đảm bảo 100% rằng UI của Date Picker đang hiển thị đúng tháng/năm bạn cần (ví dụ: Tháng 8, 2025).

✅ Bước 5: Chọn và Kiểm tra (Select and Verify)

Sau khi đã ở đúng "trang lịch", giờ bạn mới thực hiện hành động cuối cùng:

Chọn (Select): Tìm ngày chính xác. Đây là lúc bạn dùng một locator thật cụ thể, không thể nhầm lẫn (ví dụ này dùng data-date vì nó là duy nhất, nhưng getByRole('button', { name: '29' }) cũng tốt).

const dayCell = panel.locator(`[data-date='${ymd}']`);

await dayCell.click();

Kiểm tra (Verify): Kiểm tra xem input hoặc text hiển thị kết quả có đúng là giá trị bạn đã chọn hay không.

const panel = page.getByRole('tabpanel', { name: '📊 Table' });

// 1. Đợi table render
const table = panel.locator('table').first();
await table.waitFor({ state: 'visible' });

// 2. Lấy tất cả rows (không bao gồm header)
const rows = table.locator('tbody tr');
const rowCount = await rows.count();
console.log('Total rows:', rowCount);

// 3. Lặp qua từng row và lấy dữ liệu
const tableData = [];
for (let i = 0; i < rowCount; i++) {
  const row = rows.nth(i);
  const cells = row.locator('td');
    
  // ⚠️ Vấn đề nằm ở đây ⚠️
  const data = {
    project: await cells.nth(0).textContent(),
    client: await cells.nth(1).textContent(),
    startDate: await cells.nth(2).textContent(),
    // ...
  };
    
  tableData.push(data);
}

/**
 * Thuật toán tạo "Bản đồ Cột"
 * Nó đọc <th> và trả về: Map { 'Project' => 0, 'Client' => 1, 'Priority' => 5 }
 */
async function createHeaderMap(tableLocator) {
  const headerMap = new Map<string, number>();
  
  // 1. Lấy tất cả tiêu đề
  const headers = tableLocator.locator('thead th');
  const count = await headers.count();

  // 2. Lặp qua tiêu đề (chỉ C cột, rất nhanh)
  for (let i = 0; i < count; i++) {
    const headerText = await headers.nth(i).textContent();
    if (headerText) {
      // 3. Tạo Map
      headerMap.set(headerText.trim(), i);
    }
  }
  return headerMap;
}

// 1. Lấy bản đồ (chỉ chạy 1 lần)
const table = panel.locator('table').first();
const headerMap = await createHeaderMap(table);

// 2. Lọc "hàng nào": Dùng locator:has-text để tìm 1 hàng
// (Playwright làm việc này CỰC KỲ nhanh)
const row = table.locator('tbody tr', { hasText: 'Apollo UI' });

// 3. Lấy "cột nào": Dùng bản đồ
const priorityIndex = headerMap.get('Priority'); // Ví dụ: trả về 5

// 4. Lấy ô cụ thể và kiểm tra
// (Chúng ta chỉ chạy 2-3 lệnh await thay vì 3501)
const priorityCell = row.locator('td').nth(priorityIndex);
await expect(priorityCell).toHaveText('High');

// (Giả sử đã có headerMap)
const headerMap = await createHeaderMap(table);

// Lấy index cột bạn cần
const projectIndex = headerMap.get('Project'); // 0
const clientIndex = headerMap.get('Client');   // 1
const priorityIndex = headerMap.get('Priority'); // 5

const tableData = [];
for (let i = 0; i < rowCount; i++) {
  const row = rows.nth(i);
  const cells = row.locator('td');
    
  // KHÔNG DÙNG nth(0), nth(1)
  // DÙNG index từ bản đồ:
  const data = {
    project: await cells.nth(projectIndex).textContent(),
    client: await cells.nth(clientIndex).textContent(),
    priority: await cells.nth(priorityIndex).textContent(),
    // ...
  };
  tableData.push(data);
}