Playwright

Cài đặt Playwright và viết test case đầu tiên với TypeScript

⚙️ Playwright là công cụ kiểm thử tự động được sử dụng rộng rãi để kiểm thử các ứng dụng Web trên nhiều trình duyệt. Khi kết hợp với TypeScript, Tester có thể xây dựng các test case tự động có cấu trúc rõ ràng và dễ bảo trì.

Nếu bạn mới bắt đầu với Playwright, bài viết này sẽ hướng dẫn từ bước chuẩn bị môi trường, tạo project, cài đặt Playwright cho đến khi viết và chạy test case đầu tiên bằng TypeScript.

Playwright cần những gì để bắt đầu?

Để sử dụng Playwright với TypeScript, bạn cần chuẩn bị cài đặt các phần sau đây:

  • Node.js
  • npm (được cài cùng Node.js)
  • IDE quen thuộc (Một trình soạn thảo mã nguồn, ví dụ Visual Studio Code)
  • Kiến thức TypeScript cơ bản

Bạn không cần cài TypeScript riêng khi tạo project Playwright theo cách được hướng dẫn trong bài này. Playwright Test hỗ trợ TypeScript và có thể xử lý các file .ts trong project.

Bước 1: Cài đặt Node.js

Playwright sử dụng Node.js trong môi trường JavaScript/TypeScript.

Bạn có thể kiểm tra Node.js đã được cài đặt hay chưa bằng lệnh:

node --version

Kiểm tra npm:

npm --version

Nếu terminal trả về phiên bản của Node.js và npm, môi trường đã sẵn sàng.

Nếu chưa cài Node.js, hãy cài phiên bản Node.js phù hợp với môi trường phát triển của bạn trước khi tiếp tục.

Bước 2: Tạo project Playwright

Mở Terminal hoặc Command Prompt và di chuyển đến thư mục muốn tạo project.

Sau đó chạy:

npm init playwright@latest

Playwright sẽ bắt đầu quá trình tạo project và hỏi một số thông tin.

Ví dụ:

  • Do you want to use TypeScript or JavaScript? · TypeScript
  • Where to put your end-to-end tests? · tests
  • Add a GitHub Actions workflow? · No
  • Install Playwright browsers? · Yes

Khi được hỏi về ngôn ngữ, chọn: TypeScript

Sau khi hoàn tất, Playwright sẽ tạo một project mẫu cùng các file cần thiết.

Bước 3: Cấu trúc project Playwright

Một project Playwright cơ bản có thể có cấu trúc tương tự:

playwright-project/

├── tests/

│  └── example.spec.ts

├── playwright.config.ts

├── package.json

└── package-lock.json

Trong đó:

tests/

là thư mục chứa các test case.

Ví dụ:

tests/

└── example.spec.ts

File …spec.ts có thể chứa các test case được viết bằng TypeScript.

playwright.config.ts

là file cấu hình cho Playwright Test.

Bạn có thể cấu hình trong file này những thông tin như:

  • Browser
  • Base URL
  • Timeout
  • Test directory
  • Reporter
  • Screenshot
  • Trace
  • Parallel execution

Khi project phát triển, file cấu hình này sẽ đóng vai trò quan trọng trong việc quản lý cách các test case được thực thi.

package.json

File này chứa thông tin của project và các package mà project sử dụng.

Bước 4: Viết test case Playwright đầu tiên

Tạo file: tests/first-test.spec.ts

Sau đó thêm test case:

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

test('Page title is correct', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  await expect(page).toHaveTitle(/Playwright/);
});

Đây là một test case khá đơn giản nhưng đã thể hiện những thành phần cơ bản của một test case Playwright.

Phân tích test case đầu tiên

Import test và expect

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

test được sử dụng để định nghĩa test case.

expect được sử dụng để thực hiện assertion – kiểm tra kết quả thực tế có đáp ứng điều kiện mong đợi hay không.

Định nghĩa test case

test('Page title is correct', async ({ page }) => {

Ở đây:

  • test() được sử dụng để định nghĩa một test case.
  • ‘Page title is correct’ là tên của test case.
  • async cho phép sử dụng các thao tác bất đồng bộ.
  • page là một Playwright Page object, đại diện cho một tab hoặc trang Web mà test case đang tương tác.

Truy cập trang Web

await page.goto('https://playwright.dev/');

Lệnh này yêu cầu Playwright mở trang Web được chỉ định.

Kiểm tra kết quả

await expect(page).toHaveTitle(/Playwright/);

Đây là assertion.

Test case sẽ kiểm tra title của trang có chứa Playwright hay không.

  • Nếu điều kiện đúng, test case pass.
  • Nếu điều kiện không đúng, test case fail.

Bước 5: Chạy test case

Sau khi viết test case, bạn có thể chạy các test case trong project bằng:

npx playwright test

Playwright sẽ thực thi các test case trong project.

Nếu test case chạy thành công, terminal sẽ hiển thị kết quả tương ứng.

Ví dụ: 1 passed

Nếu test case không đáp ứng assertion hoặc xảy ra lỗi trong quá trình thực hiện, test case sẽ được đánh dấu failed.

Chạy test case ở chế độ trình duyệt hiển thị

Khi mới học Playwright, việc nhìn thấy trình duyệt thực hiện các thao tác có thể giúp bạn dễ hiểu hơn.

Bạn có thể chạy:

npx playwright test --headed

Tùy cấu hình và môi trường, trình duyệt sẽ được mở trong quá trình thực thi các test case.

Bạn cũng có thể sử dụng Playwright UI Mode:

npx playwright test --ui

UI Mode cung cấp giao diện trực quan hơn để xem và chạy các test case.

Bước 6: Xem báo cáo kiểm thử

Sau khi chạy test case, Playwright có thể tạo test report.

Bạn có thể mở report bằng:

npx playwright show-report

Report giúp Tester xem:

  • Test case nào pass
  • Test case nào fail
  • Thời gian thực hiện
  • Chi tiết từng test case
  • Thông tin phục vụ việc phân tích lỗi

Đây là một phần quan trọng khi xây dựng automation test suite thay vì chỉ chạy từng test case riêng lẻ.

Viết test case có thao tác với Web

Sau khi hiểu test case đầu tiên, bạn có thể bắt đầu tương tác với các phần tử trên trang Web.

Ví dụ:

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

test('Search Playwright documentation', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  await page.getByRole('link', { name: 'Docs' }).click();

  await expect(page).toHaveURL(/docs/);
});

Trong ví dụ này, test case:

  1. Mở trang Playwright.
  2. Tìm link Docs.
  3. Click vào link.
  4. Kiểm tra URL sau khi click.

Đây là cấu trúc cơ bản của một automation test:

Action → Application → Expected Result → Assertion

Locator trong Playwright

Khi automation test tương tác với Web, Tester cần xác định đúng phần tử cần thao tác.

Playwright cung cấp nhiều locator, trong đó có các locator dựa trên cách người dùng nhìn nhận giao diện.

Ví dụ:

page.getByRole('button', { name: 'Login' })

Hoặc:

page.getByLabel('Username')

Hoặc:

page.getByText('Welcome')

Việc lựa chọn locator phù hợp có ảnh hưởng trực tiếp đến khả năng ổn định và bảo trì của automation test.

Locator là một chủ đề quan trọng khi học Playwright và nên được tìm hiểu sâu hơn sau khi bạn đã viết được test case đầu tiên.

Một số lệnh Playwright thường gặp

Khi mới bắt đầu, bạn sẽ thường gặp các thao tác như:

Thao tácVí dụ
Mở trangpage.goto()
Clicklocator.click()
Nhập dữ liệulocator.fill()
Chọn optionlocator.selectOption()
Kiểm tra textexpect(locator).toHaveText()
Kiểm tra hiển thịexpect(locator).toBeVisible()
Kiểm tra URLexpect(page).toHaveURL()
Kiểm tra titleexpect(page).toHaveTitle()

Không nên cố ghi nhớ tất cả API ngay từ đầu. Quan trọng hơn là hiểu cách một test case được xây dựng và cách Playwright tương tác với ứng dụng Web.

Có cần biết TypeScript trước khi học Playwright?

Bạn không cần phải là một lập trình viên chuyên nghiệp để bắt đầu học Playwright.

Tuy nhiên, nếu sử dụng Playwright với TypeScript, Tester nên có kiến thức cơ bản về:

  • Variable
  • Data type
  • Array
  • Object
  • Function
  • Condition
  • Loop
  • async/await
  • Module
  • Class cơ bản

Đặc biệt, async/await là kiến thức nên nắm vững vì nhiều thao tác với trình duyệt trong Playwright là các thao tác bất đồng bộ.

Nếu chưa quen với lập trình, bạn nên dành thời gian làm quen với TypeScript trước hoặc học TypeScript song song với Playwright.

Viết được test case đầu tiên chưa có nghĩa là đã làm Automation Testing

Cài đặt Playwright và viết được một test case là bước khởi đầu.

Trong dự án thực tế, Automation Tester còn phải giải quyết nhiều vấn đề khác như:

  • Test case nào nên automation?
  • Làm thế nào để thiết kế test case dễ bảo trì?
  • Sử dụng locator như thế nào để test case ổn định?
  • Quản lý test data ra sao?
  • Tổ chức test suite như thế nào?
  • Làm thế nào để chạy test case trên nhiều browser?
  • Làm thế nào để chạy test case song song?
  • Xử lý test case fail như thế nào?
  • Làm thế nào để tích hợp automation test vào CI/CD?
  • Làm thế nào để giảm flaky test?

Vì vậy, học Playwright không chỉ là học cú pháp API mà còn cần hiểu kiến thức kiểm thử, lập trình và cách xây dựng automation test có khả năng duy trì trong dự án thực tế.

Sau khi viết được test case đầu tiên, nên học gì?

Sau khi đã chạy được test case đầu tiên, bạn có thể tiếp tục tìm hiểu theo thứ tự:

  1. Locator
  2. Assertion
  3. Auto-waiting trong Playwright
  4. Test hooks
  5. Fixtures
  6. Test data
  7. Page Object Model
  8. Multiple browsers
  9. Parallel testing
  10. Trace và debugging
  11. Test report
  12. CI/CD

Đây là những kiến thức giúp bạn chuyển từ việc viết một vài test case đơn giản sang xây dựng một automation test suite có cấu trúc.

Học Playwright với TypeScript

Nếu bạn muốn học Playwright một cách có hệ thống thay vì chỉ dừng ở việc cài đặt framework và viết test case đầu tiên, có thể tham khảo Khóa học Playwright – Kiểm thử tự động Web với TypeScript tại TESTING VN.

Khóa học tập trung vào việc sử dụng Playwright và TypeScript trong kiểm thử tự động Web, từ những kiến thức nền tảng đến cách xây dựng và tổ chức automation test.

👉 Xem Khóa học Playwright – Kiểm thử tự động Web với TypeScript tại TESTING VN.

Kết luận

Playwright giúp Tester nhanh chóng bắt đầu với kiểm thử tự động Web. Với TypeScript, bạn có thể xây dựng các test case có cấu trúc rõ ràng và tiếp tục mở rộng thành một automation test suite.

Nếu mới bắt đầu, đừng cố học tất cả tính năng của Playwright ngay lập tức.

Hãy bắt đầu từ một quy trình đơn giản: Cài đặt → Viết test case → Chạy test case → Kiểm tra → Xác định Locator → Viết thêm test case

Sau khi nắm được nền tảng, bạn có thể tiếp tục học các kỹ thuật nâng cao để xây dựng bộ test case tự động ổn định và dễ bảo trì trong dự án thực tế.

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *