Best practices

Sử dụng các công cụ của Playwright

• VSCode extension
• Test generator
• Trace viewer
• UI mode
• Typescript

Test trên nhiều loại browser khác nhau

• Đơn giản là định nghĩa mỗi loại browser là một project

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

Giữ cho Playwrright của bạn được up-to-date

• Chạy lệnh sau để update Playwright của bạn lên phiên bản mới nhất. Lưu ý kiểm tra các thay đổi của bản mới có ảnh hưởng gì tới code hiện tại không nha (mục breaking changes):

npm install -D @playwright/test@latest

• Có thể kiểm tra version của Playwright bằng lệnh:

npx playwright --version

Chạy test trên CI

• Hãy cài đặt CI và chạy test của bạn thường xuyên.
• Chạy càng thường xuyên thì bạn sẽ kiểm soát test của mình càng tốt.
• Linux sẽ support chạy test tốt nhất, nên nếu được thì bạn nên cài CI trên Linux nha ^^.

Lint test

• Lint ở đây hiểu là công cụ kiểm tra syntax, format code.
• Hãy dùng thêm công cụ kiểm tra lint để đảm bảo chất lượng code của bạn là tốt nhất.
• Recommend bạn dùng @typescript-eslint/no-floating-promises

Sử dụng paralellism và sharding

• Mặc định thì Playwright sử dụng parallel.
• Test ở cùng một file thì sẽ chạy trên cùng một worker.
• Nếu bạn muốn các test này chạy song song, kể cả cùng một file thì bạn thêm vào config parallel:

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

test.describe.configure({ mode: 'parallel' });

test('runs in parallel 1', async ({ page }) => { /* ... */ });
test('runs in parallel 2', async ({ page }) => { /* ... */ });

• Phía trên là parallelism. Còn sharding thì bạn chạy như sau:

npx playwright test --shard=1/3

Productivity tips

Sử dụng Soft assertion

• Soft assertion sẽ giúp bạn vẫn tiếp tục chạy, dù có bị fail.
• Bạn có thể sử dụng soft assertion nếu bạn không thật sự cần dừng việc chạy test nếu test fail.

// Make a few checks that will not stop the test when failed...
await expect.soft(page.getByTestId('status')).toHaveText('Success');

// ... and continue the test to check more things.
await page.getByRole('link', { name: 'next page' }).click();