Tìm hiểu Playwright: Framework Testing End-to-End Hiện Đại cho Web Application

Giới thiệu về Playwright

Playwright là một framework testing end-to-end mã nguồn mở được phát triển bởi Microsoft, ra mắt vào tháng 1 năm 2020. Được thiết kế để đáp ứng nhu cầu testing các ứng dụng web hiện đại, Playwright nổi bật với khả năng chạy test trên nhiều trình duyệt khác nhau một cách đồng nhất và đáng tin cậy. Framework này đã nhanh chóng trở thành một công cụ được ưa chuộng trong cộng đồng phát triển phần mềm và QA nhờ hiệu suất cao, tính linh hoạt và độ tin cậy.

Playwright cung cấp các API để có thể tự động hóa các website và ứng dụng web đang chạy trên Chromium, Firefox và WebKit. Các API này có thể được sử dụng bởi các developer viết mã JavaScript, Python, Java để tạo các trang trình duyệt mới, điều hướng đến các URL và sau đó tương tác với các phần tử trên trang.

Playwright chạy trình duyệt ở chế độ headless theo mặc định(Chế độ chạy nền(background)). Nghĩa là Playwright sẽ không hiển thị giao diện người dùng của trình duyệt khi chạy test. Điều này giúp tiết kiệm tài nguyên hệ thống và tăng tốc độ thực thi test. Tuy nhiên, bạn có thể bật chế độ "headed" để xem trình duyệt trong quá trình chạy test, điều này hữu ích cho việc debug và phát triển.

Tại sao nên chọn Playwright cho Web Automation?

Trong bối cảnh phát triển web hiện nay, các ứng dụng ngày càng trở nên phức tạp với nhiều framework JavaScript, single-page applications và các công nghệ mới liên tục xuất hiện. Những đặc điểm này đặt ra nhiều thách thức cho việc testing, đòi hỏi các công cụ phải đủ mạnh mẽ và linh hoạt để đáp ứng.

Playwright được tạo ra để giải quyết những thách thức này, với nhiều tính năng nổi bật:

• Hỗ trợ đa trình duyệt: Playwright hoạt động với tất cả các trình duyệt chính (Chromium, WebKit, Firefox) trên Windows, Linux và macOS với chỉ một API duy nhất để điều khiển.
• Auto-waiting: Tự động đợi các element sẵn sàng trước khi tương tác, giảm tính không ổn định. Các assertion web-first và logic retry giúp đảm bảo các test đáng tin cậy mà không cần timeout thủ công. Điều này giúp giảm thiểu các lỗi flaky test thường gặp trong các công cụ khác.
• Cô lập test hoàn toàn: Mỗi test chạy trong một browser context riêng biệt, mô phỏng một hồ sơ trình duyệt mới, đảm bảo không có sự can thiệp giữa các test. Bạn có thể lưu trạng thái xác thực, tránh đăng nhập lặp lại trong khi vẫn giữ các test độc lập.
• Network interception: Khả năng theo dõi, thay đổi và mô phỏng các network request
• Hiệu suất cao: Được tối ưu hóa để chạy nhanh và ổn định
• Hỗ trợ nhiều ngôn ngữ: hỗ trợ nhiều ngôn ngữ lập trình như JavaScript, TypeScript, Python, .NET và Java
• Mobile emulation: Hỗ trợ testing trên các thiết bị di động thông qua device emulation
• Modern web support: Hỗ trợ đầy đủ các tính năng web hiện đại như shadow DOM, iframes, và các kỹ thuật routing phức tạp
• Kịch bản testing nâng cao: Playwright cho phép testing các quy trình làm việc phức tạp liên quan đến nhiều tab, người dùng hoặc context và có thể tương tác với các phần tử shadow DOM và nội dung động bằng cách sử dụng đầu vào trình duyệt thực, mô phỏng hành động người dùng thực tế.
• Công cụ debug mạnh mẽ: Với các tính năng như Playwright Inspector, Codegen và Trace Viewer, bạn có thể dễ dàng tạo, kiểm tra và debug các test. Những công cụ này cung cấp cái nhìn toàn diện về quá trình thực thi test, kèm theo video, ảnh chụp màn hình và DOM snapshots.

Playwright vs. Công cụ testing khác

Để hiểu rõ hơn về vị thế của Playwright trong hệ sinh thái các công cụ testing end-to-end, hãy xem xét bảng so sánh sau:

Kiến trúc và Nguyên lý hoạt động của Playwright

Kiến trúc cốt lõi

Playwright xây dựng trên một kiến trúc đa quy trình (multi-process architecture) giúp tạo ra môi trường cô lập và đáng tin cậy cho việc testing. Kiến trúc này bao gồm các thành phần chính:

1. Playwright API: Interface chính mà developers sử dụng để viết test
2. Browser Launcher: Chịu trách nhiệm khởi động và quản lý các phiên bản trình duyệt
3. Browser Contexts: Môi trường cô lập tương tự như "incognito profile" trong trình duyệt
4. Pages: Đại diện cho một tab trình duyệt, nơi diễn ra các thao tác test
5. CDP (Chrome DevTools Protocol): Giao thức mà Playwright sử dụng để giao tiếp với trình duyệt Chromium
6. WebSocket connections: Được sử dụng để giao tiếp với Firefox và WebKit

Để hiểu cách hoạt động của kiến trúc Playwright, chúng ta sẽ so sánh cơ chế hoạt động của nó với Selenium. Selenium gửi mỗi lệnh dưới dạng một HTTP request độc lập và nhận các phản hồi JSON. Mỗi tương tác, như mở cửa sổ trình duyệt, click vào một phần tử hoặc nhập văn bản vào ô input, đều được gửi dưới dạng HTTP request riêng biệt. Điều này có nghĩa chúng ta phải đợi lâu hơn cho các phản hồi và tăng khả năng xảy ra lỗi.

Thay vì giao tiếp với mỗi driver thông qua một kết nối WebSocket riêng biệt, Playwright dựa vào một kết nối WebSocket duy nhất để giao tiếp với tất cả các driver, kết nối này được duy trì cho đến khi testing kết thúc. Điều này cho phép các lệnh được gửi nhanh chóng trên một kết nối duy nhất, từ đó giảm các điểm có thể gây lỗi.

Quy trình hoạt động

Khi một test được thực thi, Playwright hoạt động theo quy trình sau:

1. Khởi tạo một phiên bản trình duyệt mới (browser instance)
2. Tạo một browser context - môi trường cô lập
3. Tạo một trang mới (page) trong browser context
4. Thực hiện các hành động test như điều hướng, click, nhập dữ liệu, v.v.
5. Kiểm tra kết quả thông qua các assertion
6. Đóng page, browser context và browser để giải phóng tài nguyên

Điều quan trọng cần lưu ý là cách Playwright sử dụng cơ chế "auto-waiting". Khi bạn thực hiện một hành động (ví dụ: click vào một button), Playwright sẽ tự động đợi cho đến khi element đó sẵn sàng để tương tác (visible, enabled, và stable). Điều này giúp giảm thiểu các lỗi flaky test thường gặp trong các công cụ testing khác.

Cài đặt và Khởi tạo Playwright

Yêu cầu hệ thống

Trước khi cài đặt Playwright, hãy đảm bảo môi trường phát triển của bạn đáp ứng các yêu cầu sau:

• Node.js: Phiên bản 12 hoặc cao hơn
• Trình quản lý gói: npm, yarn, hoặc pnpm
• Hệ điều hành: Windows, macOS, hoặc Linux
• IDE: Bất kỳ editor nào bạn thích, tuy nhiên VS Code được khuyến nghị vì có extension hỗ trợ Playwright

Tạo dự án mới

Để bắt đầu, bạn cần tạo một thư mục dự án mới. Bạn có thể sử dụng terminal hoặc command prompt để thực hiện điều này:

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

Cài đặt Playwright

Cách đơn giản nhất để bắt đầu với Playwright là sử dụng công cụ cài đặt tự động:

# Sử dụng npm
npm init playwright@latest -y

# Hoặc với yarn
yarn create playwright

# Hoặc với pnpm
pnpm create playwright

Trong quá trình cài đặt, bạn sẽ được hỏi một số câu hỏi cấu hình:

1. Do you want to use TypeScript or JavaScript? - Bạn muốn sử dụng JavaScript hay TypeScript? (mặc định: TypeScript)
2. Where to put your end-to-end tests? - Đường dẫn để lưu trữ các test end-to-end? (mặc định: tests hoặc e2e)
3. Add a GitHub Actions workflow? - Thêm GitHub Actions workflow? (Yes/No)
4. Cài đặt các trình duyệt cho Playwright? (Yes/No)
5. Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) › true

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

my-project/
├── node_modules/
├── playwright.config.ts (hoặc .js)
├── package.json
├── package-lock.json (hoặc yarn.lock, pnpm-lock.yaml)
├── tests/
│   └── example.spec.ts (hoặc .js)
└── tests-examples/
    └── demo-todo-app.spec.ts (hoặc .js)

Cấu hình Playwright

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.

Cài đặt thủ công

Nếu bạn muốn thêm Playwright vào một dự án hiện có, bạn có thể cài đặt thủ công:

# Cài đặt package Playwright Test
npm install --save-dev @playwright/test

# Cài đặt các trình duyệt cần thiết
npx playwright install

Chạy Test đầu tiên

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.

Tạo file test

Tạo một file test mới trong thư mục tests (hoặc e2e) với tên example.spec.ts:

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

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

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Demo Dummy/);
  // Expects page to have a title "to contain" a substring.
  await expect(page).toHaveTitle('Home | IT Demo Dummy');
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Chạy Test

Để chạy test, bạn có thể sử dụng lệnh sau trong terminal:

npx playwright test

Playwright Code gen

Playwright cung cấp một công cụ mạnh mẽ để tự động tạo mã test từ các hành động người dùng thực tế. Điều này giúp bạn nhanh chóng tạo ra các test case mà không cần phải viết mã thủ công.

Sử dụng Playwright Codegen

Để sử dụng Playwright Codegen, bạn chỉ cần chạy lệnh sau trong terminal:

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

Khi lệnh này được thực thi, Playwright sẽ mở một cửa sổ trình duyệt và bắt đầu ghi lại các hành động của bạn. Mỗi lần bạn tương tác với trang (click, nhập văn bản, v.v.), Playwright sẽ tự động tạo mã tương ứng trong cửa sổ codegen.

Ví dụ về mã được tạo ra

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

test('test', async ({ page }) => {
  await page.goto('https://dummy-demo-njndex.web.app/');
  await page.getByRole('link', { name: 'Todo List Demo A simple todo' }).click();
  await page.getByRole('textbox', { name: 'Add a new todo' }).click();
  await page.getByRole('textbox', { name: 'Add a new todo' }).fill('first item');
  await page.getByRole('textbox', { name: 'Add a new todo' }).press('Enter');
});

Lưu ý khi sử dụng Codegen

• Tính năng mạnh mẽ: Playwright Codegen hỗ trợ nhiều loại tương tác khác nhau, bao gồm click, nhập văn bản, chọn từ dropdown, v.v.
• Tùy chỉnh mã: Bạn có thể chỉnh sửa mã được tạo ra để phù hợp với nhu cầu của mình, thêm các assertion, hoặc thay đổi logic test.

Tích hợp với CI/CD

Playwright Codegen có thể được tích hợp vào quy trình CI/CD của bạn để tự động tạo và cập nhật các test case khi có thay đổi trong ứng dụng. Điều này giúp đảm bảo rằng các test luôn phản ánh đúng hành vi của ứng dụng.

Tìm hiểu chi tiết về Playwright Codegen ở bài hướng dẫn tiếp theo của tôi ở đây: Hướng dẫn sử dụng Playwright Codegen

Kết luận

Playwright mang đến một giải pháp mạnh mẽ và hiện đại cho việc end-to-end testing các ứng dụng web. Với khả năng cross-browser, auto-waiting, và nhiều tính năng nâng cao, Playwright đang nhanh chóng trở thành lựa chọn hàng đầu cho các team phát triển và QA.

Những ưu điểm chính của Playwright:

• Độ tin cậy cao: Giảm thiểu flaky tests nhờ cơ chế auto-waiting thông minh
• Hiệu suất: Tối ưu hóa để chạy nhanh và ổn định
• Tính linh hoạt: Hỗ trợ nhiều ngôn ngữ và nhiều trình duyệt
• Tính năng phong phú: Từ UI testing đến API testing, visual testing, và nhiều hơn nữa
• Công cụ debugging: Trace Viewer và UI Mode giúp dễ dàng phát hiện và sửa lỗi
• Cộng đồng phát triển: Được hỗ trợ bởi Microsoft và cộng đồng đang phát triển nhanh chóng

Trong xu hướng phát triển phần mềm hiện đại, việc đảm bảo chất lượng thông qua automated testing là không thể thiếu, và Playwright đang chứng minh là một trong những công cụ hiệu quả nhất để đạt được mục tiêu đó.

Tài nguyên học tập

• Playwright Official Documentation
• Playwright GitHub Repository

Tiếp theo

Trong các phần tiếp theo của khóa học, chúng ta sẽ đi sâu vào các chủ đề nâng cao hơn như:

• Fixtures trong Playwright
• Locator - Cách tìm và tương tác với elements
• Assertions trong Playwright
• Xử lý các trường hợp phức tạp như bất đồng bộ, hộp thoại và alerts, Xử lý nhiều tab và windows
• Mô hình Page Object trong Playwright
• API Testing với Playwright
• Visual Testing với Playwright
• Mobile Emulation với Playwright