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ở chính thức, bạn có thể tìm thấy những đặc điểm sau: trang web 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 (Tôi sử dụng npm nhưng nếu bạn muốn sử dụng yarn hoặc pnpm, hãy đọc ). Ok, bây giờ quá trình cài đặt sẽ hỏi bạn một số câu hỏi: npm init playwright@latest tài liệu Đặt các bài kiểm tra đầu cuối của bạn ở đâu? Tùy chọn mặc định là nhưng tôi thích sử dụng thư mục . tests e2e Thêm quy trình làm việc trên GitHub Actions? Tùy chọn mặc định là ; trong bản trình diễn này, tôi để tùy chọn này thành false ngay bây giờ. false 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à và tôi đã sử dụng giá trị này true 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 để 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. playwright.config.ts 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 . Kết quả là một cái gì đó như thế này npx playwright test 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ở và thêm cấu hình sau playwright.config.ts const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... }; , bạn phải sử dụng cùng một cổng được cung cấp bởi vite. Lưu ý kiểm tra cổng của bạn bằng cách chạy lệnh npm run dev Và bây giờ là lúc cho bài kiểm tra đầu tiên của bạn. Mở tệp và đổi tên thành . Sau đó xóa sạch mọi thứ trong tệp và chỉ để lại dòng . e2e/example.spec.ts e2e/tit-tac-toe.spec.ts 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 . 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. test 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 và thì đấy, bài kiểm tra của bạn đã biến mất ✅ npm run e2e 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 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. npm run e2e:report 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 này 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
