Các Câu Hỏi Phỏng Vấn XPath và CSS Selector

Nếu bạn đang chuẩn bị phỏng vấn cho vị trí Tester, QA, Automation Engineer hoặc Web Scraper, thì việc nắm vững kiến thức về XPath và CSS Selector là điều không thể thiếu. Đây là hai công cụ mạnh mẽ dùng để định vị phần tử trên trang web — cực kỳ quan trọng trong Selenium, Playwright, hoặc web automation.

Bài viết này sẽ giúp bạn tổng hợp những câu hỏi phỏng vấn XPath và CSS Selector thường gặp, từ cơ bản đến nâng cao, kèm theo ví dụ minh hoạ dễ hiểu.

1. XPath là gì? CSS Selector là gì?

XPath (XML Path Language) là một ngôn ngữ dùng để truy vấn các phần tử trong tài liệu XML/HTML.

CSS Selector là cách chọn phần tử dựa trên quy tắc của CSS.

So sánh nhanh:

Tiêu chí	XPath	CSS Selector
Hỗ trợ truy ngược	✅ Có (`parent`, `ancestor`)	❌ Không hỗ trợ
Tốc độ	⚠️ Chậm hơn một chút	⚡ Nhanh hơn, native trong trình duyệt
Dễ viết	❌ Cú pháp phức tạp hơn	✅ Ngắn gọn hơn
Khả năng lọc nâng cao	✅ Rất mạnh	⚠️ Hạn chế

2. Sự khác nhau giữa XPath tuyệt đối và tương đối

XPath tuyệt đối: bắt đầu từ gốc html, ví dụ: /html/body/div[2]/form/input
XPath tương đối: linh hoạt hơn, bắt đầu với //, ví dụ: //input[@name='email']

⚠️ Lưu ý: XPath tuyệt đối dễ bị gãy khi cấu trúc DOM thay đổi.

3. Cách chọn phần tử bằng XPath và CSS Selector

✅ Chọn theo ID, class, thuộc tính:

Mục tiêu	XPath	CSS Selector
ID	`//*[@id='login']`	`#login`
Class	`//*[@class='btn']`	`.btn`
Thuộc tính	`//input[@type='text']`	`input[type='text']`

4. Cách chọn phần tử con, anh em (sibling)

Chọn con trong XPath: //div[@class='container']/span
Chọn anh em (sibling):
- XPath: //label[@for='email']/following-sibling::input
- CSS: label + input

5. Chọn phần tử theo vị trí (ví dụ: phần tử thứ 3)

XPath: //ul/li[3]
CSS Selector: ul li:nth-child(3)

6. Khi nào nên dùng XPath, khi nào nên dùng CSS Selector?

Dùng XPath khi:
- Cần truy phần tử cha (parent) hoặc tổ tiên (ancestor)
- Cần xử lý các điều kiện phức tạp
Dùng CSS Selector khi:
- Cần tốc độ và cú pháp đơn giản
- Làm việc với các tool hỗ trợ native như Cypress

7. Làm sao xử lý khi phần tử có class hoặc ID thay đổi động?

XPath: //*[contains(@id, 'user_')]
CSS Selector: [id^='user_'] (bắt đầu bằng)

👉 Đây là kỹ thuật phổ biến khi làm automation test với UI có phần tử sinh ra từ framework như React, Angular.

8. Một số hàm hữu ích trong XPath bạn nên biết

text() – Lấy nội dung text
contains() – Kiểm tra phần chứa
starts-with() – Kiểm tra phần bắt đầu
last() – Phần tử cuối cùng
position() – Vị trí phần tử

9. Top 10 Câu hỏi nâng cao thường gặp trong phỏng vấn

So sánh // và / trong XPath?
- //: chọn từ node hiện tại đến bất kỳ node con nào (dù ở cấp nào)
- /: chỉ chọn node con trực tiếp
Cách chọn phần tử cuối cùng trong danh sách?
- XPath: (//ul/li)[last()]
- CSS: ul li:last-child (hạn chế hơn)

Việc thành thạo XPath và CSS Selector sẽ giúp bạn dễ dàng xử lý các tình huống phức tạp trong automation testing hoặc web scraping. Nắm rõ những câu hỏi phỏng vấn XPath, CSS Selector trên sẽ là lợi thế lớn để bạn tự tin hơn khi tham gia tuyển dụng.

9.1. Làm sao chọn phần tử theo nội dung text?

XPath: //button[text()='Đăng nhập'] //p[contains(text(),'Chào mừng')]
CSS Selector:
- ❌ Không hỗ trợ chọn theo nội dung text.

👉 Đây là điểm mạnh rõ ràng của XPath so với CSS.

9. 2. XPath `following` và `preceding` dùng để làm gì?

following: chọn tất cả các phần tử nằm sau node hiện tại (không nhất thiết cùng cấp). //label[@for='email']/following::input
preceding: chọn tất cả phần tử nằm trước node hiện tại. //input[@id='email']/preceding::label

👉 Hữu ích khi phần tử cần chọn không nằm trong cùng cha.

9.3. Phân biệt `contains()` và `starts-with()` trong XPath?

contains(attribute, 'value'): kiểm tra xem giá trị thuộc tính có chứa chuỗi con hay không. //div[contains(@class, 'btn')]
starts-with(attribute, 'value'): kiểm tra xem giá trị bắt đầu bằng chuỗi con. //input[starts-with(@id, 'user_')]

9.4. Làm sao kết hợp nhiều điều kiện trong XPath?

Dùng and, or, ví dụ: //input[@type='text' and @name='username'] //div[@class='card' or @class='panel']

9.5. Có thể dùng regex trong XPath không?

XPath không hỗ trợ regex trực tiếp, nhưng có thể dùng matches() trong XPath 2.0 trở lên (không phải Selenium thường dùng). //div[matches(@class, '^btn-[a-z]+$')]
Với Selenium (XPath 1.0), bạn nên dùng contains() hoặc starts-with() thay thế.

9.6. Có thể kết hợp XPath và CSS Selector trong cùng một lệnh không?

Không. Selenium không hỗ trợ mix XPath và CSS trong một câu lệnh.
Tuy nhiên, bạn có thể dùng các bước tách riêng: element = driver.find_element(By.CSS_SELECTOR, ".container") child = element.find_element(By.XPATH, ".//span[contains(text(),'Hello')]")

9.7. XPath `normalize-space()` dùng để làm gì?

Dùng để loại bỏ khoảng trắng thừa trong text: //label[normalize-space(text())='Tên người dùng']

👉 Hữu ích khi text trên HTML có xuống dòng, thụt đầu dòng, hoặc thừa dấu cách.

9.8. Cách viết XPath chọn tất cả phần tử có class chứa “btn” và không chứa “disabled”?

//button[contains(@class, 'btn') and not(contains(@class, 'disabled'))]

9.9. Có thể viết XPath chọn phần tử theo thứ tự từ cuối lên đầu không?

Có thể dùng last(), ví dụ: (//ul/li)[last()-1] // phần tử li áp chót

9.10. XPath và CSS Selector — cái nào đáng tin cậy hơn trong automation?

XPath: Linh hoạt hơn, nhưng dễ gãy nếu cấu trúc DOM thay đổi nhiều.
CSS Selector: Tốt hơn nếu UI ổn định, tốc độ nhanh hơn, syntax gọn.
✅ Kết luận: Dùng CSS khi có thể, dùng XPath khi cần logic phức tạp.