Bài đầu tiên của chúng ta là chuẩn bị một project Playwright đầu tiên dùng TypeScript trên IntelliJ IDEA. Các lệnh dành cho Windows, macOS và Linux gần như giống nhau nhé ✌️

Chuẩn bị

• Bạn download bản Node.js LTS về máy và kiểm tra bằng node -v, npm -v.
• Cài IntelliJ IDEA và bật plugin hỗ trợ JavaScript/TypeScript. Bạn có thể dùng VSCode thì hỗ trợ tốt hơn, nhưng mình không dùng quen nên thôi nhé 🤣
• Tạo một thư mục trống, mở thư mục đó bằng IntelliJ rồi mở tab Terminal:

node -v   #xem phiên bản node đã cài
npm -v    #xem phiên bản npm đã cài
mkdir playwright-training     #tạo folder playwright-training 
cd playwright-training        #truy cập vào folder playwright-training 
npm init playwright@latest    #khởi tạo project playwright, chạy lệnh này xong nó sẽ hỏi

Khi bạn chạy lệnh cuối, một trình hướng dẫn (Wizard) sẽ xuất hiện trong Terminal và hỏi bạn một vài lựa chọn:

1. Ngôn ngữ: Bạn chọn TypeScript
2. Thư mục chứa test: Mặc định là thư mục tests/.
3. CI/CD: Có muốn tự động thêm file cấu hình cho GitHub Actions hay không. Bạn chọn không.
4. Trình duyệt: Có muốn cài đặt sẵn các trình duyệt mặc định (Chromium, Firefox, WebKit) hay không. Chọn OK

Cài browser sau khi tạo project

npx playwright install

# Linux CI có thể cần cả dependency hệ thống
npx playwright install --with-deps

Các file quan trọng

Tạo test đầu tiên

Tạo 1 file my-first-test.spec.ts trong thư mục tests với nội dung như bên dưới. Test này sẽ truy cập vào trang web kia, và make sure rằng trang web đó hiển thị đúng title mà chúng ta truyền vào:

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

test('Check xem trang Example có đúng tiêu đề', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle("Example Domain");
});

*** Settings ***
Library    SeleniumLibrary

*** Test Cases ***
Check xem Trang Example Có Đúng Tiêu Đề
    Open Browser    https://example.com    chrome
    Title Should Be    Example Domain
    [Teardown]    Close Browser

Chạy thử

npx playwright test
npx playwright show-report

Nếu test chạy thành công, project đã sẵn sàng.