[Playwright Python]Bài 2 - Locators - "Cặp Mắt" Định Vị Của Robot

[Playwright Python]Bài 2 - Locators -



NỘI DUNG BÀI HỌC

✅ Hiểu rõ khái niệm Locator là gì và tầm quan trọng sống còn của nó trong Automation.
✅ Nắm vững nhóm Locator hiện đại (hướng người dùng) – vũ khí tối thượng của Playwright.
✅ Biết cách đọc mã HTML cơ bản để tự viết CSS Selector siêu tốc.
✅ Sử dụng "vũ khí bí mật" Codegen để lấy Locator tự động.
✅ Viết kịch bản tổng hợp: Tìm kiếm, nhập dữ liệu và click chuột.


🧠 I. KHÁI NIỆM LOCATOR: "CẶP MẮT" CỦA ROBOT PLAYWRIGHT

 

👀 1️⃣ Locator là gì?

Hãy tưởng tượng trang web của bạn là một siêu thị khổng lồ, và Robot Playwright là người đi mua hàng. Khi bạn bảo Robot "Hãy lấy chai nước tương", Robot sẽ ngơ ngác hỏi lại: "Nó nằm ở quầy nào? Tầng mấy? Nhãn hiệu gì?".

👉 Locator chính là một chuỗi truy vấn hoạt động như "ĐỊA CHỈ" để Robot Playwright tìm thấy chính xác một (hoặc nhiều) phần tử (element) trên trang web.

💡 Sự thật phũ phàng: Việc chọn đúng Locator quyết định 80% sự ổn định của Test Case. Nếu chọn địa chỉ sai hoặc "hay thay đổi", script của bạn sẽ liên tục báo lỗi đỏ lòm (fail) chỉ vì một ngày đẹp trời team Dev đổi màu cái nút bấm!

 


🎯 II. CÁC LOẠI LOCATOR HIỆN ĐẠI (KHUYÊN DÙNG NHẤT)

Playwright cực kỳ thông minh vì nó cho phép Robot tìm kiếm phần tử giống hệt cách một người dùng bình thường nhìn vào màn hình. Châm ngôn là: Người dùng thấy gì, Robot tìm nấy!

Dưới đây là 5 "tuyệt chiêu" định vị hiện đại, xếp theo thứ tự ưu tiên từ cao xuống thấp mà bạn nên dùng:

1️⃣ 🧩 get_by_role() - (Ưu tiên số 1):

Tìm theo "Vai trò" Đây là cách tìm kiếm xịn nhất. Bạn xác định phần tử đó đóng vai trò gì (là Nút bấm button, Tiêu đề heading, Đường link link, hay Ô đánh dấu checkbox?) và tên của nó là gì.

🌟 Tại sao get_by_role lại được phong làm "Vua"? Bởi vì nó hỗ trợ Accessibility (Khả năng tiếp cận). Việc bạn tìm bằng role chứng tỏ website của bạn không chỉ đẹp mà còn chuẩn chỉnh về mặt mã nguồn, hỗ trợ tốt cho cả những người khiếm thị dùng phần mềm đọc màn hình!

  • 🧪 Ví dụ HTML trên web:

    HTML
    <button class="btn-blue">Đăng nhập</button>
<h1>Trang chủ hệ thống</h1>

  • 💻 Code Playwright Python:

    # Tìm cái nút bấm có chữ "Đăng nhập"
page.get_by_role("button", name="Đăng nhập").click()

# Tìm cái tiêu đề có chữ "Trang chủ hệ thống"
page.get_by_role("heading", name="Trang chủ hệ thống")

  • 💡 Bình dân học vụ: Robot không thèm quan tâm cái nút màu xanh (class="btn-blue") hay màu đỏ, nó chỉ cần biết: "Đây là NÚT BẤM, và trên đây có chữ ĐĂNG NHẬP, tôi sẽ click ở đây!".


2️⃣ 🏷️ get_by_label():

Cặp bài trùng của Ô nhập liệu Form Rất nhiều ô điền thông tin (Form) trên web không có chữ bên trong, mà có một cái Nhãn dán (Label) nằm ngay bên cạnh hoặc bên trên nó.

  • 🧪 Ví dụ HTML trên web:

    HTML 
    <label for="pwd">Mật khẩu của bạn</label>
<input id="pwd" type="password">​

  • 💻 Code Playwright Python:

    # Tìm ô nhập liệu thông qua cái nhãn dán của nó
page.get_by_label("Mật khẩu của bạn").fill("123456")

  • 💡 Bình dân học vụ: Người dùng bình thường không ai nhìn vào mã id="pwd" để biết chỗ nhập mật khẩu. Họ nhìn dòng chữ "Mật khẩu của bạn" rồi điền vào cái ô trống nằm sát bên. Robot Playwright dùng get_by_label cũng làm y chang vậy!


3️⃣ 👻 get_by_placeholder():

Tìm theo chữ mờ gợi ý Placeholder là những dòng chữ mờ mờ nằm sẵn bên trong ô trống để hướng dẫn người dùng. Khi bạn click vào gõ chữ, chữ mờ này sẽ biến mất.

  • 🧪 Ví dụ HTML trên web:

    HTML
    <input type="text" placeholder="Tìm kiếm sản phẩm...">
    💻 Code Playwright Python:
    # Tìm ô trống có chứa dòng chữ mờ
page.get_by_placeholder("Tìm kiếm sản phẩm...").fill("Điện thoại iPhone")

  • 💡 Bình dân học vụ: Rất trực quan! Cứ thấy ô nào có dòng chữ mờ hướng dẫn, hãy dùng ngay lệnh này để tóm lấy nó.


4️⃣ 🔤 get_by_text():

 Có chữ là tìm được Dùng để tìm bất kỳ phần tử nào trên trang dựa trên đoạn văn bản (text) hiển thị chính xác trên màn hình.

  • 🧪 Ví dụ HTML trên web:

    HTML 
    <div class="alert-success">Chào mừng bạn quay lại hệ thống!</div>
<span>Lỗi 404: Không tìm thấy trang</span>​

  • 💻 Code Playwright Python:

    # Tìm đoạn văn bản hiển thị thành công
page.get_by_text("Chào mừng bạn quay lại hệ thống!")

# Bạn cũng có thể tìm một phần của câu
page.get_by_text("Lỗi 404")

  • 💡 Bình dân học vụ: Lệnh này rất hay dùng để kiểm tra (Assert) xem sau khi mình thao tác xong, web có hiện ra đúng câu thông báo thành công/thất bại mà mình mong muốn hay không.

5️⃣ 🛡️ get_by_test_id() : Lối đi dành riêng cho Tester


Khi giao diện thay đổi liên tục, Lập trình viên (Dev) có thể gắn một mã ID ẩn cực kỳ kiên cố dành riêng cho bạn test.

  • 🧪 Ví dụ HTML trên web:

    HTML
    <button data-testid="submit-btn">Xác nhận đơn hàng</button>
    💻 Code Playwright Python:
    # Bỏ qua mọi yếu tố ngôn ngữ hay màu sắc, tìm thẳng vào mã VIP
page.get_by_test_id("submit-btn").click()


Bảng tóm tắt:


Loại Locator Cách hoạt động (Giống hệt người dùng) Ví dụ / Tưởng tượng thực tế
🧩 get_by_role() (Ưu tiên số 1) Tìm theo "vai trò" của phần tử (Nút bấm, Link, Checkbox...).

Robot tìm: "Cái nút (button) có chữ Đăng nhập".


page.get_by_role("button", name="Đăng nhập")
🏷️ get_by_label() Tìm ô nhập liệu (Form) thông qua cái Nhãn dán (Label) kế bên nó.

Robot tìm: Ô nhập nằm dưới nhãn Email Address.


page.get_by_label("Email Address")
👻 get_by_placeholder() Tìm ô nhập liệu thông qua dòng chữ mờ mờ gợi ý bên trong ô đó.

Robot tìm: Ô có chữ mờ Nhập email của bạn.


page.get_by_placeholder("Nhập email của bạn")
🔤 get_by_text() Tìm phần tử dựa trên đoạn chữ (text) hiển thị chính xác trên màn hình.

Robot tìm: Dòng chữ Xin chào, Admin.


page.get_by_text("Xin chào, Admin")
🛡️ get_by_test_id() Tìm bằng một mã đặc biệt do Lập trình viên (Dev) gắn riêng cho dân Tester.

Robot tìm: Phần tử có mã ID dành riêng cho Test.


page.get_by_test_id("submit-btn")

 


🏛️ III. CÁC LOẠI LOCATOR TRUYỀN THỐNG (CSS SELECTOR)

Đôi khi, web không có chữ hay nhãn rõ ràng để dùng nhóm get_by_* ở trên. Lúc này, ta phải "xắn tay áo" nhìn vào mã HTML và dùng CSS Selector.

Mô tả: Đây là cú pháp ngắn gọn, tốc độ siêu nhanh để "bới móc" mã nguồn HTML dựa trên ID, class, thuộc tính và mối quan hệ cha-con.

Dưới đây là "bảng cửu chương" để bạn dễ dàng dịch từ ngôn ngữ HTML sang mã Playwright:

Ký hiệu Ý nghĩa Ví dụ HTML Ví dụ Locator (Playwright) Diễn giải chi tiết bằng ngôn ngữ bình dân
# ID <input id="user-login"> page.locator("#user-login") Dấu # có nghĩa là "Tìm element có ID chính xác là 'user-login'". ID giống như Số CMND, là duy nhất trên một trang, nên đây là cách tìm kiếm bằng CSS cực kỳ uy tín.
. Class <button class="btn-primary"> page.locator(".btn-primary") Dấu . có nghĩa là "Tìm element có chứa class là 'btn-primary'". Class giống như đồng phục học sinh, một học sinh có thể mặc nhiều áo, và nhiều học sinh có thể mặc áo giống nhau.
[] Thuộc tính (Attribute) <input name="password"> page.locator("[name='password']") Dấu ngoặc vuông [] dùng để tìm theo bất kỳ đặc điểm (thuộc tính) nào. Nó có nghĩa là: "Tìm thằng nào có thuộc tính name với giá trị đúng bằng 'password'".
(Trống) Tên thẻ (Tag Name) <h1>Welcome</h1> page.locator("h1") Viết thẳng tên thẻ không thêm dấu gì có nghĩa là: "Hãy gom tất cả các element mang thẻ là h1 về đây".
> Con trực tiếp <div> <p>Text</p> </div> page.locator("div > p") Dấu > thể hiện quan hệ cha-con ruột. Ý nghĩa: "Tìm thẻ p là con ruột (nằm ngay bên trong cấp 1) của thẻ div".
(Dấu cách) Con cháu <div> <span> <p>Text</p> </span> </div> page.locator("div p") Dấu cách (khoảng trắng) rộng hơn cha-con. Ý nghĩa: "Tìm thẻ p nằm bên trong lòng thẻ div, bất kể là con ruột, cháu nội hay chắt ngoại".



🧑‍💻 IV. "VŨ KHÍ BÍ MẬT": TÌM LOCATOR TỰ ĐỘNG BẰNG CODEGEN

 

Nếu bạn là người mới, nhìn HTML thấy "rối não", đừng lo! Playwright có công cụ Codegen làm thay bạn.

Bạn chỉ cần mở Terminal (cửa sổ dòng lệnh) lên và gõ:

playwright codegen https://www.google.com

 

👉 Điều kỳ diệu xảy ra: Một trình duyệt hiện lên. Cứ mỗi lần bạn rê chuột vào nút bấm hay ô chữ nào, Playwright sẽ tự động phân tích và gợi ý dòng code Locator tối ưu nhất cho bạn (ưu tiên các hàm get_by_* trước, nếu không có mới dùng đến CSS). Thậm chí nếu bạn bấm chuột thao tác, nó sẽ tự viết code Python giùm bạn luôn!


🧾 V. VÍ DỤ TỔNG HỢP: TỪ HTML ĐẾN CODE PYTHON

Giờ chúng ta hãy thực hành. Cùng một nút bấm, một ô nhập liệu, nhưng chúng ta có rất nhiều cách để bảo Robot lấy đúng địa chỉ đó. (Ghi chú nhỏ: Lệnh .fill() dùng để Robot gõ chữ, và lệnh .click() dùng để Robot nhấp chuột nhé).


🧪 Cấu trúc HTML của trang web (Giả lập):

HTML 
<div class="login-box">
  <h2>Đăng nhập hệ thống</h2>
  <div class="form-group">
    <label for="email-input">Email Address</label>
    <input id="email-input" class="input-field" name="user_email" placeholder="Enter your email" data-testid="email-field" />
    <span class="help-text">Vui lòng nhập đúng định dạng</span>
    <button class="btn-primary">Submit</button>
  </div>
</div>

 

🧩 Kịch bản Playwright Python:

from playwright.sync_api import Page

def test_all_locators(page: Page):
    page.goto("https://example.com")
    
    # =============================================================
    # PHẦN 1: TÌM Ô NHẬP EMAIL BẰNG 8 CÁCH KHÁC NHAU
    # =============================================================
    
    # --- Nhóm CSS Selector (Truyền thống) ---
    email_1 = page.locator("#email-input")                 # Bằng ID (#)
    email_2 = page.locator(".input-field")                 # Bằng Class (.)
    email_3 = page.locator("[name='user_email']")          # Bằng Thuộc tính ([])
    email_4 = page.locator("div.form-group > input")       # Dùng quan hệ Cha-con ruột (>)
    email_5 = page.locator(".login-box input")             # Dùng quan hệ Con-cháu (dấu cách)
    
    # --- Nhóm Hiện đại (Ưu tiên dùng) ---
    email_6 = page.get_by_label("Email Address")           # Tìm bằng Nhãn dán Label
    email_7 = page.get_by_placeholder("Enter your email")  # Tìm bằng Chữ mờ gợi ý
    email_8 = page.get_by_test_id("email-field")           # Tìm bằng ID xịn của Dev
    
    # -> Chốt lại, ta chọn 1 cách an toàn nhất (VD: email_8) để điền chữ
    email_8.fill("lanha.tester@example.com")


    # =============================================================
    # PHẦN 2: TÌM CÁC THÀNH PHẦN KHÁC TRÊN FORM
    # =============================================================
    
    # 1️⃣ get_by_role (Tiêu đề): Tìm dòng chữ H2
    tieu_de = page.get_by_role("heading", name="Đăng nhập hệ thống")
    
    # 2️⃣ get_by_text (Đoạn chữ): Tìm đoạn văn bản hướng dẫn
    van_ban_huong_dan = page.get_by_text("Vui lòng nhập đúng định dạng")
    
    # 3️⃣ CSS theo Tên Thẻ (Tag Name): Tìm thẻ label
    nhan_dan = page.locator("label")
    
    # 4️⃣ get_by_role (Nút bấm): Tìm nút Submit và Click
    nut_submit = page.get_by_role("button", name="Submit")
    nut_submit.click()

🧩 VI. ĐÚC KẾT & BÀI TẬP VỀ NHÀ

Mục tiêu Chi tiết
🧠 Tóm tắt nhanh

Locator là "sinh mệnh" của kịch bản kiểm thử.


👉 Quy tắc vàng: Luôn ưu tiên dùng nhóm get_by_* (role, label, text, placeholder) để kịch bản vừa dễ đọc, vừa khó gãy (stable).


👉 Phương án dự phòng: Chỉ khi không có các yếu tố trên, mới lôi "Bảng cửu chương CSS Selector" (# cho ID, . cho class) ra dùng.
💡 Bài tập thực hành

Mở file test_thuc_hanh.py:


1️⃣ Chạy lệnh playwright codegen [https://demo.playwright.dev/todomvc](https://demo.playwright.dev/todomvc) để xem công cụ tự bắt Locator thông minh thế nào.


2️⃣ Tự viết code Python: Truy cập trang To-Do ở trên, tìm ô nhập liệu bằng Placeholder, gõ chữ "Học Automation" bằng lệnh .fill() và nhấn Enter bằng .press("Enter").

Teacher

Teacher

Hà Lan

QA Automation

With over 5 years of experience in web, API, and mobile test automation, built strong expertise in designing and maintaining automation frameworks across various domains and international projects. Committed to mentoring and knowledge sharing, I provide practical guidance and proven techniques to help aspiring testers develop their skills and succeed in the automation field.

Cộng đồng Automation Testing Việt Nam:

🌱 Telegram Automation Testing:   Cộng đồng Automation Testing
🌱 Facebook Group Automation: Cộng đồng Automation Testing Việt Nam
🌱 Facebook Fanpage: Cộng đồng Automation Testing Việt Nam - Selenium
🌱 Telegram Manual Testing:   Cộng đồng Manual Testing
🌱 Facebook Group Manual: Cộng đồng Manual Testing Việt Nam

Chia sẻ khóa học lên trang

Bạn có thể đăng khóa học của chính bạn lên trang Anh Tester để kiếm tiền

ĐĂNG KÝ NGAY

Danh sách bài học