https://playwright.dev/docs/test-projects

Giới thiệu

• Project là đơn vị gộp các test vào với nhau với cùng một cấu hình.
• Dựa vào project, ta có thể cấu hình các test chạy ở các browser và các devices khác nhau.
• Project thì được config ở file playwright.config.ts.
• Bạn có thể cấu hình cho các test chạy ở tất cả các project, hoặc chạy ở một số project nhất định.

Cấu hình project cho nhiều browser

• Sử dụng project giúp các test chạy được trên nhiều browser khác nhau như Google Chrome, Microsoft Edge, Chromium,… Playwright cũng chạy được trên các thiết bị giả lập như tablet hay mobile.

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'] },
    },

    /* Test against mobile viewports. */
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12'] },
    },

    /* Test against branded browsers. */
    {
      name: 'Microsoft Edge',
      use: {
        ...devices['Desktop Edge'],
        channel: 'msedge'
      },
    },
    {
      name: 'Google Chrome',
      use: {
        ...devices['Desktop Chrome'],
        channel: 'chrome'
      },
    },
  ],
});

Chạy project

• Mặc định nếu lúc run bạn không thêm gì thì sẽ chạy tất cả các project

npx playwright test

Running 7 tests using 5 workers

  ✓ [chromium] › example.spec.ts:3:1 › basic test (2s)
  ✓ [firefox] › example.spec.ts:3:1 › basic test (2s)
  ✓ [webkit] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Mobile Chrome] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Mobile Safari] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Microsoft Edge] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Google Chrome] › example.spec.ts:3:1 › basic test (2s)

• Nếu bạn chỉ muốn chạy một số project cụ thể thì thêm --project vào sau

npx playwright test --project=firefox

Running 1 test using 1 worker

  ✓ [firefox] › example.spec.ts:3:1 › basic test (2s)

• Nếu chạy bằng VSCode thì bạn cũng có thể chọn project để chạy thông qua checkbox ở section “project”

Cấu hình project cho nhiều môi trường

• Có thể sử dụng project để cấu hình riêng biệt cho từng môi trường.
• Trong ví dụ dưới đây, chúng ta cấu hình cho 2 môi trường

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

export default defineConfig({
  timeout: 60000, // Timeout is shared between all tests.
  projects: [
    {
      name: 'staging',
      use: {
        baseURL: 'staging.example.com',
      },
      retries: 2,
    },
    {
      name: 'production',
      use: {
        baseURL: 'production.example.com',
      },
      retries: 0,
    },
  ],
});

Chia các test theo từng project

• Bạn có thể chia các test theo từng project bằng cách sử dụng testMatch. Test match sử dụng regex để tìm kiếm các file test thoả mãn điều kiện.
• Cùng xét ví dụ sau:

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

export default defineConfig({
  timeout: 60000, // Timeout is shared between all tests.
  projects: [
    {
      name: 'Smoke',
      testMatch: /.*smoke.spec.ts/,
      retries: 0,
    },
    {
      name: 'Default',
      testIgnore: /.*smoke.spec.ts/,
      retries: 2,
    },
  ],
});

• Trong ví dụ này, project Smoke sẽ chỉ chạy các test có đuôi .smoke.spec.ts, còn project default sẽ chỉ chạy các test có đuôi khác .smoke.spec.ts.

Dependency (phụ thuộc)

• Dependency là danh sách các project phụ thuộc, sẽ chạy trước khi các project khác chạy.
• Dependency rất hữu ích khi dùng global setup.
• Khi dùng project dependency, test reporter sẽ hiển thị setup test và trace viewer cũng sẽ record lại quá trình setup của test.
• Cùng xét ví dụ dưới đây:

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

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

• Project chromium, firefox và webkit đều phụ thuộc vào project setup, nên project setup sẽ chạy trước khi các project chạy.

Thứ tự chạy

• Khi làm việc với các test có dependency, các dependency sẽ luôn luôn chạy trước, sau đó là tất cả các test của dependency project chạy pass, sau đó mới đến các project chạy song song với nhau.
• Ví dụ:
  • Có 3 project: chromium, webkit và firefox
  • 3 project này đều phụ thuộc vào project setup
  • Thứ tự thực hiện lúc này sẽ là:
    • Tất cả các test trong project setup chạy và pass hết
    • Các test trong 3 project chromium, webkit và firefox chạy song song. Tuỳ thuộc vào worker limit nữa.

• Trong trường hợp có nhiều dependency Project thì các dependency project sẽ chạy song song với nhau trước, rồi mới đến các project.
• Trong trường hợp một dependency test fail thì các test ở project bị phụ thuộc sẽ không được chạy.
• Xét ví dụ dưới đây:
  • Project e2e tests phụ thuộc vào 2 project: Browser Login và DataBase.
  • Browser Login chạy pass, nhưng DataBase chạy fail.
  • Lúc này test trong project e2e tests sẽ không được chạy.

Teardown

• Bạn có thể thêm teardown bằng cách thêm thuộc tính teardown vào setup project của bạn.
• Teardown sẽ chạy sau khi tất cả các project chạy xong.
• Ví dụ thế này:
  • Có project setup, đã cài đặt teardown là project teardown.
  • Project chrome và webkit depend vào setup
  • Lúc này, thứ tự thực hiện sẽ là:
    • project setup chạy xong
    • project chrome và webkit chạy song song, và chạy xong
    • project teardown chạy xong.

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

export default defineConfig({
  testDir: './tests',
  // ...
  projects: [
    {
      name: 'setup',
      testMatch: /global\.setup\.ts/,
      teardown: 'teardown',
    },
    {
      name: 'teardown',
      testMatch: /global\.teardown\.ts/,
    },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup'],
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
      dependencies: ['setup'],
    },
  ]
});

Test filtering

• If –grep/–grep-invert or –shard option is used, test file name filter is specified in command line or test.only() is used, it will only apply to the tests from the deepest projects in the project dependency chain. In other words, if a matching test belongs to a project that has project dependencies, Playwright will run all the tests from the project dependencies ignoring the filters.