[Playwright Interview question #26]: Sự khác biệt giữa page.evaluate và page.evaluateHandle?

Câu hỏi phỏng vấn #26: What is the difference between page.evaluate and page.evaluateHandle?

Trả lời mẫu:

1. page.evaluate() - Returns serializable values:

// Returns JavaScript primitive values
const innerText = await page.evaluate(() => {
  return document.querySelector('h1').innerText;
});
console.log(innerText); // "Welcome"

// Returns JSON-serializable objects
const data = await page.evaluate(() => {
  return {
    title: document.title,
    url: window.location.href
  };
});

2. page.evaluateHandle() - Returns JSHandle:

// Returns handle to in-page object
const elementHandle = await page.evaluateHandle(() => {
  return document.querySelector('#complex-element');
});

// Can perform actions on handle
await elementHandle.click();
await elementHandle.dispose(); // Clean up

3. Use Cases Comparison:

// ❌ Wrong - Cannot return DOM element with evaluate
const element = await page.evaluate(() => {
  return document.querySelector('button'); // Returns null/undefined
});

// ✅ Correct - Use evaluateHandle for DOM elements
const elementHandle = await page.evaluateHandle(() => {
  return document.querySelector('button');
});

4. Working with Complex Objects:

// evaluateHandle for non-serializable objects
const windowHandle = await page.evaluateHandle(() => window);

// Execute methods on handle
const url = await windowHandle.evaluate(window => window.location.href);

5. Performance Considerations:

// evaluate - data serialized and sent
const texts = await page.evaluate(() => {
  return Array.from(document.querySelectorAll('p'))
    .map(p => p.innerText);
});

// evaluateHandle - keeps reference in browser
const nodesHandle = await page.evaluateHandle(() => {
  return document.querySelectorAll('p');
});

💡 Tips:

• Use evaluate() cho simple data extraction
• Use evaluateHandle() cho DOM manipulation
• Remember to dispose() handles để free memory
• evaluate() có overhead của serialization

Lời Kết

Playwright đang trở thành một trong những automation frameworks phổ biến nhất cho web testing. Thông qua series này, hy vọng bạn sẽ:

• Nắm vững kiến thức từ cơ bản đến nâng cao
• Tự tin trong các buổi phỏng vấn
• Áp dụng hiệu quả vào dự án thực tế
• Trở thành một phần của cộng đồng Playwright Việt Nam năng động

📚 Bắt đầu hành trình của bạn với: Bài 1: Playwright vs Selenium

💬 Có câu hỏi? Tham gia group Facebook của chúng mình!

⭐ Theo dõi series để không bỏ lỡ bài viết mới!