Fixture chính là object chúng ta truyền vào 1 test của playwright để tương tác với trình duyệt. page là fixture mà bạn hay gặp nhất. Ngoài ra, bạn có thể truyền context, browser… cũng được.
Default fixtures thường gặp
Playwright cung cấp cho bạn các fixture sẵn có để gọi ra dùng như sau:
| Fixture | Cung cấp |
|---|---|
page | Tab mới |
context | context |
browser | Browser dùng chung theo worker |
browserName | chromium, firefox hoặc webkit |
request | APIRequestContext để gọi API |
import { test, expect } from '@playwright/test';
test('dùng default fixtures', async ({ page }) => {
await page.goto('elitest.vn');
await expect(page).toHaveTitle(/Elitest/);
});Ở ví dụ trên, chúng ta dùng fixture page
Lưu ý
Đọc thêm các ví dụ ở context, browser để biết cách dùng với các fixture khác
Dùng nhiều hơn 1 fixture
Ví dụ dưới đây dùng cả page và browserName:
import { test, expect } from '@playwright/test';
test('dùng default fixtures', async ({ page, browserName }) => {
await page.goto('elitest.vn');
console.log(browserName);
await expect(page).toHaveTitle(/Elitest/);
});Custom fixture đơn giản
Chúng ta hoàn toàn có thể tự tạo 1 custom fixture để sử dụng với những trường hợp advanced hơn. Ví dụ dưới đây thay vì dùng page thì tạo 1 fixture loggedInPage – page đã được login – để sử dụng cho thuận tiện:
Bước 1: Định nghĩa và đăng kí fixture loggedInPage:
import { test as base, expect } from '@playwright/test';
type Fixtures = {
loggedInPage: import('@playwright/test').Page;
};
export const test = base.extend<Fixtures>({
loggedInPage: async ({ page }, use) => {
await page.goto('/login');
await page.getByLabel('Email').fill('student@example.com');
await page.getByLabel('Mật khẩu').fill('secret');
await page.getByRole('button', { name: 'Đăng nhập' }).click();
await use(page); // trao fixture cho test
},
});
export { expect };Sau đó ở file test case, lôi cái fixture đó ra và sử dụng:
import { test, expect } from './fixtures';
test('xem khóa học của tôi', async ({ loggedInPage }) => {
await loggedInPage.goto('/my-courses');
await expect(loggedInPage.getByRole('heading')).toHaveText('Khóa học của tôi');
});
