Fixtures trong Playwright – Chia sẻ và tái sử dụng logic test hiệu quả

Trong quá trình testing, bạn sẽ nhận thấy nhiều đoạn mã lặp lại như authentication, test data, database connections, điều hướng, hoặc thực hiện các tác vụ setup/cleanup. Để tránh lặp lại và dễ dàng quản lý thì ta cần 1 nơi quản lý chung.

Fixtures trong Playwright là cơ chế mạnh mẽ để chia sẻ setup logic, test data và resources giữa các test cases. Chúng giúp test ngắn gọn, ổn định và dễ quản lý.

1. Fixtures là gì?

Fixtures là những objects hoặc services được khởi tạo và cung cấp cho các test. Chúng giúp:

• Chia sẻ setup logic giữa nhiều tests
• Cung cấp dữ liệu hoặc trạng thái cần thiết cho test
• Tự động hóa setup/teardown của resources (browser context, page, database, v.v.)
• Quản lý lifecycle của resources (tạo và cleanup tự động)
• Tách biệt test logic khỏi setup code
• Tái sử dụng code và giảm duplication

Nói 1 cách đơn giản, fixtures là những đối tượng hoặc hàm được khởi tạo trước khi test chạy và có thể được sử dụng trong nhiều test khác nhau. Chúng giúp giảm thiểu việc lặp lại code và đảm bảo rằng các test có cùng một trạng thái ban đầu.

Ví dụ: tạo fixture loggedInPage sẽ cung cấp một page đã đăng nhập sẵn cho các test cần xác thực.

Built-in Fixtures trong Playwright

Playwright cung cấp sẵn nhiều fixtures hữu ích:

import { test, expect } from '@playwright/test';

test('using built-in fixtures', async ({ 
  page,           // Browser page instance
  context,        // Browser context
  browser,        // Browser instance  
  browserName,    // Browser name (chromium, firefox, webkit)
  testInfo        // Test metadata and utilities
}) => {
  console.log(`Running on ${browserName}`);
  console.log(`Test: ${testInfo.title}`);
  
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

2. Tạo Custom Fixtures

Basic Custom Fixture

// tests/fixtures/basicFixtures.ts
import { test as baseTest } from '@playwright/test';

// Define fixture types
type CustomFixtures = {
  testUser: {
    email: string;
    password: string;
    name: string;
  };
  apiUrl: string;
};

// Extend base test with custom fixtures
export const test = baseTest.extend<CustomFixtures>({
  // Simple data fixture
  testUser: async ({}, use) => {
    const user = {
      email: 'test@example.com',
      password: 'password123',
      name: 'Test User'
    };
    await use(user);
  },

  // Environment-based fixture
  apiUrl: async ({}, use) => {
    const baseUrl = process.env.API_URL || 'http://localhost:3000';
    await use(`${baseUrl}/api`);
  },
});

export { expect } from '@playwright/test';

3. Ví dụ: Dùng fixture để đăng nhập 1 lần

📄 tests/fixtures/auth.fixture.ts

import { test as baseTest } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

type AuthFixtures = {
  loggedInPage: typeof baseTest['page'];
};

export const test = baseTest.extend<AuthFixtures>({
  loggedInPage: async ({ page }, use) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('admin@example.com', 'admin123');

    await use(page); // đưa page đã đăng nhập cho test
  }
});

4. Viết test dùng fixture loggedInPage

📄 tests/specs/dashboard.spec.ts

import { test, expect } from '../fixtures/auth.fixture';

test('Truy cập Dashboard sau khi login', async ({ loggedInPage }) => {
  await loggedInPage.goto('https://dummy-demo-njndex.web.app/dashboard');
  await expect(loggedInPage.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});

5. Best Practices khi sử dụng Fixtures

✅ Tách fixture ra file riêng để dễ dùng lại ✅ Dùng fixture cho các thao tác tốn thời gian như login, khởi tạo dữ liệu, browser context... ✅ Luôn cleanup dữ liệu trong fixture teardown để test độc lập ✅ Sử dụng TypeScript để type-safe cho fixtures ✅ Document rõ ràng mục đích và cách sử dụng của mỗi fixture

6. Tổng kết

Fixtures là công cụ cực kỳ mạnh của Playwright để giúp test:

• Dễ đọc (ít lặp lại code)
• Dễ bảo trì (thay đổi 1 nơi dùng nhiều test)
• Chạy ổn định (test không phụ thuộc trạng thái lẫn nhau)

Nếu bạn đang viết hơn 5 test case, hãy bắt đầu tổ chức lại code với Fixtures ngay từ hôm nay.

Tài liệu tham khảo

• Playwright Fixtures Documentation
• Playwright Best Practices
• Testing Library Documentation