[Playwright Interview question #10]: Làm thế nào để test trên mobile viewport?

Câu hỏi phỏng vấn #10: Làm thế nào để test trên mobile viewport?

Trả lời mẫu:

Playwright hỗ trợ mobile testing qua device emulation:

1. Sử dụng predefined devices:

const { devices } = require('@playwright/test');

// Trong config
projects: [
  {
    name: 'iPhone 13',
    use: { ...devices['iPhone 13'] }
  },
  {
    name: 'Galaxy S9+',
    use: { ...devices['Galaxy S9+'] }
  }
]

2. Custom viewport size:

const context = await browser.newContext({
  viewport: { width: 375, height: 812 },
  isMobile: true,
  hasTouch: true,
  deviceScaleFactor: 3
});

3. Test responsive design:

test('responsive menu', async ({ page }) => {
  // Desktop view
  await page.setViewportSize({ width: 1920, height: 1080 });
  await expect(page.locator('.desktop-menu')).toBeVisible();
  
  // Mobile view
  await page.setViewportSize({ width: 375, height: 667 });
  await expect(page.locator('.mobile-menu')).toBeVisible();
});

4. Emulate mobile features:

const context = await browser.newContext({
  ...devices['iPhone 13'],
  permissions: ['geolocation'],
  geolocation: { latitude: 52.52, longitude: 13.39 },
  locale: 'vi-VN'
});

💡 Tips:

• Test cả portrait và landscape orientation
• Kiểm tra touch events và gestures
• Test offline mode với page.context().setOffline(true)
• Dùng device list: npx playwright show-devices

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!