Hướng dẫn toàn diện cách sử dụng Playwright để kiểm thử web

Giới thiệu về Playwright Playwright là một framework mã nguồn mở mạnh mẽ, được thiết kế để tự động hóa trình duyệt và thực hiện kiểm thử end-to-end cho các ứng dụng web hiện đại. Được phát triển bởi cùng đội ngũ kỹ sư đã tạo ra Puppeteer, Playwright nổi bật với tốc độ, độ tin cậy và khả năng hỗ trợ đa trình duyệt (Chromium, WebKit, Firefox) trên nhiều hệ điều hành (Windows, Linux, macOS). Việc sử dụng Playwright giúp các nhà phát triển và kỹ sư kiểm thử giảm thiểu thời gian và công sức trong việc đảm bảo chất lượng phần mềm. Playwright tự động xử lý các vấn đề phức tạp như đợi hành động hoàn thành, quản lý race condition và timeout, giúp các bài kiểm thử trở nên ổn định và dễ bảo trì hơn. Điểm cốt lõi khi sử dụng Playwright: Các bài kiểm thử được viết đơn giản, tập trung vào hành động và kiểm tra trạng thái mong đợi. Playwright tự động chờ đợi các điều kiện actionability, loại bỏ nhu cầu về các lệnh `wait` thủ công hay xử lý race condition. Cách viết bài kiểm thử đầu tiên với Playwright Bắt đầu với Playwright rất đơn giản. Một bài kiểm thử điển hình bao gồm việc điều hướng đến một URL, thực hiện các tương tác với yếu tố giao diện và sau đó kiểm tra (assert) các điều kiện mong đợi. Playwright đảm bảo rằng mọi hành động đều được thực thi sau khi yếu tố trở nên sẵn sàng, loại bỏ lỗi thời gian chờ (flaky timeouts). Ví dụ minh họa bài kiểm thử cơ bản Dưới đây là một ví dụ về cách viết bài kiểm thử sử dụng Playwright với TypeScript: import { test, expect } from '@playwright/test'; test('kiểm tra tiêu đề trang', async ({ page }) => { // Điều hướng đến trang web await page.goto('https://playwright.dev/'); // Kiểm tra xem tiêu đề trang có chứa chuỗi con 'Playwright' hay không await expect(page).toHaveTitle(/Playwright/); }); test('kiểm tra liên kết Get started', async ({ page }) => { // Điều hướng đến trang web await page.goto('https://playwright.dev/'); // Nhấp vào liên kết 'Get started' await page.getByRole('link', { name: 'Get started' }).click(); // Kiểm tra xem trang có một tiêu đề với tên 'Installation' hay không await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible(); }); Lưu ý: Khi làm việc với JavaScript trong VS Code, hãy thêm dòng // @ts-check ở đầu mỗi tệp kiểm thử để kích hoạt kiểm tra kiểu tự động. Thực hiện các hành động trên trang web với Playwright Hầu hết các bài kiểm thử bắt đầu bằng việc điều hướng đến một URL mục tiêu. Sau đó, bạn sẽ tương tác với các yếu tố trên trang. Điều hướng trang Sử dụng phương thức page.goto(url) để điều hướng đến một trang web. Playwright sẽ tự động chờ cho đến khi trang đạt trạng thái tải hoàn tất (load state) trước khi tiếp tục. await page.goto('https://playwright.dev/'); Tương tác với các yếu tố Để thực hiện tương tác, trước tiên bạn cần định vị các yếu tố trên trang. Playwright sử dụng API Locators để tìm kiếm phần tử trên trang tại bất kỳ thời điểm nào. Playwright đảm bảo rằng yếu tố đó sẵn sàng để tương tác trước khi thực hiện hành động, bạn không cần phải chờ đợi thủ công. Playwright cung cấp công cụ Pick Locator giúp dễ dàng chọn và xác định các locators cho từng yếu tố. Ví dụ, tạo một locator cho liên kết 'Get started' và nhấp vào nó: // Tạo một locator const getStarted = page.getByRole('link', { name: 'Get started' }); // Nhấp vào locator await getStarted.click(); Trong nhiều trường hợp, bạn có thể viết gọn lại trong một dòng: await page.getByRole('link', { name: 'Get started' }).click(); Các hành động cơ bản phổ biến Dưới đây là danh sách các hành động phổ biến nhất mà bạn có thể thực hiện với locators: Hành động Mô tả locator.check() Chọn (tick) ô checkbox. locator.click() Nhấp vào một yếu tố. locator.uncheck() Bỏ chọn (uncheck) ô checkbox. locator.hover() Di chuột qua một yếu tố. locator.fill() Điền dữ liệu vào trường nhập liệu (input text). locator.focus() Tập trung vào một yếu tố. locator.press() Nhấn một phím đơn. locator.setInputFiles() Chọn tệp để tải lên. locator.selectOption() Chọn một tùy chọn trong danh sách thả xuống. Sử dụng Assertions để kiểm tra điều kiện Playwright tích hợp sẵn các câu lệnh khẳng định (assertions) thông qua hàm expect(). Để thực hiện một khẳng định, bạn gọi expect(value) và chọn một matcher phù hợp với kỳ vọng của bạn. Playwright cung cấp các async matchers, tự động chờ đợi cho đến khi điều kiện mong đợi được đáp ứng, giúp bài kiểm thử không bị lỗi thời gian chờ (non-flaky) và chống lỗi lặp (resilient). Các assertions phổ biến Dưới đây là một số assertions bất đồng bộ phổ biến: expect(locator).toBeChecked(): Kiểm tra xem checkbox có được chọn hay không. expect(locator).toBeEnabled(): Kiểm tra xem một control có được kích hoạt hay không. expect(locator).toHaveText(text): Kiểm tra xem yếu tố có chứa văn bản mong đợi hay không. expect(page).toHaveTitle(title): Kiểm tra xem tiêu đề trang có khớp với giá trị mong đợi hay không. Chạy và gỡ lỗi bài kiểm thử với Playwright và VS Code Visual Studio Code cung cấp một môi trường tuyệt vời để làm việc với Playwright, bao gồm cả việc chạy và gỡ lỗi bài kiểm thử một cách hiệu quả. Testing Sidebar trong VS Code giúp bạn dễ dàng xem và chạy các bài kiểm thử. Chạy bài kiểm thử Bạn có thể chạy từng bài kiểm thử hoặc chạy tất cả các bài kiểm thử trong dự án của mình trực tiếp từ VS Code. Testing Sidebar sẽ hiển thị tất cả các tệp test của bạn, cho phép bạn thực thi chúng chỉ với một cú nhấp chuột. Nhấp vào nút play để chạy một bài kiểm thử cụ thể. Thực thi tất cả các bài kiểm thử có trong dự án. Gỡ lỗi (Debugging) Playwright tích hợp sâu với VS Code để hỗ trợ gỡ lỗi. Bạn có thể đặt breakpoint trong code, chạy bài kiểm thử ở chế độ debug và kiểm tra các biến, luồng thực thi một cách chi tiết. Kích hoạt chế độ Debug để bắt đầu phiên gỡ lỗi. Tính năng Trace Viewer của Playwright cung cấp một cái nhìn chi tiết về quá trình thực thi bài kiểm thử, bao gồm các action, log và screenshot, giúp bạn dễ dàng xác định nguyên nhân lỗi. Trace Viewer giúp phân tích từng bước thực thi của bài kiểm thử. Sử dụng Playwright codegen Playwright cung cấp một công cụ mã hóa (codegen) mạnh mẽ, cho phép bạn ghi lại các tương tác của mình trên trình duyệt và tự động tạo ra mã kiểm thử Playwright. Đây là cách tuyệt vời để bắt đầu nhanh chóng hoặc tạo các đoạn mã cho các kịch bản phức tạp. Playwright codegen ghi lại hành động và sinh mã kiểm thử tương ứng. Khi sử dụng codegen, bạn có thể chỉ định loại ngôn ngữ (TypeScript, JavaScript, Python, .NET, Java) và Playwright sẽ tạo mã tương thích. Playwright Python và các ngôn ngữ khác Playwright không chỉ giới hạn ở TypeScript hay JavaScript. Nó hỗ trợ nhiều ngôn ngữ lập trình phổ biến khác, cho phép bạn viết bài kiểm thử bằng ngôn ngữ mà bạn và đội ngũ của mình quen thuộc nhất. Điều này bao gồm: Python .NET (C#) Java Việc sử dụng how to use playwright python tương tự như với JavaScript, bạn sẽ sử dụng các API tương ứng của thư viện Playwright cho Python để thực hiện các hành động và khẳng định. Tích hợp Playwright vào quy trình CI/CD Playwright có thể chạy trên Windows, Linux, và macOS, cả ở chế độ headless (không giao diện) hoặc headed (có giao diện). Điều này cho phép bạn dễ dàng tích hợp Playwright vào các hệ thống Tích hợp liên tục/Triển khai liên tục (CI/CD) của mình, như Jenkins, GitHub Actions, GitLab CI, để tự động chạy kiểm thử sau mỗi lần commit hoặc build. Việc tự động hóa kiểm thử bằng Playwright trong CI/CD giúp phát hiện sớm các lỗi, đảm bảo chất lượng sản phẩm và tăng tốc độ phát triển. Kết luận Playwright là một công cụ kiểm thử tự động mạnh mẽ, linh hoạt và dễ sử dụng cho các ứng dụng web hiện đại. Với khả năng hỗ trợ đa trình duyệt, đa ngôn ngữ và tích hợp sâu với các IDE như VS Code, Playwright giúp đơn giản hóa quy trình kiểm thử, tăng độ tin cậy của các bài kiểm thử và đóng góp vào việc nâng cao chất lượng sản phẩm phần mềm. Bằng cách nắm vững how to use playwright, bạn có thể xây dựng các bài kiểm thử hiệu quả, giảm thiểu lỗi và đẩy nhanh chu kỳ phát triển.