AdsPower
Tiếng Việt
English简体中文РусскийPortuguêsTiếng ViệtУкраїнська

Thiết lập Playwright: Cài đặt, Cấu hình và Chạy Kiểm thử

18 phút đọc
⌯

Xem nhanh

Học cách thiết lập Playwright từ đầu: cài đặt qua npm, cấu hình dự án, chạy kiểm thử, thêm thiết lập toàn cục và khắc phục lỗi thường gặp trong CI.

Thiết lập Playwright: Cài đặt, Cấu hình và Chạy Kiểm thử Đầu tiên

Thiết lập Playwright mất khoảng năm phút: cài đặt gói, tải xuống các tệp nhị phân trình duyệt và chạy kiểm thử ví dụ được tạo. Phần khó khăn đến sau đó — cấu hình dự án, chia sẻ trạng thái xác thực và giữ cho cùng một thiết lập hoạt động trên máy CI. Hướng dẫn này đi qua toàn bộ lộ trình, từ thư mục trống đến một quy trình kiểm thử đáng tin cậy.

Thiết lập Playwright Thực sự Cài đặt Những gì

Thiết lập Playwright: Cài đặt, Cấu hình và Chạy Kiểm thử - Thiết lập Playwright Thực sự Cài đặt Những gì

Thiết lập Playwright: Cài đặt, Cấu hình và Chạy Kiểm thử - Thiết lập Playwright Thực sự Cài đặt Những gì.

Khi bạn chạy trình khởi tạo, Playwright không chỉ thêm một phụ thuộc. Nó tạo khung một dự án kiểm thử hoạt động được và tải xuống các tệp nhị phân trình duyệt cho Chromium, Firefox và WebKit.

Một khung điển hình trông như thế này:

playwright.config.ts        # cấu hình trung tâm
package.json
package-lock.json           # hoặc yarn.lock / pnpm-lock.yaml
tests/
  example.spec.ts           # kiểm thử khởi đầu tối giản

Tệp playwright.config.ts là nơi định nghĩa trình duyệt, thời gian chờ, số lần thử lại, dự án và trình báo cáo. Thư mục tests/ chứa các tệp đặc tả của bạn. Các tệp nhị phân trình duyệt được lưu trữ bên ngoài dự án của bạn để có thể tái sử dụng qua các kho lưu trữ.

Yêu cầu Hệ thống

Trước khi bắt đầu, hãy xác nhận môi trường của bạn:

  • Node.js: 22.x, 24.x hoặc 26.x mới nhất
  • Windows: Windows 11+, Windows Server 2019+ hoặc WSL
  • macOS: 14 (Sonoma) trở lên
  • Linux: Debian 12/13 hoặc Ubuntu 22.04/24.04/26.04 (x86-64 hoặc arm64)

Bước 1: Cài đặt Playwright

Thiết lập Playwright: Cài đặt, Cấu hình và Chạy Kiểm thử - Bước 1: Cài đặt Playwright

Thiết lập Playwright: Cài đặt, Cấu hình và Chạy Kiểm thử - Bước 1: Cài đặt Playwright.

Chọn trình quản lý gói bạn đã sử dụng. Lệnh dưới đây hoặc khởi tạo một dự án mới hoặc thêm Playwright vào dự án hiện có.

npm init playwright@latest
# hoặc
yarn create playwright
# hoặc
pnpm create playwright

Trong lời nhắc tương tác, bạn chọn:

  1. TypeScript hoặc JavaScript — TypeScript là mặc định và cung cấp hỗ trợ trình soạn thảo tốt hơn.
  2. Tên thư mục kiểm thử — mặc định là tests, hoặc e2e nếu thư mục tests đã tồn tại.
  3. Quy trình GitHub Actions — được khuyến nghị nếu bạn dự định chạy kiểm thử trong CI.
  4. Cài đặt trình duyệt Playwright — giữ tùy chọn này trừ khi bạn quản lý tệp nhị phân riêng.

Bạn có thể chạy lại trình khởi tạo sau; nó sẽ không ghi đè các kiểm thử hiện có.

Nếu bạn thích làm việc trong trình soạn thảo, tiện ích mở rộng VS Code có thể tạo và chạy kiểm thử mà không cần chạm vào terminal. Đối với quy trình làm việc do tác nhân điều khiển, có một CLI riêng cài đặt các kỹ năng cho các công cụ như Claude Code và GitHub Copilot:

npm install -g @playwright/cli@latest
playwright-cli install
playwright-cli install --skills

Điều này tạo một thư mục .playwright, thêm nó vào .gitignore và tải xuống trình duyệt đã cấu hình nếu nó bị thiếu.

Bước 2: Chạy Kiểm thử Ví dụ

Thiết lập Playwright: Cài đặt, Cấu hình và Chạy Kiểm thử - Bước 2: Chạy Kiểm thử Ví dụ

Thiết lập Playwright: Cài đặt, Cấu hình và Chạy Kiểm thử - Bước 2: Chạy Kiểm thử Ví dụ.

Theo mặc định, kiểm thử chạy ở chế độ không giao diện và song song trên Chromium, Firefox và WebKit.

npx playwright test

Các biến thể hữu ích:

npx playwright test --headed                 # xem cửa sổ trình duyệt
npx playwright test --project=chromium       # chạy một trình duyệt
npx playwright test tests/example.spec.ts    # chạy một tệp
npx playwright test --ui                     # mở chế độ UI

Chế độ UI cung cấp chế độ theo dõi, xem bước trực tiếp và gỡ lỗi tua ngược thời gian. Đây là cách nhanh nhất để hiểu tại sao một bộ định vị thất bại.

Đọc Báo cáo HTML

Sau khi chạy, mở báo cáo:

npx playwright show-report

Bảng điều khiển cho phép bạn lọc theo trình duyệt, đã qua, thất bại, bị bỏ qua và không ổn định. Nhấp vào một kiểm thử sẽ hiển thị lỗi, tệp đính kèm và từng bước. Báo cáo chỉ tự động mở khi có lỗi xảy ra.

Bước 3: Cấu hình Dự án và Trình duyệt

Thiết lập Playwright: Cài đặt, Cấu hình và Chạy Kiểm thử - Bước 3: Cấu hình Dự án và Trình duyệt

Thiết lập Playwright: Cài đặt, Cấu hình và Chạy Kiểm thử - Bước 3: Cấu hình Dự án và Trình duyệt.

Một dự án là một cấu hình được đặt tên nhắm đến một trình duyệt hoặc thiết bị cụ thể. Hầu hết các nhóm bắt đầu với ba dự án máy tính để bàn và thêm mô phỏng di động khi cần.

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

export default defineConfig({
  testDir: './tests',
  retries: process.env.CI ? 2 : 0,
  use: {
    baseURL: 'http://localhost:3000',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

Số lần thử lại quan trọng trong CI: một cuộc gọi mạng không ổn định không nên làm hỏng bản dựng. Giữ số lần thử lại bằng không ở cục bộ để bạn nhận thấy sự bất ổn thực sự.

Bước 4: Thêm Thiết lập và Dọn dẹp Toàn cục

Hầu hết các bộ kiểm thử cần điều gì đó xảy ra một lần trước tất cả kiểm thử — gieo dữ liệu vào cơ sở dữ liệu, đăng nhập hoặc tạo mã thông báo. Playwright cung cấp hai cách tiếp cận và chúng không tương đương.

Tùy chọn A: Phụ thuộc Dự án (Được khuyến nghị)

Định nghĩa một dự án thiết lập và làm cho các dự án khác phụ thuộc vào nó. Điều này tích hợp với trình chạy kiểm thử, vì vậy các dấu vết được ghi lại và các fixture hoạt động.

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

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

Các tệp thiết lập và dọn dẹp là các kiểm thử thông thường:

// tests/global.setup.ts
import { test as setup } from '@playwright/test';

setup('create new database', async () => {
  console.log('creating new database...');
});

Tùy chọn B: globalSetup trong Cấu hình

Tùy chọn cũ chạy một hàm được xuất duy nhất trước tất cả kiểm thử. Nó hoạt động, nhưng thiếu khả năng hiển thị báo cáo HTML, ghi dấu vết và hỗ trợ fixture.

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

export default defineConfig({
  globalSetup: require.resolve('./global-setup'),
  globalTeardown: require.resolve('./global-teardown'),
  use: {
    baseURL: 'http://localhost:3000/',
    storageState: 'state.json',
  },
});

Một mẫu phổ biến là xác thực một lần và lưu phiên:

import { chromium, type FullConfig } from '@playwright/test';

async function globalSetup(config: FullConfig) {
  const { baseURL, storageState } = config.projects[0].use;
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(baseURL!);
  await page.getByLabel('User Name').fill('user');
  await page.getByLabel('Password').fill('password');
  await page.getByText('Sign in').click();
  await page.context().storageState({ path: storageState as string });
  await browser.close();
}

export default globalSetup;

Sau đó, các kiểm thử bắt đầu với trạng thái đã xác thực vì storageState được tải từ state.json.

Nếu bạn cần dấu vết từ một thiết lập toàn cục thất bại, hãy bọc phần thân trong try...catch và dừng ghi dấu vết trước khi ném lại lỗi.

Bước 5: Cập nhật Playwright và Trình duyệt

Các phiên bản Playwright gắn với các bản dựng trình duyệt cụ thể. Cập nhật cả hai cùng nhau:

npm install -D @playwright/test@latest
npx playwright install --with-deps

Kiểm tra phiên bản đã cài đặt bằng npx playwright --version. Trên Linux, --with-deps cài đặt các thư viện hệ thống mà trình duyệt cần — bỏ qua nó là nguyên nhân phổ biến nhất gây lỗi CI.

Các Vấn đề Thiết lập Playwright Thường gặp

Triệu chứng Nguyên nhân có thể Cách khắc phục
Executable doesn't exist Thiếu tệp nhị phân trình duyệt hoặc không khớp phiên bản Chạy npx playwright install
Kiểm thử qua cục bộ, thất bại trong CI Thiếu phụ thuộc hệ thống Dùng npx playwright install --with-deps
Thiết lập toàn cục không hiển thị trong báo cáo Dùng globalSetup thay vì phụ thuộc dự án Chuyển sang dự án thiết lập
Kiểm thử không ổn định trên tài khoản chia sẻ Trạng thái phiên được tái sử dụng qua các worker song song Dùng trạng thái lưu trữ riêng cho mỗi worker
--no-deps bỏ qua thiết lập ngoài dự kiến Chuỗi phụ thuộc bị bỏ qua Xóa --no-deps hoặc chạy thiết lập rõ ràng

Nơi Thiết lập Playwright Gặp Tự động hóa Thực tế

Playwright rất xuất sắc trong việc điều khiển trình duyệt, nhưng nó không quản lý danh tính. Nếu kiểm thử hoặc trình thu thập dữ liệu của bạn cần vận hành nhiều tài khoản — đăng nhập người bán trên sàn thương mại điện tử, tài khoản quảng cáo, hồ sơ mạng xã hội — mỗi phiên cần một dấu vân tay riêng biệt và proxy riêng. Đó là lớp mà trình duyệt chống phát hiện cung cấp.

AdsPower tạo các hồ sơ trình duyệt biệt lập với dấu vân tay duy nhất trên các tham số Canvas, WebGL, mạng và tác nhân người dùng, đồng thời hỗ trợ cấu hình proxy cho mỗi hồ sơ. Các nhóm chạy quy trình nhiều tài khoản thường kết hợp nó với Playwright để mỗi lần chạy tự động hóa bắt đầu từ một danh tính sạch, nhất quán thay vì trạng thái trình duyệt chia sẻ. Đối với các mẫu dành riêng cho sàn thương mại điện tử, xem hướng dẫn về sử dụng AdsPower với Amazon Seller Central, và đối với quy trình tiếp thị liên kết, xem hướng dẫn đa tài khoản MaxBounty.

Đây không phải là sự thay thế cho thiết lập Playwright — mà là sự bổ sung. Playwright xử lý điều hướng, khẳng định và báo cáo; lớp hồ sơ xử lý ngữ cảnh tài khoản bên dưới.

Đọc thêm

Nguồn và đọc thêm

Câu hỏi Thường gặp

Thiết lập Playwright mất bao lâu?

Cài đặt và kiểm thử đầu tiên vượt qua thường mất dưới mười phút trên hệ điều hành được hỗ trợ. Trình khởi tạo tải xuống các tệp nhị phân trình duyệt, đây là bước chậm nhất trên máy mới.

Tôi có cần cài đặt trình duyệt riêng không?

Thường là không. npm init playwright@latest tải chúng xuống theo mặc định. Bạn chỉ cần npx playwright install thủ công sau khi nâng cấp Playwright hoặc khi thiết lập máy không có trình khởi tạo.

Sự khác biệt giữa globalSetup và phụ thuộc dự án là gì?

Phụ thuộc dự án chạy như một dự án bình thường, vì vậy chúng xuất hiện trong báo cáo HTML, ghi dấu vết và hỗ trợ fixture. globalSetup là một hàm duy nhất chạy trước mọi thứ và thiếu các tính năng đó. Tài liệu Playwright khuyến nghị phụ thuộc dự án.

Playwright có thể chạy ở chế độ có giao diện trong CI không?

Có, nhưng máy CI thường thiếu máy chủ hiển thị. Sử dụng màn hình ảo như Xvfb, hoặc giữ kiểm thử không giao diện và dựa vào dấu vết và video để gỡ lỗi.

Làm cách nào để chỉ chạy một trình duyệt trong quá trình phát triển?

Dùng npx playwright test --project=chromium. Điều này bỏ qua các dự án khác và rút ngắn đáng kể vòng phản hồi.

Playwright có hỗ trợ kiểm thử di động không?

Có. Playwright bao gồm mô phỏng di động gốc cho Chrome trên Android và Mobile Safari, được cấu hình thông qua các cài đặt trước thiết bị trong dự án của bạn.

Kết luận

Một thiết lập Playwright vững chắc gồm ba điều: cài đặt đúng, cấu hình phù hợp với môi trường CI của bạn và chiến lược thiết lập toàn cục không chống lại trình chạy kiểm thử. Bắt đầu với trình khởi tạo, chạy kiểm thử ví dụ, sau đó thêm dự án và dự án thiết lập khi bộ kiểm thử của bạn phát triển. Khi tự động hóa của bạn cần vận hành nhiều tài khoản thay vì một phiên người dùng duy nhất, hãy thêm một trình duyệt chống phát hiện để mỗi lần chạy có danh tính sạch riêng — và giữ Playwright tập trung vào những gì nó làm tốt nhất: điều khiển trình duyệt và cho bạn biết điều gì đã hỏng.

Chia sẻ

Bài viết liên quan