Ở các bài trước, bạn luôn luôn làm việc với page. Tuy nhiên, trên nó là context và browser. Bài này giúp chúng ta hiểu bản chất Playwright xử lý như thế nào.
Playwright tổ chức trình duyệt theo ba tầng như dưới đây.
Browser → Context → Page
| Đối tượng | Hiểu đơn giản |
|---|---|
| Browser | Tiến trình Chromium, Firefox hoặc WebKit |
| BrowserContext | Phiên độc lập giống cửa sổ ẩn danh; cookie/storage tách biệt |
| Page | Một tab hoặc popup trong context |
Ví dụ 1: sử dụng page
Playwright Test tạo sẵn một page cho test. Đây là cách dùng phổ biến nhất khi test chỉ cần làm việc với một tab.
import { test, expect } from "@playwright/test";
test("Kiểm tra title trang web", async ({ page }) => {
await page.goto("https://example.com");
await expect(page).toHaveTitle("Example Domain");
});page này đã nằm trong một context cô lập. Khi test kết thúc, Playwright tự đóng page và context tương ứng.
Ví dụ 2: sử dụng context
Khi cần nhiều tab cùng đăng nhập bằng một tài khoản, hoặc kịch bản cần nhiều hơn 1 tab, bạn phải gọi context thay cho page
import { test, expect } from "@playwright/test";
test("Mở mỗi page 1 tab", async ({ context }) => {
const productPage = await context.newPage();
const helpPage = await context.newPage();
await productPage.goto("https://example.com/products");
await helpPage.goto("https://example.com/help");
await expect(productPage).toHaveURL(/products/);
await expect(helpPage).toHaveURL(/help/);
});Trong ví dụ này, productPage và helpPage là hai tab khác nhau nhưng cùng thuộc một context.
Ví dụ 3: sử dụng browser
Khi cần mô phỏng nhiều người dùng độc lập, truyền browser fixture, tạo nhiều context rồi tạo các page con bên trong từng context.
import { test, expect } from "@playwright/test";
test("một browser có thể chứa nhiều context", async ({ browser }) => {
const customerContext = await browser.newContext();
const adminContext = await browser.newContext();
const customerHomePage = await customerContext.newPage();
const customerCartPage = await customerContext.newPage();
const adminDashboardPage = await adminContext.newPage();
const adminUsersPage = await adminContext.newPage();
await customerHomePage.goto("https://example.com/home");
await customerCartPage.goto("https://example.com/cart");
await adminDashboardPage.goto("https://example.com/admin");
await adminUsersPage.goto("https://example.com/admin/users");
await expect(customerCartPage).toHaveURL(/cart/);
await expect(adminUsersPage).toHaveURL(/admin\/users/);
await customerContext.close();
await adminContext.close();
});customerContext và adminContext cùng chạy trong một browser nhưng có cookie và storage tách biệt. Mỗi context lại chứa hai page riêng. Vì các context này do test tự tạo, test cũng chủ động đóng chúng sau khi sử dụng.
