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 và bạn sẽ khởi động và chạy ứng dụng của mình tại địa chỉ . npm run dev 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 . Lệnh này sẽ mở một trình duyệt mới và trình kiểm tra Playwright. npx playwright codegen 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 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. http://localhost:5173, 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ừ thành và thay đổi giá trị goto từ thành vì gốc cơ sở của chúng tôi tương ứng với trang chủ. test should win the player "X" http://localhost:5173/ / 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ừ để 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 thì khẳng định tốt nhất là như thế này await page.locator('._Square_pba4r_1').first().click(); await page.locator("button:nth-child(1)").click(); should win the player "X" 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ị hay không. Kết quả cuối cùng là thế này X 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
