Cách tạo mã kiểm tra với Playwright

Chào bạn,

Hôm nay bạn sẽ học cách tạo mã cho các bài kiểm tra của mình.

Trước hết, bạn phải chạy ứng dụng, vì vậy hãy nhập terminal npm run dev và bạn sẽ khởi động và chạy ứng dụng của mình tại địa chỉ http://localhost:5173 .

Bây giờ bạn phải chạy trình tạo mã Playwright. Để làm điều đó, bạn phải mở một tab khác trong thiết bị đầu cuối của mình và nhập npx playwright codegen . Lệnh này sẽ mở một trình duyệt mới và trình kiểm tra Playwright.

Bây giờ, trình duyệt hiển thị một tab trống và trình kiểm tra Playwright đang ở trên một trang mới, sẵn sàng lắng nghe những gì bạn sẽ làm trong trình duyệt. Nếu bạn vào thanh địa chỉ của trình duyệt và nhập http://localhost:5173, bạn có thể nhận thấy rằng có điều gì đó đã thay đổi trong Trình kiểm tra nhà viết kịch. Người kiểm tra ghi nhận sự thay đổi trang và thêm bước này vào nội dung kiểm tra.

Bây giờ, bạn có thể nhấp vào một ô vuông và mô phỏng trò chơi giữa hai người chơi, bạn có thể nhận thấy rằng người kiểm tra ghi lại tất cả các bước này và tạo nội dung bài kiểm tra cho bạn. Kết quả của những hành động này là

 test('test', async ({ page }) => { await page.goto('http://localhost:5173/'); await page.locator('._Square_pba4r_1').first().click(); await page.locator('button:nth-child(5)').click(); await page.locator('button:nth-child(6)').click(); await page.locator('button:nth-child(7)').click(); await page.locator('button:nth-child(3)').click(); await page.locator('button:nth-child(9)').click(); await page.locator('button:nth-child(2)').click(); });

Như bạn có thể thấy, mã được tạo ra là tốt nhưng không hoàn hảo, vì vậy vui lòng sử dụng công cụ này với tư thế trên vai và kiểm tra kết quả mỗi lần để đảm bảo giá trị của bài kiểm tra của bạn.

Bây giờ là lúc sao chép và dán mã vào tệp thử nghiệm của chúng tôi và cải thiện nội dung của nó.

Hãy bắt đầu bằng cách thay đổi tên thử nghiệm từ test thành should win the player "X" và thay đổi giá trị goto từ http://localhost:5173/ thành / vì gốc cơ sở của chúng tôi tương ứng với trang chủ.

Sau đó, tái cấu trúc lần nhấp đầu tiên có thể là một cách tái cấu trúc tốt để cải thiện thử nghiệm, vì vậy bạn phải thay đổi dòng từ await page.locator('._Square_pba4r_1').first().click(); để await page.locator("button:nth-child(1)").click(); và cuối cùng nhưng không kém phần quan trọng, thêm khẳng định. Trong trường hợp này, nếu tên bài kiểm tra should win the player "X" thì khẳng định tốt nhất là như thế này

 const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X");

Vì vậy, mã cố gắng lấy đoạn văn có văn bản chiến thắng và kiểm tra xem giá trị có chứa giá trị X hay không. Kết quả cuối cùng là thế này

 test('should win the player "X"', async ({ page }) => { await page.goto("/"); await page.locator("button:nth-child(1)").click(); await page.locator("button:nth-child(5)").click(); await page.locator("button:nth-child(6)").click(); await page.locator("button:nth-child(7)").click(); await page.locator("button:nth-child(3)").click(); await page.locator("button:nth-child(9)").click(); await page.locator("button:nth-child(2)").click(); const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); });

Bây giờ, bạn có thể chạy thử nghiệm và kiểm tra kết quả sẽ có màu xanh lục.

Ok, tôi nghĩ đó là tất cả từ việc tạo mã.

Trong bài viết này, bạn đã học cách ghi lại các bước của mình và chuyển đổi chúng thành mã cho các bài kiểm tra của mình. Vui lòng, như tôi đã nói trước đây, hãy sử dụng công cụ này một cách có trách nhiệm và kiểm tra mã được tạo mỗi lần.

Vậy đó, mọi người.

Hẹn gặp lại 👋

ps bạn có thể tìm thấy kết quả của bài viết này ở đây