🎯 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, expectBASE_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òng | Giả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.