Mmaiqai.com
🎯 Automation Testing · Chương 5 · Mục 5.3

Viết bài test UI đầu tiên

Trang "Send Us a Message" của automationintesting.online có form liên hệ — dùng làm bài thực hành đầu tiên vì không cần đăng nhập.

Tạo thư mục tests, file tests/test_01_lien_he_co_ban.py:

FILE tests/test_01_lien_he_co_ban.py
"""Demo Playwright UI co ban: locator theo id, dien form, click, va web-first assertion expect(page)."""
from playwright.sync_api import Page, expect
 
BASE_URL = "https://automationintesting.online/"
 
 
def test_gui_lien_he_thanh_cong(page: Page):
"""Dien du va dung dinh dang -> trang hien thi loi cam on dung ten nguoi gui."""
page.goto(BASE_URL)
page.locator("#name").fill("Nguyen Van A")
page.locator("#email").fill("test@example.com")
page.locator("#phone").fill("0912345678901")
page.locator("#subject").fill("Hoi ve phong Suite")
page.locator("#description").fill("Toi muon hoi ve gia phong Suite trong thang toi, xin cam on.")
page.get_by_role("button", name="Submit").click()
 
expect(page.get_by_text("Thanks for getting in touch Nguyen Van A!")).to_be_visible()

Giải thích từng dòng lệnh:

DòngGiải thích
BASE_URL = "..."Hằng số lưu địa chỉ trang, tránh gõ lại nhiều lần
page.goto(BASE_URL)Mở trang
page.locator("#name").fill("...")Tìm ô nhập theo id name, điền giá trị vào
page.locator("#email") ... .locator("#description")Tương tự, điền các ô Email/Phone/Subject/Message theo đúng id
page.get_by_role("button", name="Submit")Tìm nút bấm theo vai trò (button) và tên hiển thị ("Submit") — cách tìm được Playwright khuyến khích, vì gần với cách người dùng thật nhìn thấy trang, không phụ thuộc cấu trúc HTML bên trong
.click()Bấm vào nút vừa tìm được
expect(...).to_be_visible()Kiểm tra dòng chữ cảm ơn xuất hiện — chi tiết về expect sẽ học kỹ ở Chương 6

Chạy:

TERMINAL
pytest tests/test_01_lien_he_co_ban.py -v

Kết quả:

KẾT QUẢ
tests/test_01_lien_he_co_ban.py::test_gui_lien_he_thanh_cong[chromium] PASSED [100%]
 
============================== 1 passed in 8.37s ==============================
⚡ GHI NHỚ NHANH
  • Locator: công thức tìm phần tử, tự tìm lại mỗi lần thao tác thay vì tìm 1 lần rồi lưu cố định.
  • Auto-wait: Playwright tự chờ phần tử sẵn sàng trước khi thao tác, không cần tự viết sleep().
  • get_by_role: tìm phần tử theo vai trò + tên hiển thị — cách tìm được khuyến khích hơn CSS selector khi có thể dùng được.

Chương sau: thêm bài test thứ 2 (trường hợp lỗi) và tìm hiểu kỹ expect() — web-first assertion của Playwright, hoàn thiện Checkpoint 2.