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!