Giới thiệu về Khung kiểm tra nhà viết kịch

Trong giai đoạn vừa qua, trong hệ sinh thái frontend, một công cụ e2e mới đã xuất hiện và nó bắt đầu trở nên nổi tiếng; tên nó là Nhà viết kịch. Trong loạt bài ngắn này, tôi muốn cung cấp cho bạn một số thông tin về vấn đề này và các mẹo về cách bắt đầu.

Nó là gì?

Hãy bắt đầu với Playwright là gì. Playwright là một khung thử nghiệm để xử lý thử nghiệm e2e. Với Playwright, chúng tôi có thể viết các bài kiểm tra e2e và chạy chúng trên các trình duyệt khác nhau, như Chrome, Firefox và Webkit. Chúng tôi có thể chạy thử nghiệm trên nhiều nền tảng như Windows, Mac, Linux hoặc CI và chúng tôi có thể viết thử nghiệm bằng Typescript, Javascript, Java, Phyton hoặc .Net.

Nếu bạn mở trang web chính thức, bạn có thể tìm thấy những đặc điểm sau:

• Mọi trình duyệt Mọi nền tảng Một API
• Khả năng phục hồi Không có thử nghiệm dễ vỡ
• Không đánh đổi Không giới hạn
• Cách ly hoàn toàn Khớp lệnh nhanh
• Công cụ mạnh mẽ

Theo tôi, công cụ này phản ánh tất cả những đặc điểm này.

ứng dụng TicTacToe

Tôi muốn sử dụng ứng dụng TicTacToe được xây dựng bằng vite + Reac trong loạt bài này. Và bạn có thể tìm thấy nó ở đây .

Như bạn có thể thấy, ứng dụng này rất đơn giản, nhưng với nó, chúng ta có thể bắt đầu chuyển sang những bước đầu tiên với Playwright.

Cài đặt nhà viết kịch

Bước đầu tiên để sử dụng Playwright là cài đặt nó, thật dễ dàng. Mở thiết bị đầu cuối của bạn và nhập npm init playwright@latest (Tôi sử dụng npm nhưng nếu bạn muốn sử dụng yarn hoặc pnpm, hãy đọc tài liệu ). Ok, bây giờ quá trình cài đặt sẽ hỏi bạn một số câu hỏi:

1. Đặt các bài kiểm tra đầu cuối của bạn ở đâu? Tùy chọn mặc định là tests nhưng tôi thích sử dụng thư mục e2e .
2. Thêm quy trình làm việc trên GitHub Actions? Tùy chọn mặc định là false ; trong bản trình diễn này, tôi để tùy chọn này thành false ngay bây giờ.
3. Cài đặt trình duyệt Playwright (có thể được thực hiện thủ công thông qua 'cài đặt nhà viết kịch npx')? Tùy chọn mặc định là true và tôi đã sử dụng giá trị này

4. 
   

và bây giờ bạn phải đợi cho đến khi quá trình cài đặt kết thúc. Khi quá trình cài đặt hoàn tất... xin chúc mừng, bạn đã sẵn sàng nhúng tay vào Playwright!

Cái nhìn đầu tiên

Quá trình cài đặt đã tạo trong kho lưu trữ của bạn 3 tệp mới:

• nhà viết kịch.config.ts

• e2e/example.spec.ts

• kiểm tra-ví dụ/demo-todo-app.spec.ts

  
  

Hãy bắt đầu với cái cuối cùng, cái dễ nhất 😊 Tệp này chứa danh sách các ví dụ về cách bạn có thể viết bài kiểm tra với Playwright. Nó sử dụng một ứng dụng do nhóm viết kịch tạo ra (một ứng dụng công việc đơn giản) và minh họa cách bạn có thể tương tác với trang của mình.

Tiếp tục với cái thứ hai. Tệp này là một ví dụ nhanh về một số bài kiểm tra trên trang web của nhà viết kịch, nhưng nó chỉ ở đây như một trình giữ chỗ cho các bài kiểm tra của bạn.

Và bây giờ, điều đầu tiên, quan trọng nhất. Nhà viết kịch sử dụng tệp playwright.config.ts để hiểu cấu hình của nó. Bên trong nó, bạn có thể tìm thấy các cấu hình về thư mục thử nghiệm, thời gian chờ được sử dụng bởi chức năng mong đợi, cấu hình cho các trình duyệt được Playwright sử dụng để chạy thử nghiệm, v.v.

Chạy thử nghiệm đầu tiên của bạn

Đã đến lúc xem Playwright đang hoạt động, vì vậy hãy mở lại thiết bị đầu cuối của bạn và chạy lệnh sau npx playwright test . Kết quả là một cái gì đó như thế này

Nhà viết kịch trong báo cáo này cho bạn thấy kết quả thực hiện của nó và bạn có thể kiểm tra xem mọi thứ đã ổn chưa. Báo cáo hiển thị kết quả cho từng trình duyệt được chỉ định trong cấu hình, trong trường hợp này là: Chromium, Firefox và Webkit.

Viết bài kiểm tra đầu tiên của bạn

Được rồi, nhưng bây giờ là lúc để bạn viết bài kiểm tra đầu tiên của mình với Playwright. Trước khi thực hiện việc này, bạn phải định cấu hình Playwright để có thể chạy ứng dụng của mình trước khi bắt đầu thử nghiệm. Để làm điều đó, bạn phải mở playwright.config.ts và thêm cấu hình sau

 const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... };

Lưu ý kiểm tra cổng của bạn bằng cách chạy lệnh npm run dev , bạn phải sử dụng cùng một cổng được cung cấp bởi vite.

Và bây giờ là lúc cho bài kiểm tra đầu tiên của bạn. Mở tệp e2e/example.spec.ts và đổi tên thành e2e/tit-tac-toe.spec.ts . Sau đó xóa sạch mọi thứ trong tệp và chỉ để lại dòng import { expect, test } from "@playwright/test"; .

Bây giờ hãy thêm bài kiểm tra đầu tiên của bạn

 test("show tic tac toe page", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Tic Tac Toe"); });

ok, chúng ta cùng nhau xem thử nghiệm này. Trước hết, bạn có thể cho Nhà viết kịch biết rằng đó là một bài kiểm tra bằng cách sử dụng chức năng test . Như trong mọi khuôn khổ thử nghiệm, tham số đầu tiên của chức năng thử nghiệm là tên của thử nghiệm. Thông số thứ hai là chức năng kiểm tra ứng dụng của chúng tôi. Sử dụng Playwright, hàm này luôn là hàm không đồng bộ vì các thử nghiệm của bạn trong những trường hợp này luôn không đồng bộ. Lệnh đầu tiên trong ví dụ này là lệnh nói với Playwright để điều hướng đến trang chủ của ứng dụng của chúng tôi. Như bạn có thể thấy, lệnh này đã không đồng bộ. Bây giờ, nếu bài kiểm tra có thể điều hướng đến trang này, bạn muốn kiểm tra xem tiêu đề của trang có phải là "Tic Tac Toe" hay không. Vâng, đó là điều cơ bản, nhưng là một ví dụ tuyệt vời về việc di chuyển bước đầu tiên của bạn.

Bây giờ, đã đến lúc kiểm tra xem thử nghiệm có chạy trong Playwright hay không, nhưng trước khi làm điều đó, bạn có thể đơn giản hóa việc tương tác với Playwright bằng cách thêm một tập lệnh mới trong package.json, như được hiển thị ở đây

 .... "scripts": { ... "e2e": "playwright test" },

Bây giờ trong thiết bị đầu cuối của bạn, bạn có thể nhập npm run e2e và thì đấy, bài kiểm tra của bạn đã biến mất ✅

Thêm một tập lệnh khác vào pack.json của bạn, bạn có thể mở kết quả báo cáo trong trình duyệt của mình

 .... "scripts": { ... "e2e": "playwright test", "e2e:report": "playwright show-report" },

Và bây giờ, nếu bạn chạy lệnh npm run e2e:report trong trình duyệt của mình, bạn có thể thấy kết quả của lần kiểm tra đầu tiên.

Ok, tôi nghĩ đó là tất cả cho bây giờ. Trong bài đăng này, bạn đã học được:

• Cách cài đặt Nhà viết kịch
• Làm thế nào để chạy thử nghiệm của bạn
• Cách viết bài kiểm tra đầu tiên của bạn với Playwright

Trong bài tiếp theo, chúng ta sẽ tiếp tục cuộc hành trình của mình trong thế giới Playwright, nhưng bây giờ, đó là tất cả! Hẹn gặp lại các bạn.

Tạm biệt

ps Bạn có thể tìm thấy kết quả của bài đăng này tại liên kết này