Khám phá Playwright Codegen - Ghi lại test một cách tự động

Sau khi đã cài đặt và viết test đầu tiên với Playwright và TypeScript, trong bài viết này chúng ta sẽ tiếp tục khám phá một trong những tính năng mạnh mẽ nhất của Playwright: Codegen.

Codegen là một công cụ giúp bạn tự động tạo mã test bằng cách ghi lại các thao tác trên trình duyệt. Đây là cách nhanh chóng và trực quan để bắt đầu viết test, đặc biệt hữu ích cho người mới bắt đầu hoặc khi bạn cần tạo test prototype nhanh.

Trong quy trình phát triển và kiểm thử phần mềm hiện đại, việc tối ưu thời gian và nguồn lực là vô cùng quan trọng. Playwright Codegen ra đời như một giải pháp giúp các tester và developer có thể nhanh chóng tạo ra các test case chất lượng cao mà không cần viết từng dòng mã một cách thủ công.

1. Codegen là gì?

Codegen là viết tắt của "Code Generator". Trong Playwright, đây là công cụ giúp bạn:

• Ghi lại thao tác người dùng (như click, nhập dữ liệu, điều hướng...)
• Tự động tạo mã test dưới dạng Playwright script (TypeScript, JavaScript, Python, Java, C#)
• Có thể chỉnh sửa, mở rộng mã test được tạo để phục vụ nhu cầu thực tế
• Tạo locator chính xác và tối ưu cho các phần tử trên trang web
• Sinh mã theo thời gian thực khi bạn tương tác với trang web

💡 Rất phù hợp khi bạn muốn khám phá UI của ứng dụng web và tạo test E2E nhanh chóng mà không cần viết tay từng dòng mã.

Về bản chất, Playwright Codegen hoạt động bằng cách tạo một phiên trình duyệt có khả năng theo dõi và ghi lại tất cả các tương tác của người dùng, sau đó chuyển đổi chúng thành mã Playwright tương ứng. Công cụ này được phát triển bởi Microsoft và là một phần không thể thiếu trong hệ sinh thái Playwright.

Tại sao nên sử dụng Code Generator?

Ưu điểm:

• Tiết kiệm thời gian: Thay vì viết từng dòng code test, bạn chỉ cần thực hiện các thao tác trên giao diện web
• Giảm thiểu lỗi: Code được sinh tự động dựa trên các selector chính xác
• Học hỏi nhanh: Quan sát code được sinh ra để hiểu cách Playwright hoạt động
• Hỗ trợ đa trình duyệt: Có thể sinh code cho Chromium, Firefox, Safari/WebKit

Hạn chế:

• Code sinh ra có thể cần được tối ưu hóa và tùy chỉnh
• Không thể tự động sinh ra các assertion phức tạp
• Cần hiểu biết để refactor code cho phù hợp với dự án

2. Cách sử dụng Playwright Codegen

a. Chạy lệnh Codegen cơ bản

Giả sử bạn đã cài đặt Playwright trong dự án, bạn có thể chạy lệnh sau trong terminal:

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

Lệnh này sẽ:

• Mở một cửa sổ trình duyệt
• Mở công cụ ghi lại thao tác (Playwright Inspector)
• Tự động sinh mã TypeScript tương ứng với các thao tác bạn thực hiện trên trang web

b. Giao diện Codegen

Khi bạn khởi chạy Codegen, hai cửa sổ chính sẽ xuất hiện:

1. Cửa sổ trình duyệt - Nơi bạn tương tác với trang web
2. Playwright Inspector - Hiển thị mã được tạo ra theo thời gian thực

Khi bạn click, gõ dữ liệu, hoặc điều hướng, bạn sẽ thấy mã tương ứng được tạo ra ở cửa sổ bên phải. Ví dụ:

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

test('recorded test', async ({ page }) => {
  await page.goto('https://dummy-demo-njndex.web.app/');
  await page.getByTestId('feature-link-todo_list').click();
  await expect(page).toHaveURL(/.*todo-list/);
});

Giao diện Playwright Inspector còn cung cấp một số tính năng hữu ích khác:

1. Trình chọn selector - Giúp bạn kiểm tra và tinh chỉnh locator cho các phần tử
2. Nút Copy - Sao chép mã đã tạo vào clipboard
3. Nút Record - Bắt đầu/dừng ghi lại thao tác
4. Nút Inspect - Chuyển sang chế độ kiểm tra phần tử.
5. Nút Assert - Thêm assertion cho phần tử đang chọn. Bao gồm: isVisible, containsText, hasAttribute, screenshot, v.v.

3. Tuỳ chọn nâng cao với Codegen

Bạn có thể sử dụng thêm các tuỳ chọn để tùy chỉnh đầu ra của codegen:

Ví dụ:

npx playwright codegen https://dummy-demo-njndex.web.app --target=playwright-test --output=tests/generated.spec.ts

# Giả lập thiết bị di động
npx playwright codegen https://dummy-demo-njndex.web.app --device="iPhone 13"

# Lưu trạng thái đăng nhập để tái sử dụng sau
npx playwright codegen https://dummy-demo-njndex.web.app --save-storage=auth.json

a. Sử dụng chế độ Inspect

Ngoài chức năng Record, Playwright Codegen cũng cung cấp chế độ Inspect để bạn có thể phân tích cấu trúc trang web và chọn locator phù hợp:

1. Nhấn vào nút "Inspect" trong giao diện Codegen
2. Di chuột đến phần tử bạn muốn kiểm tra
3. Codegen sẽ hiển thị các locator khả dụng cho phần tử đó
4. Bạn có thể chọn locator phù hợp nhất từ danh sách đề xuất

b. Tạo Assertions với Codegen

Để thêm assertion vào test:

1. Khởi chạy Codegen và tương tác với trang web
2. Chọn phần tử bạn muốn kiểm tra
3. Nhấn nút "Assert" trong Playwright Inspector
4. Chọn loại assertion phù hợp (isVisible, containsText, hasAttribute...)
5. Assertion sẽ được tự động thêm vào mã test

4. Khi nào nên sử dụng Codegen?

Lợi ích khi sử dụng Codegen

1. Tăng hiệu suất làm việc - Giảm đáng kể thời gian tạo test case cơ bản
2. Giảm rào cản kỹ thuật - Cho phép người không chuyên về lập trình tham gia tạo test
3. Tập trung vào trải nghiệm người dùng - Bạn tương tác như một người dùng thực
4. Học cách viết mã tốt hơn - Xem cách Playwright tạo mã test hiệu quả
5. Phát hiện cách tiếp cận mới - Codegen có thể gợi ý các locator và cách thức bạn chưa nghĩ đến

5. Demo

Ghi lại test truy cập trang Todo List

npx playwright codegen https://dummy-demo-njndex.web.app --output=tests/generated.spec.ts

Bạn thao tác:

• Click vào link “Todo List Demo”
• Kiểm tra heading
• Kiểm tra Input
• Nhập một todo mới
• Nhấn Enter
• Kiểm tra todo mới đã được thêm vào danh sách

Kết quả được tạo tại tests/generated.spec.ts sẽ trông giống như sau:

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

test('test', async ({ page }) => {
  await page.goto('https://dummy-demo-njndex.web.app/');
  await page.getByTestId('feature-link-todo_list').click();
  await page.getByRole('textbox', { name: 'What needs to be done?' }).click();
  await page.getByRole('textbox', { name: 'What needs to be done?' }).fill('learn playwright');
  await page.getByRole('button', { name: 'Add' }).click();
  await expect(page.getByText('learn playwright')).toBeVisible();
  await page.getByRole('button', { name: 'Mark complete' }).click();
  await page.getByRole('button', { name: 'Delete todo' }).click();
});

Bây giờ bạn có thể chạy lại test này với lệnh:

npx playwright test tests/generated.spec.ts
# hoặc
npx playwright test tests/generated.spec.ts --ui

6. Kết hợp Codegen vào workflow thực tế

Để sử dụng Codegen hiệu quả nhất trong quy trình phát triển và kiểm thử phần mềm, bạn nên tuân theo workflow sau:

a. Quy trình làm việc tổng thể

1. Dùng codegen để ghi lại thao tác cơ bản
2. Lưu test vào file .spec.ts
3. Tinh chỉnh lại locator (nên dùng getByRole, getByTestId thay vì nth-of-type)
4. Bổ sung assert rõ ràng, mô tả đầy đủ hơn cho test
5. Áp dụng các best practice trong viết mã test
6. Cấu trúc lại test theo mô hình Page Object Model nếu cần
7. Chạy test với npx playwright test để xác nhận

c. Cải thiện mã được tạo bởi Codegen

Code từ Codegen thường cần được tối ưu hóa để phù hợp với dự án thực tế. Dưới đây là cách refactor code trên:

// Mã đã cải thiện
import { test, expect } from '@playwright/test';

test.describe('Todo List Functionality', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('https://dummy-demo-njndex.web.app');
    await page.getByTestId('feature-link-todo_list').click();
  });

  test('should add, complete and delete a todo item', async ({ page }) => {
    const todoText = 'learn playwright';
    
     // Add todo
     await page.getByRole('textbox', { name: 'What needs to be done?' }).fill(todoText);
     await page.getByRole('button', { name: 'Add' }).click();
     
     // Assert todo is added
     const todoTextElement = page.getByTestId('todo-text-1');
     await expect(todoTextElement).toBeVisible();
     await expect(todoTextElement).toHaveText(todoText);

    // Mark as completed
    const checkbox = page.getByTestId('todo-checkbox-1');
    await checkbox.check();
    await expect(checkbox).toBeChecked();
    
    // Delete todo
    await page.getByRole('button', { name: 'Delete todo' }).click();
    await expect(todoTextElement).not.toBeVisible();
  });
});

Với quy trình này, bạn có thể nhanh chóng tạo ra các test E2E chất lượng mà vẫn đảm bảo tính chính xác và dễ bảo trì.

7. Kết luận

Playwright Codegen là công cụ cực kỳ mạnh mẽ và tiện lợi trong quá trình viết test tự động. Dù bạn là QA hay Developer, việc sử dụng codegen có thể giúp bạn:

• Tiết kiệm thời gian
• Nắm bắt nhanh cấu trúc DOM
• Có cái nhìn trực quan về cách viết test

Tuy nhiên, bạn không nên phụ thuộc hoàn toàn vào codegen. Hãy xem nó như một công cụ hỗ trợ — điểm bắt đầu — và hãy cải tiến mã test để phù hợp với chuẩn và logic thực tế.

Nâng cao.

Để tìm hiểu nâng cao về Playwright Codegen, bạn có thể xem bài viết nâng cao tại đây: TBD