Kiểm thử Web App của bạn với Playwright

Tram Ho

Như chúng ta đã biết, các headles browsers có khả năng thực thi mã JavaScript nhanh và mô phỏng việc nhấp hoặc di chuột vào các phần tử trên trang trên các thiết bị khác nhau. Các headles browsers cũng cực kỳ hữu ích khi kiểm tra hoạt động mạng, bắt chước các hành vi của người dùng khi sử dụng và tạo các requests. Chúng thường nhanh hơn các trình duyệt thực vì ta không cần khởi động GUI của trình duyệt, vậy nên ta có thể bỏ qua thời gian trình duyệt thực cần để tải CSS và JavaScript và hiển thị HTML. Bởi vậy, chúng thường được sử dụng trong quá trình kiểm thử tự đông nhằm đảm bảo mọi thứ hoạt động như dự định trước khi mã nguồn được triển khai lên môi trường production. Có nhiều giải pháp để viết các ca kiểm thử sử dụng headless browser và trong bài viết này, chúng ta sẽ cùng nhau tìm hiều về thư viện Playwright.

Playwright là gì?

Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

Dựa vào phần giới thiệu Playwright, ta có thể hiểu qua rằng nó là một thư viện Node.js để tự động hóa Chromium, Firefox và WebKit bằng một API duy nhất. Thư viện Playwright được xây dựng để cho phép tự động hóa web trên nhiều trình duyệt, luôn được cập nhật các phiên bản mới nhất, ổn định, hiệu quả, đáng tin cậy và nhanh chóng. Playwright được viết bởi đội ngũ lập trình viên đến từ Microsoft, là dữ án mã nguồn mở, mã nguồn của nó được cung cấp trên Github tại https://github.com/microsoft/playwright
Playwright được xây dựng để tự động hóa hầu hết các tính năng trình duyệt web, những thứ ngày càng phổ biến rộng rãi được sử dụng bởi Single Page Apps và Progressive Web Apps. Với Playwright cung cấp cho chúng ta nhiều tiện ích như sau:

  • Thực hiện các kịch bản kiểm thử kéo dài bao gồm nhiều trang, tên miền và iframe
  • Tự động đợi các phần tử sẵn sàng trước khi thực hiện các hành động (như nhấp chuột, điền form, …)
  • Chặn hoạt động mạng đối với các yêu cầu mạng bắt chước và giả mạo
  • Mô phỏng thiết bị di động, vị trí địa lý, và sự quản lý quyền
  • Hỗ trợ các thành phần web thông qua shadow-piercing selectors
  • Sự kiện đầu vào native cho chuột và bàn phím
  • Tải lên và tải xuống tệp

Bắt đầu làm quen với Playwright

Giả sử bạn đã cài đặt Node bởi vì Playwright là một thư viện của Node mà :v (Nếu không, không sao, hãy truy cập trang web chính thức của Node.js và tải xuống và cài đặt nó.)

Tiếp theo, hãy tạo một thư mục cho project của bạn và khởi tạo một project Node mới bên trong thư mục bằng câu lệnh sau:

Sau khi thiết lập xong project, chúng ta có thể bắt đầu viết các headless tests. Để làm được điều đó, chúng ta cần cài đặt thư viện Playwright và tạo một tệp có tên là index.js nơi chúng tôi viết mã cho quá trình kiểm thử.

Câu lệnh trên cài đặt Playwright và các tệp nhị phân cho Chromium, Firefox và WebKit. Sau khi cài đặt, bạn có thể import thư viện Playwright.

Viết các headless tests

Để đơn giản, đối với ca kiểm thử đầu tiên, chúng ta sẽ truy cập whatsmyuseragent.org và chụp lại ảnh màn hình của trang. Nếu các bạn chưa biết thì whatsmyuseragent.org là một trang web hiển thị phiên bản tác nhân người dùng và dữ liệu, cũng như địa chỉ IP của bạn.

Để làm được điều đó, chúng ta cần import các engine của các trình duyệt từ playwright chẳng hạn như firefox. Sau đó bằng cách gọi phương thức launch để tạo một đối tượng browser sau đó tạo một page, thứ mà có thể hiểu tương tự như một tab khi chúng ta duyệt web bằng cách sử dụng phương thức newPage cuối cùng là dùng gotoscreenshot để đi đến trang whatsmyuseragent.org và chụp màn hình. Mã nguồn cụ thể cho file index.js có thể tham khảo như sau:

Sau khi thực thi đoạn mã trong file index.js, chúng ta thu được 3 file ảnh mới được tạo có tên lần lượt là example-chromium.png, example-firefox.png, example-webkit.png Ba file ảnh này chính là ảnh chụp màn hình được tạo khi phương thức screenshot được gọi.

example-chromiumexample-firefox.pngexample-webkit.png

Tổng kết

Mỗi công cụ trình duyệt đều có các quy tắc riêng để hiển thị HTML và CSS trên màn hình. Vậy nên các thư viện kiểm thử trên trình duyệt tự động có thể vô cùng hữu ích khi chúng ta muốn đảm bảo bố cục ứng dụng hoạt động đúng như những gì ta mong muốn trên tất cả các thiết bị và trình duyệt khác nhau mà playwright là một trong số đó.

Bài viết này giới thiệu sơ qua về thư viện playwright và cách thư viện này hoạt động, Để có thể tìm hiểu rõ hơn về thư viện này, cũng như tìm hiểu về điểm khác nhau giữa nó và puppeteer cũng như cách nó hoạt động với các hệ thống CI/CD, mọi người có thể đọc thêm tại đường dẫn bên dưới. Bài viết đến đây là hết, cảm ơn mọi người đã giành thời gian đọc,

Tài liệu tham khảo

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo