Bài 4: Selector là gì? CSS, XPath, Id, Name, Class, LinkText khác nhau thế nào?

Mục tiêu của bài này

Sau khi đọc xong bài này, bạn cần nắm được:

• selector là gì
• vì sao Automation muốn thao tác đúng thì phải có selector đúng
• các loại selector phổ biến trong MMO Antidetect Browser
• khi nào nên dùng CSS, khi nào nên dùng XPath
• những lỗi selector nào người mới hay gặp nhất

Selector là gì?

Khi bạn dùng Automation để:

• nhấp vào một nút
• nhập dữ liệu vào một ô
• chờ một phần tử xuất hiện
• lấy nội dung của một vùng trên trang

thì phần mềm phải biết chính xác nó cần thao tác với phần tử nào.

Selector chính là cách để chỉ ra phần tử đó.

Hiểu đơn giản:
selector giống như “địa chỉ” của một phần tử trên trang web.

Ví dụ:

• ô nhập email
• nút đăng nhập
• dòng thông báo lỗi
• nút xác nhận
• hộp tìm kiếm

Nếu selector đúng, phần mềm sẽ tìm được đúng phần tử để thao tác.
Nếu selector sai, phần mềm sẽ không tìm thấy gì hoặc tìm nhầm phần tử.

Vì sao selector quan trọng đến vậy?

Trong Automation, rất nhiều action cần selector, ví dụ:

• chờ phần tử
• click phần tử
• nhập text
• lấy text
• cuộn đến phần tử
• thao tác với iframe hoặc popup

Điều đó có nghĩa là:
selector là nền móng của rất nhiều bước trong script.

Bạn có thể viết đúng thứ tự bước, đúng logic, đúng dữ liệu, nhưng nếu selector sai thì script vẫn thất bại.

Nói ngắn gọn:

• selector đúng -> action có cơ hội chạy đúng
• selector sai -> action gần như chắc chắn lỗi

Các loại selector phổ biến trong MMO Antidetect Browser

Trong Automation, bạn sẽ thường gặp các kiểu selector như:

• CssSelector
• XPath
• Id
• Name
• ClassName
• TagName
• LinkText
• PartialLinkText

Không phải lúc nào bạn cũng cần dùng tất cả. Thực tế, người dùng thường dùng nhiều nhất là:

• CssSelector
• XPath
• Id
• Name

Các loại còn lại phù hợp với một số tình huống cụ thể.

1. CssSelector là gì?

CssSelector là cách chọn phần tử bằng cú pháp CSS.

Ví dụ:

input[name='email']
button[type='submit']
#login
.form-login .btn-primary

Khi nào nên dùng CssSelector?

Bạn nên ưu tiên dùng CSS khi:

• phần tử có id, name, class, data-* rõ ràng
• cấu trúc HTML không quá phức tạp
• bạn muốn selector ngắn, gọn, dễ đọc

Ưu điểm của CssSelector

• ngắn gọn
• dễ đọc
• dễ bảo trì
• thường là lựa chọn đầu tiên cho đa số tình huống

Nhược điểm của CssSelector

• có những trường hợp khó diễn đạt hơn XPath
• nếu class trên web thay đổi liên tục thì selector dễ hỏng

Ví dụ CssSelector

Ví dụ 1: chọn ô email theo name

input[name='email']

Ví dụ 2: chọn nút đăng nhập theo class

button.login-btn

Ví dụ 3: chọn nút trong một khu vực cụ thể

.form-login button[type='submit']

2. XPath là gì?

XPath là cách chọn phần tử dựa trên cấu trúc cây của HTML.

Ví dụ:

//input[@name='email']
//button[text()='Đăng nhập']
//div[@class='form-login']//input[@type='password']

Khi nào nên dùng XPath?

Bạn nên dùng XPath khi:

• CSS khó biểu diễn phần tử bạn cần tìm
• bạn muốn tìm theo text hiển thị
• bạn muốn đi theo cấu trúc cha-con-phía trong
• bạn cần lọc phần tử theo điều kiện cụ thể hơn

Ưu điểm của XPath

• rất mạnh
• linh hoạt
• có thể tìm theo text
• phù hợp với các giao diện web phức tạp

Nhược điểm của XPath

• dài hơn CSS
• khó đọc hơn CSS
• người mới dễ viết sai cú pháp

Ví dụ XPath

Ví dụ 1: chọn ô email theo name

//input[@name='email']

Ví dụ 2: chọn nút có text “Đăng nhập”

//button[text()='Đăng nhập']

Ví dụ 3: chọn nút chứa một phần text

//button[contains(text(),'Đăng nhập')]

3. Id là gì?

Id là cách chọn phần tử bằng thuộc tính id.

Ví dụ:
nếu phần tử có:

<input id="email-login">

thì bạn chỉ cần dùng:

Khi nào nên dùng Id?

Nên dùng khi phần tử có id rõ ràng, ổn định, không thay đổi.

Ưu điểm

• đơn giản nhất
• dễ dùng nhất
• dễ đọc nhất

Nhược điểm

• không phải trang nào cũng có id tốt
• có những website sinh id động, mỗi lần tải trang lại khác

4. Name là gì?

Name là cách chọn phần tử theo thuộc tính name.

Ví dụ:
nếu có phần tử:

<input name="email">

thì bạn có thể dùng giá trị:

email

Khi nào nên dùng Name?

Nên dùng khi:

• ô input có name rõ ràng
• name ổn định qua nhiều lần tải trang

Ưu điểm

• đơn giản
• dễ dùng
• rất phù hợp với ô nhập liệu

Nhược điểm

• có thể có nhiều phần tử trùng name
• không phải trang nào cũng đặt name rõ ràng

5. ClassName là gì?

ClassName là cách chọn phần tử theo class CSS.

Ví dụ:
nếu có:

<button class="btn-login">

thì có thể dùng:

btn-login

Cần lưu ý gì?

Nhiều website dùng class động hoặc nhiều class ghép với nhau. Vì vậy, ClassName thường không phải lựa chọn tốt nhất nếu class dễ thay đổi.

Khi nào nên dùng?

• khi class đơn giản
• khi class ổn định
• khi không có cách chọn tốt hơn

6. TagName là gì?

TagName là cách chọn theo tên thẻ HTML như:

• input
• button
• a
• div

Ví dụ:

button

Có nên dùng không?

Chỉ nên dùng trong tình huống rất đơn giản hoặc kết hợp logic khác, vì một trang có thể có rất nhiều thẻ button, input, div.

Nếu dùng riêng lẻ, TagName rất dễ chọn nhầm.

7. LinkText là gì?

LinkText dùng để chọn thẻ link theo đúng nội dung text hiển thị.

Ví dụ nếu trang có link:

<a href="/login">Đăng nhập</a>

thì bạn có thể dùng:

Đăng nhập

Khi nào nên dùng?

• khi phần tử là link thật
• text hiển thị rõ ràng
• nội dung text ổn định

8. PartialLinkText là gì?

PartialLinkText giống LinkText, nhưng chỉ cần khớp một phần nội dung.

Ví dụ link là:

<a href="/login">Đăng nhập tài khoản</a>

thì bạn có thể dùng:

Đăng nhập

Khi nào nên dùng?

• khi text đầy đủ quá dài
• khi chỉ cần khớp một phần text đặc trưng

Nên dùng CSS hay XPath?

Đây là câu hỏi người mới hỏi nhiều nhất.

Câu trả lời thực tế là:

Nên ưu tiên CSS khi:

• phần tử có id, name, class, data-* rõ ràng
• bạn muốn selector ngắn và dễ đọc
• bạn không cần tìm theo text hiển thị

Nên dùng XPath khi:

• bạn cần tìm theo text
• cấu trúc HTML phức tạp
• CSS khó diễn tả phần tử cần tìm
• bạn cần đi theo quan hệ cha-con rõ ràng

Kết luận ngắn gọn:

• dễ và gọn: ưu tiên CssSelector
• phức tạp và linh hoạt: dùng XPath

Selector tốt là selector như thế nào?

Một selector tốt thường có các đặc điểm sau:

• tìm đúng phần tử
• ngắn gọn
• dễ đọc lại
• không phụ thuộc vào cấu trúc quá mong manh
• ít bị hỏng khi giao diện thay đổi nhẹ

Ví dụ selector tốt:

input[name='email']
button[type='submit']

Ví dụ selector kém ổn định:

/html/body/div[2]/div/div[3]/form/div[2]/div/input

Selector kiểu tuyệt đối như trên rất dễ hỏng chỉ vì web thay đổi một lớp giao diện nhỏ.

Những selector người mới nên tránh

Bạn nên hạn chế dùng các selector như:

• XPath tuyệt đối quá dài
• class ngẫu nhiên sinh tự động
• selector quá chung chung như button, div, input
• selector phụ thuộc vào vị trí mong manh trong giao diện

Ví dụ không nên:

div > div > div > button

hoặc

/html/body/div/div[3]/div[2]/button

Những selector này có thể chạy hôm nay, nhưng rất dễ hỏng sau khi website cập nhật giao diện.

Vì sao selector đúng rồi mà action vẫn lỗi?

Đây là tình huống rất phổ biến.

Không phải cứ selector đúng là script chắc chắn thành công. Action vẫn có thể lỗi nếu:

• phần tử chưa xuất hiện kịp
• trang chưa tải xong
• phần tử đang bị che
• phần tử nằm trong iframe
• phần tử có trên DOM nhưng chưa click được
• selector đang tìm ra nhiều phần tử, nhưng không phải phần tử bạn muốn

Nói cách khác:
selector đúng là điều kiện cần, nhưng chưa phải điều kiện đủ.

Các lỗi selector người mới hay gặp nhất

1. Copy selector quá dài

Kết quả là selector khó đọc, khó sửa, và rất dễ hỏng.

2. Chọn theo class động

Nhiều website sinh class ngẫu nhiên như:

• a1b2c3
• x-34-abc
• css-18k2…

Những class này thường không bền.

3. Dùng selector quá chung

Ví dụ chỉ dùng:

button

Trang có thể có hàng chục nút, nên script dễ click nhầm.

4. Không để ý iframe

Có những phần tử nhìn thấy trên màn hình nhưng thật ra nằm trong iframe, nên script không thao tác được nếu chưa chuyển đúng ngữ cảnh.

5. Không có bước chờ

Selector đúng nhưng script chạy quá nhanh, phần tử chưa xuất hiện nên vẫn lỗi.

Một ví dụ thực tế dễ hiểu

Giả sử bạn muốn nhập email vào ô đăng nhập.

Trang có HTML như sau:

<input type="text" name="email" id="login-email">

Bạn có thể chọn phần tử này bằng nhiều cách:

Dùng Id

login-email

Dùng Name

email

Dùng CssSelector

input[name='email']

Dùng XPath

//input[@name='email']

Trong trường hợp này, lựa chọn dễ dùng nhất thường là:

• Id nếu id ổn định
• hoặc CssSelector nếu bạn muốn linh hoạt hơn

Nên bắt đầu học selector từ đâu?

Với người mới, thứ tự học nên là:

1. Id
2. Name
3. CssSelector
4. XPath
5. các loại còn lại như ClassName, LinkText, PartialLinkText

Lý do:

• Id và Name dễ hiểu nhất
• CssSelector là lựa chọn thực tế và dùng rất nhiều
• XPath mạnh nhưng khó hơn, nên học sau

Kết luận

Selector là nền tảng quan trọng nhất của Automation, vì phần mềm chỉ có thể thao tác đúng khi tìm đúng phần tử trên trang web.

Sau bài này, bạn cần nhớ 5 ý chính:

• selector là “địa chỉ” của phần tử trên web
• selector sai là nguyên nhân phổ biến nhất khiến action thất bại
• CssSelector thường là lựa chọn ưu tiên vì ngắn và dễ đọc
• XPath mạnh và linh hoạt hơn, nhưng khó hơn
• selector tốt là selector đúng, gọn, rõ, và ổn định

Bài tiếp theo

Bài 5: Cách lấy selector bằng DevTools

Ở bài tiếp theo, chúng ta sẽ đi vào thao tác thực tế: mở DevTools, inspect phần tử, copy selector, và kiểm tra selector đó có đủ tốt để dùng trong Automation hay không.