Giống test case manual, việc viết 1 test case trong playwright cũng tuân thủ y hệt những quy tắc, sao cho dễ đọc, dễ hiểu, các step đầy đủ,
Các thành phần trong 1 test case
| Thành phần | Bắt buộc? | Hàm Playwright |
|---|---|---|
test.describe('Đăng ký khóa học' | Không | để bạn điền tên của test suite |
tag: ['@smoke', '@registration'] | Không | gán nhãn cho test case. Để tiện cho việc phân loại |
annotation: [ | Không | thêm các thông tin bổ sung cho test case nếu cần |
test('học viên gửi form hợp lệ' | Có | Tên của test case |
await page.goto('/register');await page.getByLabel('Họ tên').fill('Nguyễn An'); | Có | Các test step, tương tác với màn hình |
await expect(page.getByRole('alert')).toHaveText('Đăng ký thành công'); | Có | Assertion step, tương đương với expected behavior mà test case của bạn mong muốn |
import { test, expect } from '@playwright/test';
test.describe('Đăng ký khóa học', {
tag: ['@smoke', '@registration'],
annotation: [
{ type: 'feature', description: 'Course registration' },
{ type: 'requirement', description: 'REG-001' },
],
}, () => {
test('học viên gửi form hợp lệ', {
tag: '@positive',
annotation: {
type: 'description',
description: 'Kiểm tra đầy đủ textbox, dropdown, checkbox và radio',
},
}, async ({ page }) => {
await page.goto('/register');
await page.getByLabel('Họ tên').fill('Nguyễn An');
await page.getByLabel('Khóa học').selectOption('playwright');
await page.getByLabel('Học buổi tối').check();
await page.getByRole('radio', { name: 'Online' }).check();
await page.getByRole('button', { name: 'Đăng ký' }).click();
await expect(page.getByRole('alert')).toHaveText('Đăng ký thành công');
});
});*** Settings ***
Documentation Kiểm tra chức năng đăng ký khóa học
Library SeleniumLibrary
Test Tags registration
*** Test Cases ***
Học Viên Gửi Form Hợp Lệ
[Documentation] REG-001: textbox, dropdown, checkbox và radio
[Tags] smoke positive
Open Browser ${BASE_URL}/register chrome
Input Text id=full-name Nguyễn An
Select From List By Value id=course playwright
Select Checkbox id=evening
Select Radio Button study-mode online
Click Button xpath=//button[normalize-space(.)="Đăng ký"]
Element Text Should Be css=[role="alert"] Đăng ký thành công
[Teardown] Close BrowserLưu ý
1 file ts có thể chứa nhiều hơn 1 block
describle, tức là 1 file ts có thể chứa nhiều hơn 1 test suiteCác action chính hay gặp
| Thành phần | Hành động | Hàm Playwright |
|---|---|---|
| Textbox | Nhập text vào textbox | fill() |
| Button | click vào nút | click() |
| Dropdown HTML | chọn option | selectOption() |
| Checkbox | tick vào checkbox | check()/uncheck() |
| Radio | tick vào radiobox | check() |
Các assertion thường dùng
// kiểm tra URL hiện tại:
await expect(page).toHaveURL(/dashboard/);
// kiểm tra title trang web:
await expect(page).toHaveTitle(/Dashboard/);
// kiểm tra có dòng chữ Xin chào trên hiện màn hình
await expect(page.getByText('Xin chào')).toBeVisible();
// kiểm tra trường Email đang có giá trị mong muốn:
await expect(page.getByLabel('Email')).toHaveValue('an@example.com');
// kiểm tra 1 button đang được enable:
await expect(page.getByRole('button')).toBeEnabled();
// kiểm tra checkbox Đồng ý đang được tick:
await expect(page.getByLabel('Đồng ý')).toBeChecked();Location Should Contain /dashboard
Title Should Be Dashboard
Element Should Be Visible xpath=//*[contains(., "Xin chào")]
Textfield Value Should Be id=email an@example.com
Element Should Be Enabled css=button
Checkbox Should Be Selected id=agree
Locator Should Match X Times css=[data-testid="items"] > * 3Các locator thường dùng
Như ở các bài trước, chúng ta đã tìm hiểu về xpath. Chúng ta hoàn toàn có thể truyền xpath vào để bắt được locator của đối tượng cần tương tác. Ngoài ra, playwright còn cung cấp các kiểu khác dễ đọc dễ viết hơn xpath, ví dụ như các hàm getByName, getByRole, getByText…
Sử dụng getBy…()
Lưu ý
Sử dụng hàm page.getByXXX() để lấy element bạn mong muốn
await page.getByRole('button', { name: 'Đăng nhập' }).click();
await page.getByLabel('Email').fill('an@example.com');
await page.getByPlaceholder('Nhập từ khóa').fill('Playwright');
await page.getByText('Khóa học cơ bản').click();
await page.getByAltText('Logo Elitest').click();
await page.getByTitle('Đóng').click();
await page.getByTestId('submit-order').click();Sử dụng xpath
Lưu ý
Sử dụng hàm page.locator() để lấy element bạn mong muốn
// tìm đến button có id = submit
await page.locator('xpath=//button[@id="submit"]').click(); Sử dụng CSS
Cú pháp sẽ khác với Xpath đôi chút:
// tìm đến element có id = email
await page.locator('#email').fill('an@example.com');
// tìm đến element có class = product-card
await page.locator('css=.product-card').click(); Khi có nhiều element trùng locator nhau
Đôi khi page.getByText('Khóa học cơ bản') trả về đế 2 element khác nhau, việc này rất hay gặp nếu trên màn hình có 2 chỗ có text giống nhau. Thì chúng ta có thể sử lý nhanh để lấy đúng đối tượng ta cần
// Giả sử: page.getByText('Khóa học cơ bản') trả về đến 3 element
// lấy thằng đầu tiên rồi click
await page.getByText('Khóa học cơ bản').first().click()
// lấy thằng cuối cùng rồi click
await page.getByText('Khóa học cơ bản').last().click()
// lấy thằng thứ 2 theo index của nó (index chạy từ 0), nên trường hợp này sẽ là 1:
await page.getByText('Khóa học cơ bản').nth(1).click()
