Page Object Model Là Gì
Page Object Model (POM) là một mẫu thiết kế (design pattern) được sử dụng trong kiểm thử tự động. Nó giúp tổ chức và quản lý mã kiểm thử bằng cách tách biệt logic của bài kiểm thử và các thao tác trên giao diện người dùng (UI). POM giúp code dễ bảo trì hơn, tăng tính tái sử dụng và cải thiện tính rõ ràng có tổ chức, giảm mã trùng lặp.
Nguyên tắc của POM:
- Tách biệt logic kiểm thử và thao tác UI. Các thao tác trên giao diện (như nhấp chuột, nhập liệu, kiểm tra trạng thái) được định nghĩa trong các lớp (class) riêng biệt gọi là Page Objects. Logic kiểm thử chỉ tập trung vào việc kiểm tra các chức năng, không chứa chi tiết về cách tương tác với UI.
- Mỗi trang hoặc thành phần UI là một lớp (class): Mỗi trang (page) hoặc thành phần giao diện (component) được đại diện bởi một lớp trong mã nguồn.
- Tái sử dụng: Các phương thức trong Page Object có thể được tái sử dụng trong nhiều bài kiểm thử khác nhau.
Cấu Trúc Thư Mục POM
Một dự án sử dụng POM thường có cấu trúc thư mục như sau:
``` src/ ├── pages/ # Chứa các Page Object │ ├── LoginPage.ts # Page Object cho trang đăng nhập │ ├── HomePage.ts # Page Object cho trang chủ │ ├── HomePage.ts # Page Object cho trang chủ │ └── PageObjectManager.ts # Page Object quản lý các page ├── tests/ # Chứa các bài kiểm thử │ ├── auth/ │ │ └── login.spec.ts # Bài kiểm thử cho đăng nhập │ └── dashboard/ │ └── dashboard.spec.ts # Bài kiểm thử cho dashboard ├── utils/ # Chứa các tiện ích (helper) │ └── apiHelper.ts # Helper cho API └── playwright.config.ts # Cấu hình Playwright ```
Để tìm hiểu thêm về POM trong dự án auto test với Plawright bạn có thể tìm đọc trong trang documentation của Playwright tại đây.
Page Object Manager
Nguyên tắc của POM là tạo mỗi trang hoặc thành phần UI là một class. Khi viết kiểm thử, chúng ta cần import, khai báo chúng. Và chúng ta cần lặp lại thao tác này cho mọi bài kiểm tra riêng lẻ. Bây giờ hãy tưởng tượng tình huống của dự án thực tế Khi bạn có 20 trang ứng dụng của mình. Trong trường hợp này, bạn sẽ có 20 đối tượng trang và trong trường hợp này, bạn sẽ cần nhập 20 phiên bản trang của mình rồi viết bài kiểm tra và bạn sẽ cần lặp lại thao tác này nhiều lần cho mọi bài kiểm tra. Và điều này nghe có vẻ không phải là cách tiếp cận tối ưu, phải không?
Page Object Manager là một lớp hoặc module được sử dụng để quản lý các Page Objects trong dự án kiểm thử tự động. Nó giúp tổ chức và cung cấp các đối tượng của các trang (Page Objects) một cách hiệu quả, đảm bảo rằng mỗi trang chỉ được khởi tạo một lần (singleton pattern) trong suốt quá trình kiểm thử.
Ví dụ về Page Object Manager:
export class PageManager {
private readonly page: Page;
private readonly navigationPage: NavigationPage;
private readonly formLayoutsPage: FormLayoutsPage;
private readonly datepickersPage: DatepickersPage;
constructor(page: Page) {
this.page = page;
this.navigationPage = new NavigationPage(this.page);
this.formLayoutsPage = new FormLayoutsPage(this.page);
this.datepickersPage = new DatepickersPage(this.page);
}
navigateTo() {
return this.navigationPage;
}
onFormPayoutsPage() {
return this.formLayoutsPage;
}
onDatepickersPage() {
return this.datepickersPage;
}
}
Khai báo và sử dụng Page Manager khi viết kiểm thử
test("form layouts page", async ({ page }) => {
const pm = new PageManager(page);
await pm.navigateTo().formPayoutsPage();
const randomFullname = faker.person.fullName();
const randomEmail = `${randomFullname.replace(" ", "")}${faker.number.int(
1000
)}@test.com`;
await pm
.onFormPayoutsPage()
.submitUsingTheGridForm(process.env.USER_EMAIL, process.env.USER_PASSWORD);
await page.screenshot({ path: "screenshots/formLayoutsPage.png" });
const buffer = page.screenshot();
// console.log("check screenshot: ", (await buffer).toString("base64"));
await pm
.onFormPayoutsPage()
.submitInlineForm(randomFullname, randomEmail, true);
await page
.locator("nb-card", { hasText: "Inline form" })
.screenshot({ path: "screenshots/inlineForm.png" });
});
Mình xin dừng bài chia sẻ hôm nay tại đây. Cám ơn bạn đã ghé đọc và hẹn gặp bạn trong bài viết tiếp theo trong chuỗi chủ đề về Auto testing với Playwright.
Happy testing!