[Playwright Interview question #6]: Làm sao để chờ element xuất hiện trước khi tương tác?

Câu hỏi phỏng vấn #6: Làm sao để chờ element xuất hiện trước khi tương tác?

Trả lời mẫu:

Playwright có nhiều cách để wait for elements:

1. Auto-waiting (Recommended):

// Tự động chờ element visible & enabled
await page.locator('#submit').click();

2. Wait for specific state:

// Chờ element visible
await page.locator('#loading').waitFor({ state: 'visible' });

// Chờ element biến mất
await page.locator('.spinner').waitFor({ state: 'hidden' });

// Chờ element attached to DOM
await page.locator('#dynamic').waitFor({ state: 'attached' });

3. Wait với timeout tùy chỉnh:

await page.locator('#slow-element').waitFor({ 
  state: 'visible',
  timeout: 10000 // 10 seconds
});

4. Wait for multiple conditions:

// Chờ text xuất hiện
await expect(page.locator('.message')).toContainText('Success');

// Chờ element count
await expect(page.locator('.item')).toHaveCount(5);

💡 Tips:

• Playwright auto-wait mặc định 30 seconds
• Ưu tiên dùng auto-waiting của Locator API
• Tránh dùng fixed wait như page.waitForTimeout()
• Config global timeout trong playwright.config.js

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!