Hướng dẫn cài đặt và triển khai dự án Playwright với TypeScript từ A-Z

Giới thiệu về Playwright và TypeScript

Playwright là một framework testing end-to-end mạnh mẽ do Microsoft phát triển, cho phép thực hiện automated testing trên nhiều trình duyệt khác nhau như Chromium, Firefox và WebKit với một API thống nhất. Kết hợp với TypeScript, Playwright trở thành công cụ testing mạnh mẽ với khả năng type-checking, giúp code trở nên an toàn và dễ bảo trì hơn.

Trong bài viết này, chúng ta sẽ tìm hiểu cách cài đặt và cấu hình một dự án Playwright với TypeScript từ đầu. Chúng ta sẽ đi qua các bước chi tiết, bao gồm cài đặt các dependency cần thiết, tạo cấu trúc dự án, viết test cơ bản, và chạy các test case đầu tiên.

Tại sao nên chọn Playwright với TypeScript?

• Cross-browser testing: Playwright hỗ trợ đầy đủ các trình duyệt chính (Chromium, Firefox, WebKit) với một API thống nhất.
• Auto-waiting: Tự động đợi cho đến khi các element sẵn sàng để tương tác.
• JavaScript phổ biến: Ngôn ngữ quen thuộc với hầu hết lập trình viên, giúp giảm thời gian học và triển khai.
• Type safety: TypeScript giúp phát hiện lỗi ngay trong quá trình phát triển.
• Network interception: Khả năng chặn và sửa đổi các network request.
• Mobile emulation: Hỗ trợ testing trên các thiết bị di động thông qua device emulation.
• Parallel execution: Khả năng chạy test đồng thời để tối ưu thời gian.

Yêu cầu hệ thống

Trước khi bắt đầu, hãy đảm bảo máy tính của bạn đáp ứng các yêu cầu sau:

• Node.js (phiên bản 18 hoặc cao hơn)
• npm, pnpm hoặc yarn (trình quản lý package)
• Editor code như Visual Studio Code (khuyến nghị)

Để kiểm tra phiên bản Node.js đã cài đặt:

node -v
# v24.1.0

Để kiểm tra phiên bản npm/pnpm đã cài đặt:

npm -v
# 11.4.1
pnpm -v

Cài đặt dự án Playwright với TypeScript

Bước 1: Tạo dự án mới

Đầu tiên, chúng ta cần tạo một thư mục mới cho dự án và khởi tạo một dự án Node.js:

mkdir playwright-automation-ts
cd playwright-automation-ts

Bước 2: Cài đặt Playwright và TypeScript

Cài đặt Playwright cùng với các dependencies cần thiết cho TypeScript:

npm init playwright@latest

Trong quá trình cài đặt, bạn sẽ được hỏi một số câu hỏi về cấu hình. Hãy chọn các tùy chọn phù hợp:

• Do you want to use TypeScript or JavaScript? » TypeScript
• Where to put your end-to-end tests? » tests
• Add a GitHub Actions workflow? » Yes/No (tùy theo nhu cầu)
• Install Playwright browsers (can be done manually via 'npx playwright install')? » Yes

Quá trình cài đặt sẽ tạo ra cấu trúc dự án ban đầu với các file cấu hình cần thiết.

Bước 3: Kiểm tra cấu trúc dự án

Sau khi cài đặt hoàn tất, cấu trúc dự án của bạn sẽ có dạng như sau:

playwright-automation-ts/
├── node_modules/
├── package.json
├── package-lock.json
├── playwright.config.ts
├── tests/
│   └── example.spec.ts
├── tests-examples/
│   └── demo-todo-app.spec.ts
└── tsconfig.json

• ./tests/example.spec.ts: Đây là file test end-to-end mẫu.
• ./tests-examples/demo-todo-app.spec.ts - Đây là file test end-to-end mẫu cho ứng dụng Todo.

Bước 4: Tìm hiểu các file cấu hình

File playwright.config.ts

File này chứa cấu hình chính cho Playwright, bao gồm các thiết lập về trình duyệt, timeout, và các tùy chọn khác:

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

File cấu hình playwright.config.ts sẽ được tạo tự động trong thư mục gốc của dự án. Bạn có thể tùy chỉnh các thiết lập như:

• Timeouts: Thời gian chờ mặc định cho các hành động và assertion
• projects: Chọn trình duyệt mặc định để chạy test (Chromium, Firefox, WebKit)
• testDir: Thư mục chứa các test case
• reporter: Chọn định dạng báo cáo (HTML, JSON, v.v.)
• use: Các thiết lập chung cho tất cả các test, như viewport, user agent, v.v.
• etc.

Viết test đầu tiên với Playwright và TypeScript

Bây giờ hãy viết test case đầu tiên của chúng ta sử dụng Playwright TypeScript. Đối với việc này, chúng ta sẽ sử dụng Njndex Dummy Demo, và test sẽ được chạy trên máy cục bộ của chúng ta.

Để hiểu cách Playwright hoạt động, chúng ta sẽ viết một test đơn giản để kiểm tra trang chủ của Njndex Dummy Demo

Tạo file test mới

Trong thư mục tests, tạo một file mới với tên homepage.spec.ts:

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

test('has title', async ({ page }) => {
  // 1. Navigate to the page
  await page.goto('https://dummy-demo-njndex.web.app');

  // 2. Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Demo Dummy/);

  // 3. Expect a title "to be" a specific string.
  await expect(page).toHaveTitle("Home | IT Demo Dummy");
});


test('Can navigate to the Todo list page', async ({ page }) => {
  // 1. Navigate to the page
  await page.goto('https://dummy-demo-njndex.web.app/');

  // 2. Click the "Todo List Demo" link
  await page.getByTestId('feature-link-todo_list').click();

  // 3. Verify URL change
  await expect(page).toHaveURL(/todo-list/);

  // 4. Verify page content
  await expect(page).toHaveTitle(/Todo List | IT Demo Dummy/);
  await expect(page.getByRole('heading', { name: 'Todo List' })).toBeVisible();
});

Chạy test

Để chạy test, sử dụng lệnh:

npx playwright test

Để chạy test với UI mode:

npx playwright test --ui

Để xem kết quả test, chạy lệnh sau:

npx playwright show-report

Các command Playwright cơ bản

Dưới đây là một số lệnh Playwright cơ bản để bạn có thể sử dụng:

Để chạy test trên một trình duyệt cụ thể:

npx playwright test --project=chromium

Để chạy test với một file cụ thể:

npx playwright test example

Để tự động tạo test với Playwright Codegen, sử dụng lệnh sau:

npx playwright codegen https://dummy-demo-njndex.web.app

Đây là 1 tính năng khá hay của Playwright, giúp bạn tự động tạo mã test bằng cách ghi lại các thao tác của bạn trên trình duyệt. Bạn có thể chọn ngôn ngữ đầu ra là JavaScript hoặc TypeScript.

Kết luận

Trong bài viết này, chúng ta đã tìm hiểu về cách cài đặt và cấu hình một dự án Playwright với TypeScript. Chúng ta đã đi qua các bước cơ bản, bao gồm cài đặt các dependency, tạo cấu trúc dự án, và viết test case đầu tiên.

Trong bài viết tiếp theo, chúng ta sẽ tìm hiểu về các chủ đề nâng cao như:

• Page Object Model (POM)
• Fixtures và cách sử dụng
• Cấu hình nâng cao cho Playwright
• Test API với Playwright
• Screenshot và Video Recording

Tài nguyên hữu ích

• Playwright Official Documentation
• TypeScript Documentation
• Playwright GitHub Repository