https://playwright.dev/docs/browsers

Giới thiệu

• Mỗi phiên bản của Playwright cần một phiên bản cụ thể của browser.
• Bạn có thể dùng Playwright CLI để cài đặt các browser này.
• Mỗi lần Playwright release, Playwright có thể sẽ update phiên bản của browser. Do vậy, mỗi khi update Playwright thì bạn cũng nên chạy lại lệnh install để update browser lên phiên bản mới nghen. ^^

Cài đặt browser

• Để cài đặt tất cả các browser support, dùng lệnh:

npx playwright install

• Để cài đặt browser cụ thể, dùng lệnh:

npx playwright install webkit

• Xem danh sách các supported browser, dùng lệnh:

npx playwright install --help

Cài đặt system dependencies

• System dependencies có thể hiểu đơn giản là các module hỗ trợ cho trình duyệt.
• Phần này thường chạy trên các server CI:

# Cài đặt tất cả các dependencies của tất cả các browsers
npx playwright install-deps

# Cài đặt dependencies của một browser cụ thể
npx playwright install-deps chromium

# Cài đặt browser và dependencies trong lúc cài browser luôn
npx playwright install --with-deps chromium

Update Playwright thường xuyên

• Như đã nói phía trên, còn đây là câu lệnh

# Update playwright
npm install -D @playwright/test@latest

# Install new browsers
npx playwright install

• Kiểm tra phiên bản Playwright trên máy của bạn

# See what version of Playwright you have by running the following command
npx playwright --version

Cấu hình browser

• Để cài đặt browser, bạn định nghĩa browser cần dùng trong file playwright.config.ts:

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

export default defineConfig({
  projects: [
    /* Test against desktop browsers */
    {
      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: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' }, // or 'chrome-beta'
    },
    {
      name: 'Microsoft Edge',
      use: { ...devices['Desktop Edge'], channel: 'msedge' }, // or 'msedge-dev'
    },
  ],
});

• Mặc định thì Playwright sẽ chạy trên tất cả các browser:

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)
  ✓ [Google Chrome] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Microsoft Edge] › example.spec.ts:3:1 › basic test (2s)

• Trường hợp bạn muốn chạy trên một browser cụ thể, thêm option --project:

npx playwright test --project=firefox

Running 1 test using 1 worker

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

• Trong VSCode có tuỳ chọn để chọn project bạn muốn chạy:

Chromium

• Đối với Google Chrome, Microsoft Edge hay bất cứ trình duyệt nào làm dựa trên nhân Chromium, Playwright sẽ luôn đi trước một phiên bản.
  • Ví dụ: Khi Google Chrome đang ở version 10, Playwright sẽ luôn support Chromium version 11. Thường thì sau đó vài tuần, Google Chrome mới update lên version 11.

Google Chrome & Microsoft Edge

• Dù sao thì Chromium cũng chỉ là nhân. Còn Google Chrome và Microsoft Edge mới là cái người dùng đang dùng.
• Playwright cũng support việc chạy test trực tiếp trên Google Chrome và Edge cho chính xác:

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

export default defineConfig({
  projects: [
    /* Test against branded browsers. */
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' }, // or 'chrome-beta'
    },
    {
      name: 'Microsoft Edge',
      use: { ...devices['Desktop Edge'], channel: 'msedge' }, // or "msedge-beta" or 'msedge-dev'
    },
  ],
});

• Các channel ở đây là các phiên bản. Các bản -beta và -dev là các phiên bản đang phát triển, có thể có lỗi và update thường xuyên.

Cài đặt Google Chrome và Edge

• Nếu Chrome và Edge chưa có trên máy của bạn, bạn cần cài dặt thông qua câu lệnh

npx playwright install msedge #or chrome

• Lưu ý: khi cài đặt Chrome và Edge thì sẽ cài đặt global trên hệ điều hành của bạn. Nghĩa là sẽ override lại thư mục cài đặt hiện tại browser của bạn.

Khi nào thì dùng Chrome và Edge, khi nào không?

• Theo mình thì nên dùng Chrome và Edge từ đầu. Nó là browser mà người dùng trực tiếp sử dụng. Nó sẽ có những lỗi, tính năng rất là thiết thực.

• Dưới đây là mình dịch lại từ document của Playwright.

• ** Mặc định **:

  • Mặc định, Playwright sẽ sử dụng Chromium phiên bản mới nhất.
  • Playwright sẽ luôn update thư viện Chromium của mình chạy trước phiên bản phát hành official của Edge và Chrome.
  • Do vậy, nếu bạn chạy trên phiên bản Chromium thì test của bạn sẽ fail luôn nếu có lỗi liên quan tới phiên bản. Và bạn sẽ có nhiều thời gian để fix hơn 😉

• ** Regression testing **:

  • Đôi khi bạn cần test trên trình duyệt thực tế và hiện tại của người dùng.
  • Lúc này thì nên dùng “chrome” và “edge”.

• ** Media codecs (kiểu liên quan đến việc decode file ảnh, video,…)**:

  • Chromium không có bộ decode giống như Google Chrome hay Edge.
  • Lí do vì Chrome và Edge có nhiều bộ decode độc quyền riêng.
  • Vì vậy, nếu bạn test các case liên quan tới ảnh, video hay file đa phương tiện cần sử dụng bộ decode riêng của Chrome hay Edge thì nên dùng Chrome và Edge thay vì Chromium nha ^^.

• ** Enterprise policies: **

  • Chrome và Edge tôn trọng chính sách dành cho enterprise (doanh nghiệp).
  • Do vậy, Chrome và Edge có thể sẽ có vài hạn chế liên quan tới network, extension, network proxy…
  • Vậy, nếu doanh nghiệp của bạn có các quy định này, bạn có thể sử dụng Chromium ở local để test thì sẽ không bị hạn chế.