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

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

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

• mở DevTools trên trình duyệt
• dùng tính năng inspect để chọn đúng phần tử
• lấy selector cho ô nhập, nút bấm, link, thông báo
• biết selector nào nên dùng, selector nào nên tránh
• tự kiểm tra selector trước khi đưa vào Automation

DevTools là gì?

DevTools là bộ công cụ dành cho việc kiểm tra cấu trúc trang web ngay trên trình duyệt.

Với người dùng Automation, DevTools là nơi giúp bạn:

• xác định phần tử mình muốn thao tác
• xem phần tử đó có id, name, class, text, hay thuộc tính gì
• từ đó tạo selector phù hợp để dùng trong script

Hiểu đơn giản:

muốn viết Automation tốt, bạn gần như chắc chắn phải biết dùng DevTools.

Vì sao cần dùng DevTools?

Khi bạn nhìn thấy một nút trên màn hình, ví dụ nút Đăng nhập, thì mắt người nhìn thấy rất rõ. Nhưng phần mềm không “nhìn” như con người.

Phần mềm chỉ có thể thao tác khi bạn chỉ ra đúng phần tử bằng selector.

DevTools giúp bạn trả lời các câu hỏi như:

• nút này là thẻ button hay a
• ô này có id không
• ô này có name không
• text hiển thị của phần tử là gì
• có class nào ổn định để bám vào không

Cách mở DevTools

Bạn có thể mở DevTools theo một trong các cách sau:

Cách 1: Nhấn phím F12

Đây là cách nhanh và phổ biến nhất.

Cách 2: Nhấn chuột phải rồi chọn Inspect

Dùng khi bạn muốn kiểm tra trực tiếp một phần tử cụ thể trên trang.

Cách 3: Nhấn Ctrl + Shift + I

Đây cũng là phím tắt rất phổ biến.

Với người mới, cách dễ nhất là:

• mở trang web cần thao tác
• nhấn chuột phải vào đúng ô hoặc nút cần lấy selector
• chọn Inspect

Lúc đó DevTools sẽ tự nhảy đến đúng phần tử tương ứng trong HTML.

Cách chọn đúng phần tử bằng Inspect

Ví dụ bạn muốn lấy selector cho ô nhập email.

Các bước làm:

1. Mở trang web cần thao tác
2. Đưa chuột đến ô email
3. Nhấn chuột phải
4. Chọn Inspect
5. DevTools sẽ mở ra và bôi sáng phần tử tương ứng

Khi đó bạn cần nhìn vào phần HTML vừa được chọn.

Ví dụ bạn có thể thấy:

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

Từ đây bạn có thể rút ra nhiều selector khác nhau như:

• Id: login-email
• Name: email
• CssSelector: input[name=’email’]
• XPath: //input[@name=’email’]

Nên nhìn vào những gì sau khi Inspect?

Sau khi chọn được phần tử, bạn không cần đọc toàn bộ HTML. Bạn chỉ cần tập trung vào các thông tin quan trọng sau:

• id
• name
• class
• type
• placeholder
• text
• các thuộc tính đặc trưng như data-*, aria-*

Ví dụ:

<button type="submit" class="btn-login">Đăng nhập</button>

Bạn có thể nghĩ tới các selector như:

• button[type=’submit’]
• .btn-login
• //button[text()=’Đăng nhập’]

Thứ tự ưu tiên khi chọn selector

Khi lấy selector bằng DevTools, bạn không nên chọn bừa. Nên ưu tiên theo thứ tự sau:

1. id nếu id rõ ràng và ổn định

Ví dụ:

<input id="login-email">

Ưu tiên vì:

• ngắn
• dễ đọc
• ít nhầm

2. name nếu name rõ ràng

Ví dụ:

<input name="email">

Rất phù hợp với:

• ô email
• ô mật khẩu
• ô tìm kiếm
• input form nói chung

3. CssSelector ngắn và đặc trưng

Ví dụ:

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

4. XPath khi cần tìm theo text hoặc cấu trúc phức tạp

Ví dụ:

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

Khi nào nên copy selector có sẵn từ DevTools?

Trong DevTools, bạn có thể nhấn chuột phải vào phần tử trong HTML rồi chọn các kiểu như:

• Copy selector
• Copy XPath

Cách này tiện, nhưng không phải lúc nào cũng nên dùng nguyên xi.

Lý do:

• selector copy tự động đôi khi quá dài
• XPath copy sẵn có thể là XPath tuyệt đối, rất dễ hỏng
• có thể chứa nhiều class động hoặc vị trí không ổn định

Nói cách khác:

copy được thì tốt, nhưng vẫn phải đọc lại và rút gọn trước khi dùng trong Automation.

Ví dụ về selector copy xấu và selector nên sửa lại

Selector xấu

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

Vấn đề:

• quá dài
• khó đọc
• chỉ cần web đổi layout là hỏng

Selector tốt hơn

input[name='email']

hoặc

//input[@name='email']

Ngắn hơn, rõ hơn, dễ sửa hơn.

Cách lấy selector cho các loại phần tử phổ biến

1. Ô nhập email hoặc mật khẩu

Bạn nên ưu tiên tìm theo:

• id
• name
• placeholder
• type

Ví dụ:

<input type="password" name="password" placeholder="Mật khẩu">

Có thể dùng:

input[name='password']

hoặc

//input[@name='password']

2. Nút bấm

Bạn nên nhìn vào:

• text của nút
• type
• class ổn định
• thuộc tính đặc trưng

Ví dụ:

<button type="submit">Đăng nhập</button>

Có thể dùng:

button[type='submit']

hoặc

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

3. Link

Nếu phần tử là thẻ <a>, bạn có thể dùng:

• LinkText
• PartialLinkText
• CSS theo href
• XPath theo text

Ví dụ:

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

Có thể dùng:

• LinkText: Đăng nhập
• PartialLinkText: Đăng
• CSS: a[href=’/login’]
• XPath: //a[text()=’Đăng nhập’]

4. Thông báo lỗi hoặc thông báo thành công

Bạn nên tìm phần tử có:

• text đặc trưng
• class thông báo
• role=”alert” nếu có

Ví dụ:

<div class="error-message">Sai mật khẩu</div>

Có thể dùng:

.error-message

hoặc

//div[contains(text(),'Sai mật khẩu')]

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

Khi lấy selector bằng DevTools, bạn nên tránh các kiểu sau:

1. Selector quá dài

Ví dụ:

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

2. Chỉ bám vào class động

Ví dụ:

.css-18k2a7x

Những class kiểu này rất dễ thay đổi.

3. Selector quá chung

Ví dụ:

button input div

Những selector này có thể khớp quá nhiều phần tử.

4. Selector phụ thuộc quá nhiều vào vị trí

Ví dụ:

div > div > div > button

Rất mong manh nếu giao diện thay đổi.

Làm sao biết selector có ổn hay không?

Sau khi lấy được selector, bạn nên tự kiểm tra nhanh bằng 3 câu hỏi:

1. Selector này có ngắn và dễ hiểu không?

Nếu nhìn lại sau 1 tuần mà vẫn hiểu nó đang chọn gì, đó là dấu hiệu tốt.

2. Selector này có đang bám vào thứ “đặc trưng” của phần tử không?

Ví dụ:

• name=’email’
• type=’submit’
• text Đăng nhập

Đó là những dấu hiệu khá tốt.

3. Nếu web đổi layout nhẹ, selector này có còn sống không?

Nếu câu trả lời là “chắc hỏng”, bạn nên chọn lại.

Cách kiểm tra selector trước khi mang vào Automation

Trước khi dùng selector trong script, bạn nên:

1. Inspect lại đúng phần tử
2. Đọc kỹ HTML của phần tử
3. Viết selector ngắn nhất có thể
4. Đảm bảo selector đang trỏ vào đúng phần tử mong muốn
5. Sau đó mới đưa vào Automation
6. Dùng Chạy thử để test

Quy trình đúng là:

DevTools -> chọn selector -> đưa vào script -> chạy thử -> sửa nếu cần

Vì sao cùng một selector có lúc chạy được, có lúc không?

Đây là lỗi rất phổ biến, nhưng nguyên nhân không phải lúc nào cũng do selector sai.

Có thể do:

• phần tử xuất hiện chậm
• trang chưa tải xong
• phần tử nằm trong popup
• phần tử nằm trong iframe
• có nhiều phần tử giống nhau
• phần tử có trên DOM nhưng chưa thể click

Cho nên:
lấy selector đúng mới là bước đầu, chưa phải toàn bộ câu chuyện.

Ví dụ thực tế: lấy selector cho form đăng nhập

Giả sử bạn có form như sau:

<input name="email" type="text"> <input name="password" type="password"> <button type="submit">Đăng nhập</button>

Bạn có thể lấy selector theo cách:

Ô email

input[name='email']

Ô mật khẩu

input[name='password']

Nút đăng nhập

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

Bộ selector này đã đủ để viết một script đăng nhập cơ bản.

Những sai lầm người mới rất hay mắc

1. Thấy gì copy nấy

Copy selector tự động từ DevTools mà không đọc lại.

2. Cố dùng XPath thật dài vì nghĩ “dài thì chính xác hơn”

Thực tế thường ngược lại, dài quá lại càng dễ hỏng.

3. Không phân biệt phần tử mình cần là input, button hay link

Dẫn đến chọn sai kiểu selector.

4. Chọn class đẹp mắt nhưng thật ra là class động

Hôm nay chạy được, ngày mai web cập nhật là hỏng.

5. Không chạy thử sau khi lấy selector

Đây là lỗi rất hay gặp. Selector nhìn đúng nhưng chưa chắc chạy đúng.

Kết luận

DevTools là công cụ quan trọng nhất để lấy selector cho Automation.

Sau bài này, bạn cần nhớ:

• muốn Automation thao tác đúng, trước hết phải lấy đúng selector
• DevTools giúp bạn nhìn thấy cấu trúc thật của phần tử
• nên ưu tiên id, name, rồi đến CssSelector, sau đó mới đến XPath
• không nên dùng selector quá dài, quá chung, hoặc bám vào class động
• selector lấy xong vẫn cần chạy thử để kiểm tra

Bài tiếp theo

Bài 6: Tạo project đầu tiên và lưu file .mab.json

Ở bài tiếp theo, chúng ta sẽ bắt đầu thao tác thật trong phần mềm: tạo project Automation đầu tiên, đặt tên, lưu script, và quản lý file script để dùng lại về sau.