Này, Hôm nay tôi muốn nói về Fixtures, một người bạn quan trọng nếu bạn sắp làm việc với Playwright và bạn muốn chia sẻ dữ liệu giữa các thử nghiệm của mình hoặc tạo các bản thực thi tùy chỉnh. Hãy bắt đầu với một ví dụ đơn giản. 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"); }); Hãy tưởng tượng bạn muốn trích xuất tất cả các chỉ mục của các nút trong một mảng để sao chép bài kiểm tra này và giảm tất cả các lệnh nhấp chuột này để có một bài kiểm tra ngắn hơn. Vì vậy, công cụ tái cấu trúc đầu tiên trước khi giới thiệu tính năng cố định có thể là cái này. test('should win the player "X"', async ({ page }) => { const playerXWinMoves = [1, 5, 6, 7, 3, 9, 2]; for (const move of playerXWinMoves) { await page.locator(`button:nth-child(${move})`).click(); } const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); }); Như bạn có thể nhận thấy, tất cả các bước để tái tạo nước đi của người chơi được chứa trong các biến . Bài kiểm tra ngắn gọn, nhưng quan trọng nhất, tất cả các hành động đều nằm trong một biến duy nhất. Bây giờ là lúc để giới thiệu đồ đạc. playerXWinMoves Trước khi tiếp tục, hãy để tôi dành một số từ để mô tả đồ đạc là gì. đồ đạc là gì Đồ gá thử nghiệm được sử dụng để thiết lập môi trường cho từng thử nghiệm, cung cấp cho thử nghiệm mọi thứ nó cần và không có gì khác. Đồ đạc thử nghiệm được cách ly giữa các thử nghiệm. Với đồ đạc, bạn có thể nhóm các bài kiểm tra dựa trên ý nghĩa của chúng thay vì thiết lập tiêu chuẩn của chúng. Sau định nghĩa này, bạn có thể nghĩ rằng đồ đạc có thể được thay thế bằng móc trước/sau, nhưng đồ đạc có một số lợi thế so với những móc này: Lịch thi thiết lập và chia nhỏ ở cùng một nơi, giúp viết dễ dàng hơn. đấu gói gọn Các vật cố định có giữa các tệp thử nghiệm - bạn có thể xác định chúng một lần và sử dụng chúng trong tất cả các thử nghiệm của mình. Đó là cách hoạt động của công cụ cố định tích hợp sẵn của Playwright. thể tái sử dụng page Các thiết bị cố định được - bạn có thể xác định bao nhiêu thiết bị cố định tùy thích và Playwright Test sẽ chỉ thiết lập những thiết bị cần thiết cho bài kiểm tra của bạn và không thiết lập thiết bị nào khác. cung cấp theo yêu cầu Các thiết bị cố định có - chúng có thể phụ thuộc vào nhau để cung cấp các hành vi phức tạp. thể kết hợp được Đồ đạc là . Các thử nghiệm có thể sử dụng bất kỳ tổ hợp đồ đạc nào để điều chỉnh môi trường chính xác mà chúng cần mà không ảnh hưởng đến các thử nghiệm khác. linh hoạt Đồ đạc đơn giản hóa . Bạn không còn cần phải gói các bài kiểm tra trong thiết lập môi trường và thay vào đó, bạn có thể tự do nhóm các bài kiểm tra của mình theo ý nghĩa của chúng. nhóm describe Hoàn hảo, sau phần lý thuyết nhàm chán này, đã đến lúc bạn phải nhúng tay vào các đồ đạc trong Playwright. Để bắt đầu giải thích, tôi muốn bắt đầu với kết quả cuối cùng. import { expect, test as base } from "@playwright/test"; type TestFixtures = { playerXWinMoves: [number, number, number, number, number, number, number]; }; const test = base.extend<TestFixtures>({ playerXWinMoves: async ({}, use) => { await use([1, 5, 6, 7, 3, 9, 2]); }, }); test('should win the player "X"', async ({ page, playerXWinMoves }) => { for (const move of playerXWinMoves) { await page.locator(`button:nth-child(${move})`).click(); } const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); }); Như bạn có thể thấy, để xây dựng vật cố định của chúng tôi, bạn phải mở rộng đối tượng thử nghiệm do Playwright đưa ra. Bên trong chức năng này, bạn có thể tạo một đối tượng đại diện cho đồ đạc của mình. Trong trường hợp này, tôi đã thêm thuộc tính để chia sẻ các bước tạo lại chiến thắng cho Player X. Ngoài ra, chỉ vì tôi thích làm việc với Bản mô tả, tôi đã thêm loại để mô tả đồ đạc của mình. Cần lưu ý rằng bên trong thiết bị cố định, bạn phải sử dụng phương thức để đặt giá trị cho thiết bị cố định của mình. playerXWinMoves TestFixtures use Ok, tiếp tục, và chúng ta hãy xem bài kiểm tra ngay bây giờ. Bạn có thể nhận thấy rằng bạn có thể nhận được vật cố định trực tiếp từ đối tượng được chuyển đến bài kiểm tra của bạn. Và bây giờ, nếu bạn xóa biến trước đó và sử dụng biến mới khỏi tham số, bạn sẽ tạo bài kiểm tra đầu tiên của mình với Playwright bằng cách sử dụng vật cố định. playerXWinMoves Tuyệt vời, tôi hy vọng bạn có thể hiểu được sức mạnh đáng kinh ngạc của tính năng này và cách tính năng này có thể giúp bạn làm cho bài kiểm tra của mình dễ đọc hơn hoặc tập hợp một số dữ liệu hữu ích trong nhiều bài kiểm tra. Nhưng trước khi kết thúc, hãy để tôi để lại cho bạn một chút nữa. Với đồ đạc, bạn cũng có thể ghi đè lên một đối tượng được Playwright hiển thị trực tiếp. Chẳng hạn, bạn có thể ghi đè đối tượng trang và thay vì tạo một hook để điều hướng đến trang chủ, bạn có thể ghi đè trang và thêm bước này vào lịch thi đấu, vì vậy mọi thử nghiệm, trước khi thực hiện, sẽ chạy các bước để điều hướng đến trang chủ. beforeEach Và làm thế nào chúng ta có thể làm điều đó? Đơn giản theo cách này. const test = base.extend<TestFixtures>({ page: async ({ baseURL, page }, use) => { baseURL && (await page.goto(baseURL)); await use(page); }, }); Làm điều đó, bây giờ mỗi thử nghiệm, khi nó bắt đầu thực thi, sẽ chuyển đến baseURL và sau đó chạy tất cả mã. Đáng kinh ngạc không? Bây giờ, bạn có thể xóa móc trong tệp thử nghiệm và chạy lại các thử nghiệm của mình để kiểm tra kết quả. beforeEach Ok, đó là tất cả dân gian! Hôm nay, bạn đã học cách hoạt động của đồ đạc Playwright và cách xây dựng đồ đạc. Tôi hy vọng bạn thích bài đăng này và nếu bạn có bất kỳ nghi ngờ nào, đừng ngần ngại liên hệ với tôi; Tôi sẽ rất vui khi giúp bạn. hẹn sớm gặp lại Tạm biệt 👋 ps bạn có thể kiểm tra mã của bài viết này tại đây
