Câu hỏi phỏng vấn #23: Explain different types of selectors supported by Playwright.
Trả lời mẫu:
1. CSS Selectors:
await page.locator('.class-name').click();
await page.locator('#id-value').click();
await page.locator('[data-test="submit"]').click();
2. Text Selectors:
// Exact text
await page.locator('text=Submit').click(); // Partial text
await page.locator('text=/Submit/').click(); // Case insensitive
await page.locator('text=/submit/i').click();
3. XPath Selectors:
await page.locator('xpath=//button[@type="submit"]').click();
await page.locator('//div[@class="container"]//button').click();
4. Role Selectors (ARIA):
await page.getByRole('button', { name: 'Submit' }).click();
await page.getByRole('textbox', { name: 'Email' }).fill('test@example.com');
await page.getByRole('checkbox').check();
5. Test ID Selectors:
await page.getByTestId('submit-button').click();
// Requires data-testid attribute
6. Chaining & Filtering:
// Chain selectors
await page.locator('article').filter({ hasText: 'Playwright' }).click(); // Nth selector
await page.locator('button').nth(2).click(); // Has selector
await page.locator('article', { has: page.locator('.highlight') }).click();
7. Custom Selectors:
// Register custom selector engine
await selectors.register('tag', { query(root, selector) { return root.querySelector(`[data-tag="${selector}"]`); }
});
💡 Tips:
- Prefer role selectors cho accessibility
- data-testid cho stability
- Avoid complex CSS/XPath selectors
- Use Playwright Inspector để pick selectors
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!