[Playwright Python] Bài 4 - Thư viện Actions và Sức mạnh của Assertions

✅ Mở rộng kho vũ khí "Actions": Làm chủ một loạt các hành động tương tác từ cơ bản đến nâng cao như hover, upload file, và các thao tác bàn phím.
✅ Thành thạo Assertions: Sử dụng thư viện expect một cách toàn diện để kiểm tra mọi trạng thái của element (hiển thị, bị vô hiệu hóa, được chọn, có thuộc tính đúng...).
✅ Áp dụng cấu trúc "Arrange-Act-Assert": Viết các test case rõ ràng, logic và chuyên nghiệp.
✅ Giải quyết các bài toán thực tế: Áp dụng kết hợp các Actions và Assertions để xử lý các kịch bản kiểm thử đa dạng.

🧠 I. Nền tảng: Cấu trúc Vàng "Arrange-Act-Assert" (AAA)

Đây là nguyên tắc tư duy để viết bất kỳ test case nào. Nó chia test thành 3 phần rõ ràng:

1️⃣ Arrange (Chuẩn bị): Thiết lập mọi thứ cần thiết.

• Ví dụ: page.goto("https://www.saucedemo.com/")

2️⃣ Act (Hành động): Thực hiện hành động chính cần kiểm tra.

Ví dụ: page.get_by_role("button", name="Login").click()

3️⃣ Assert (Kiểm định): Kiểm tra kết quả sau hành động.

• Ví dụ: expect(page).to_have_url("**/inventory.html")

🖱️ II. Thư viện Hành động (Actions) Toàn diện

Đây là bộ công cụ để bạn mô phỏng mọi hành vi mà người dùng có thể thực hiện.

1. Tương tác với Form (Form Interactions)

.fill() - Điền dữ liệu nhanh

• Khái niệm: Lệnh này sẽ xóa sạch nội dung cũ trong input rồi mới điền nội dung mới. Đây là lựa chọn hàng đầu và nhanh nhất cho việc điền form.
  
  

• Ví dụ HTML:

  <div class="form-group">
      <label>Email</label>
      <input id="email-field" type="text" value="old-email@example.com">
  </div>

   

• Ví dụ Automation:

  email_input = page.locator("#email-field")
  email_input.fill("new-email@example.com") 
  # Kết quả: value của input sẽ là "new-email@example.com"

.select_option() - Chọn từ Dropdown

• Khái niệm: Chọn một tùy chọn từ thẻ <select>. Cực kỳ linh hoạt, cho phép chọn theo value (ổn định nhất), label (text người dùng thấy), hoặc index.
  
  

• Ví dụ HTML:

  <select id="country-selector">
      <option value="">-- Select Country --</option>
      <option value="vn">Vietnam</option>
      <option value="us">United States</option>
  </select>

   

• Ví dụ Automation:

  country_dropdown = page.locator("#country-selector")
  
  # Cách 1: Chọn theo value (khuyến khích)
  country_dropdown.select_option("vn")
  
  # Cách 2: Chọn theo label (text hiển thị)
  country_dropdown.select_option(label="United States")

   

.check() & .uncheck() - Tích và Bỏ tích

• Khái niệm: Dùng để tích (.check()) hoặc bỏ tích (.uncheck()) các ô checkbox hoặc radio button. Các lệnh này an toàn, nếu checkbox đã được tích, .check() sẽ không làm gì cả.
  
  

• Ví dụ HTML:
  

  <label><input type="checkbox" id="agree-terms"> Tôi đồng ý</label>
  <label><input type="checkbox" id="newsletter" checked> Đăng ký nhận tin</label>

   

• Ví dụ Automation:

  # Tích vào ô điều khoản
  page.locator("#agree-terms").check()
  
  # Bỏ tích nhận tin
  page.locator("#newsletter").uncheck()

.set_input_files() - Upload File

• Khái niệm: Mô phỏng việc người dùng chọn một file để tải lên. Nó hoạt động ngay lập tức mà không cần mở hộp thoại file của hệ điều hành.
  
  

• Ví dụ HTML:

  <label>Choose your avatar:</label>
  <input type="file" id="avatar-uploader">

   

• Ví dụ Automation:

  # Giả sử bạn có file "my-avatar.png" trong thư mục project
  page.locator("#avatar-uploader").set_input_files("my-avatar.png")

2. Tương tác Chuột Nâng cao (Advanced Mouse Interactions)

.hover() - Di chuột lên trên

• Khái niệm: Dùng để kích hoạt các menu ẩn, tooltip, hoặc các hiệu ứng CSS chỉ xuất hiện khi người dùng di chuột lên một element.
  
  

• Ví dụ HTML:

  <div class="dropdown">
      <button class="dropbtn">User Menu</button>
      <div class="dropdown-content" style="display: none;">
          <a href="/profile">Profile</a>
          <a href="/logout">Logout</a>
      </div>
  </div>

• Ví dụ Automation:

  # Di chuột vào menu để nó hiện ra
  page.locator(".dropdown").hover()
  
  # Bây giờ có thể click vào link "Logout" đã hiển thị
  page.locator("a[href='/logout']").click()

.dblclick() - Nhấp đúp chuột

• Khái niệm: Dùng cho các chức năng yêu cầu double-click, ví dụ như mở một mục trong danh sách hoặc vào chế độ chỉnh sửa.
  
  

• Ví dụ HTML:

  <div id="item-123" class="list-item">Double-click to edit</div>

   

• Ví dụ Automation:

  list_item = page.locator("#item-123")
  list_item.dblclick()
  # Sau đó có thể kiểm tra xem ô input edit có xuất hiện không

   

3. Tương tác Bàn phím (Keyboard Interactions)

.press() - Nhấn một phím

• Khái niệm: Mô phỏng việc nhấn và thả một phím duy nhất trên bàn phím. Cực kỳ hữu ích để submit form, điều hướng, hoặc dùng phím tắt.
  
  

• Ví dụ HTML:

  <input id="search-box" placeholder="Search...">

   

• Ví dụ Automation:

  search_box = page.locator("#search-box")
  search_box.fill("Playwright automation")
  
  # Nhấn phím Enter để thực hiện tìm kiếm
  search_box.press("Enter")

   

• Các phím khác: 'Tab', 'Escape', 'ArrowDown', 'Control+A', 'Shift+Click'.

✅ III. Kiểm định Kết quả Toàn diện (Assertions với expect)

expect là "thẩm phán" của test case. Nó không chỉ kiểm tra mà còn thông minh chờ đợi kết quả.

.to_be_visible() / .to_be_hidden()

• Khái niệm: Kiểm tra một element có đang hiển thị hay bị ẩn. Rất quan trọng để chờ pop-up hiện ra hoặc vòng xoay loading biến mất.
  
  

• Ví dụ Automation:

  # Sau khi click submit, chờ vòng xoay loading biến mất
  submit_button.click()
  expect(page.locator(".loading-spinner")).to_be_hidden(timeout=10000) # Chờ tối đa 10s

   

.to_have_text() / .to_contain_text()

• Khái niệm: .to_have_text() kiểm tra nội dung chính xác. .to_contain_text() kiểm tra nội dung chứa một chuỗi con.
  
  

• Ví dụ Automation:

   

error_message = page.locator(".error-text")

# Kiểm tra chính xác
expect(error_message).to_have_text("Username is required.")

# Kiểm tra một phần (linh hoạt hơn)
expect(error_message).to_contain_text("is required")


.to_be_enabled() / .to_be_disabled()

• Khái niệm: Kiểm tra một nút hoặc input có được phép tương tác hay bị vô hiệu hóa.
  
  

• Ví dụ Automation:

  submit_button = page.get_by_role("button", name="Submit")
  
  # Lúc đầu, nút bị vô hiệu hóa
  expect(submit_button).to_be_disabled()
  
  # Sau khi điền đủ form
  page.locator("#agree-terms").check()
  
  # Nút được bật lên
  expect(submit_button).to_be_enabled()

.to_have_attribute()

• Khái niệm: Kiểm tra giá trị của một thuộc tính HTML bất kỳ, như href, class, placeholder, aria-label.
  
  

• Ví dụ Automation:

  profile_link = page.locator("a.profile")
  expect(profile_link).to_have_attribute("href", "/user/profile")


.to_have_count()

• Khái niệm: Kiểm tra có đúng bao nhiêu element được tìm thấy.
  
  

• Ví dụ Automation:

   

# Kiểm tra xem có đúng 6 sản phẩm trên trang
products = page.locator(".inventory_item")
expect(products).to_have_count(6)

🧩 IV. Bài tập Thực hành Tổng hợp

Kịch bản: Tương tác nâng cao trên trang tài nguyên khóa học


1. Ví dụ: Dropdown

   • Arrange: Truy cập https://the-internet.herokuapp.com/dropdown.

   • Act & Assert:

     • Dùng .select_option(label="Option 2").

     • Dùng expect(page.locator("option:checked")).to_have_text("Option 2") để xác nhận lựa chọn thành công.
       
       

2. Ví dụ: Hovers

   • Arrange: Truy cập https://the-internet.herokuapp.com/hovers.

   • Act & Assert:

     • Dùng .hover() để di chuột lên ảnh đại diện thứ ba (div.figure:nth-child(5)).

     • Dùng expect(page.get_by_text("name: user3")).to_be_visible() để xác nhận thông tin đã hiện ra.
       
       

3. Ví dụ: File Upload

   • Arrange: Truy cập https://the-internet.herokuapp.com/upload. Tạo một file text rỗng tên là my_test_file.txt.

   • Act & Assert:

     • Dùng .set_input_files() để chọn file đó.

     • Click nút "Upload".

     • Dùng expect(page.locator("#uploaded-files")).to_contain_text("my_test_file.txt") để xác nhận upload thành công.