https://playwright.dev/docs/best-practices

Giới thiệu

• Bài viết này sẽ giới thiệu với bạn các best practices, giúp bạn viết code trông… uy tín hơn.

Testing philosophy – triết lý khi test

Test user-visible behaviour

• Hãy test những gì mà người dùng nhìn thấy, đừng test những gì mà trong code viết.
• Ví dụ user không thể nhìn thấy tên function, css class hay thậm chí không thấy cả một số phần tử.
• Bạn hãy test các phần tử thực sự hiển thị trên màn hình, các phần tử mà người dùng thực sự tương tác với nó.

Làm cho các test độc lập nhất có thể

• Các test tốt nhất nên độc lập với nhau, có localStorage, cookie, session riêng để tránh việc ảnh hưởng lẫn nhau.
• Để tránh duplicate thì bạn có thể dùng các hooks như beforeAll, beforeEach.

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

test.beforeEach(async ({ page }) => {
  // Runs before each test and signs in each page.
  await page.goto('https://github.com/login');
  await page.getByLabel('Username or email address').fill('username');
  await page.getByLabel('Password').fill('password');
  await page.getByRole('button', { name: 'Sign in' }).click();
});

test('first', async ({ page }) => {
  // page is signed in.
});

test('second', async ({ page }) => {
  // page is signed in.
});

• Ngoài ra có một cách khác là dùng setup project. Bạn tìm kiếm bài global setup and tear down nhé. Hihi.

Tránh phụ thuộc vào bên thứ ba

• Ví dụ test của bạn cần gọi API bên thứ ba để lấy giá trị gì đó.
• Việc gọi API có thể tốn thời gian, không kiểm soát được, và có thể gây fail test. Nên bạn có thể chọn cách mock response của API bên thứ ba này để tránh bị phụ thuộc

await page.route('**/api/fetch_data_third_party_dependency', route => route.fulfill({
  status: 200,
  body: testData,
}));
await page.goto('https://example.com');

Test database

• Nếu bạn làm việc với database thì hãy kiểm soát dữ liệu của mình.
• Đảm bảo rằng cùng dữ liệu, trên cùng môi trường khác nhau sẽ cho ra cùng kết quả.

Best Practices

Sử dụng locator

• Sử dụng các locator dựa trên “user facing attribute” (UFA – tức là các thuộc tính mà người dùng nhìn thấy).
• Việc dùng các UFA giúp test ổn định hơn.

// Good
page.getByRole('button', { name: 'submit' });

Sử dụng chaining và filtering

• Chaining là chuỗi (hình dung giống các mắt xích liên kết với nhau).
• Hiểu đơn giản thì khi gọi làm lấy ra locator, thì có thể lấy ra các locator con bằng cách dùng hàm locator tiếp.

await page
    .getByRole('listitem')
    .getByRole('button', { name: 'Add to cart' })
    .click();

• Filter là lọc. Lọc lấy locator cần trong 1 danh sách các locators

const product = page.getByRole('listitem').filter({ hasText: 'Product 2' });

• Kết hợp cả chaining và filtering

await page
    .getByRole('listitem')
    .filter({ hasText: 'Product 2' })
    .getByRole('button', { name: 'Add to cart' })
    .click();

Ưu tiên sử dụng user-facing attribute hơn là XPath hay CSS Selectors

• DOM có thể dễ bị thay đổi XPath hay CSS Selector.
• Tuy nhiên thì giao diện người dùng ít bị thay đổi ~> nên dùng các user-facing attribute hơn là dùng XPath và CSS selector

// Không nên
page.locator('button.buttonIcon.episode-actions-later');

// Nên
page.getByRole('button', { name: 'submit' });

Generate locator

• Có thể dùng codegen

• Hoặc VSCode extension

Sử dụng web-first assertion

• Hiểu đơn giản là dùng các hàm async matcher.
• Ví dụ:
  • Thay vì dùng: expect(await page.getByText('welcome').isVisible()).toBe(true);
  • Thì nên dùng: await expect(page.getByText('welcome')).toBeVisible();

Cài đặt debug

• Debug giúp bạn tìm ra lỗi nhanh hơn, trực quan hơn.

• Cài VSCode extension để debug nha.

• Để chạy debug có 2 cách:

  • Click chuột phải vào icon tam giác xanh bên cạnh tên test trên VSCode, chọn debug.
  • Chạy command line để chạy ở debug mode trên UI: npx playwright test --debug

• Debug trên CI thì cần bật trace lên

npx playwright test --trace on

• Sau đó chạy lệnh để xem report:

npx playwright show-report