1,981 lượt đọc

Cách viết bài kiểm tra với Khung kiểm tra Playwright

từ tác giả Luca Del Puppo6m2023/02/09

dài quá đọc không nổi

Trong bài đăng này, bạn sẽ học cách viết bài kiểm tra với Playwright, sử dụng các xác nhận, bộ định vị và một số thứ khác. Các xác nhận được sử dụng để kiểm tra kết quả của chúng tôi và với tư cách là nhà phát triển, chúng tôi sử dụng chúng để đảm bảo ứng dụng hoặc mã chạy như mong đợi. Bộ định vị là phần trung tâm của khả năng tự động chờ và thử lại của Playwright.

featured image - Cách viết bài kiểm tra với Khung kiểm tra Playwright

Bạn sẽ học được gì trong bài viết này?

Trong bài đăng này, bạn sẽ học cách viết bài kiểm tra với Playwright, sử dụng các xác nhận, bộ định vị, v.v.

Viết bài kiểm tra

Hãy bắt đầu với một ví dụ

 test('the first player must be the "X" player', async ({ page }) => { await page.goto("/"); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); });

Trong ví dụ này, tôi đã giới thiệu hai nội dung mới, getByRole và toContainText . getByRole là một phần của bộ định vị và toContainText là một phần của các xác nhận , và bây giờ chúng ta sẽ đi sâu vào những điều mới này.

Bộ định vị

Bộ định vị là phần trung tâm của khả năng tự động chờ và thử lại của Playwright. Bộ định vị đại diện cho một cách để tìm (các) phần tử trên trang bất kỳ lúc nào.

Sử dụng bộ định vị, bạn có thể truy xuất các phần tử trong dom của mình bằng các lệnh sau:

page.getByRole(role[, options]) để xác định vị trí theo thuộc tính trợ năng rõ ràng và tiềm ẩn.
page.getByText(text[, options]) để định vị theo nội dung văn bản.
page.getByLabel(text[, options]) để định vị điều khiển biểu mẫu theo văn bản của nhãn được liên kết.
page.getByPlaceholder(text[, options]) để xác định vị trí đầu vào theo trình giữ chỗ.
page.getByAltText(text[, options]) để định vị một phần tử, thường là hình ảnh, bằng văn bản thay thế của nó.
page.getByTitle(text[, options]) để xác định vị trí một phần tử theo thuộc tính tiêu đề của nó.
page.getByTestId(testId) để định vị một phần tử dựa trên thuộc tính data-testid của phần tử đó (có thể định cấu hình các thuộc tính khác).
page.locator(selector) để định vị phần tử dựa trên phần tử đã chọn (Css hoặc XPath)

Như bạn có thể thấy, sử dụng tám lệnh này, bạn có thể tìm thấy tất cả các thành phần trên các trang của mình.

Xem ví dụ trước, bạn có thể xem cách sử dụng phương thức getByRole để lấy đoạn văn trong DOM của mình và sau đó kiểm tra bất cứ thứ gì bạn muốn. Được rồi, tóm tắt nhanh về định vị là gì: định vị là các phương thức giúp bạn tìm kiếm các phần tử trong DOM.

khẳng định

Giống như bất kỳ khuôn khổ thử nghiệm nào được tôn trọng, Playwright có những khẳng định của nó. Các xác nhận được sử dụng để kiểm tra kết quả của chúng tôi và với tư cách là nhà phát triển, chúng tôi sử dụng chúng để đảm bảo ứng dụng hoặc mã chạy như mong đợi. Nhà viết kịch cho tính năng này sử dụng ẩn chức năng mong đợi do jest xây dựng. Vì vậy, nếu bạn đã quen với jest , bạn sẽ không gặp vấn đề gì với Playwright. Các xác nhận nổi tiếng nhất mà bạn có thể sử dụng là: toEqual , toContain , toMatch , toBe và nhiều xác nhận khác. Các xác nhận là những người bạn tốt nhất của bạn để kiểm tra xem ứng dụng của bạn có chạy như mong đợi hay không.

Như bạn có thể tưởng tượng, sự kết hợp của hai điều này cho phép bạn xây dựng nhiều bài kiểm tra để kiểm tra các hành vi của ứng dụng của bạn.

Vì vậy, nếu bạn quay lại ví dụ trước và nhập npm run e2e trong thiết bị đầu cuối của mình, bạn sẽ nhận được kết quả sau.

 npm run e2e > [email protected] e2e > playwright test Running 6 tests using 4 workers 6 passed (5s)

Ồ, nó hoạt động. 😀 Và bây giờ bạn đã biết cách sử dụng để tạo các bài kiểm tra của mình với Playwright.

Cô lập các bài kiểm tra của bạn

Nếu bạn đã quen thuộc với các khung kiểm tra, có thể bạn biết có một cách để nhóm danh sách kiểm tra. Để làm điều đó với Playwright, bạn phải sử dụng phương thức describe được hiển thị bởi đối tượng test , như trong ví dụ sau.

 import { expect, test } from "@playwright/test"; test.describe("On View", () => { test("show tic tac toe page", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Tic Tac Toe"); }); test('the first player must be the "X" player', async ({ page }) => { await page.goto("/"); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); }); });

Lợi ích của việc nhóm cũng có thể nhìn thấy trong báo cáo hiện đã xuất hiện như vậy.

Như bạn có thể thấy, nhãn On View xuất hiện trước mỗi bài kiểm tra.

Vì vậy, bây giờ, bạn có thể chia tệp thử nghiệm của mình thành các ngữ cảnh khác nhau nếu bạn có nhu cầu này.

móc

Một tính năng quan trọng khác nếu bạn thích làm việc với các khung thử nghiệm là móc nối. Móc cho phép bạn chạy một đoạn mã trước hoặc sau khi thực hiện kiểm tra. Thông thường chúng được gọi là: beforeEach beforeAll afterEach afterAll và bạn biết chúng được gọi là gì trong Playwright không? Chính xác theo cùng một cách 🚀

Vì vậy, để đưa ra một ví dụ, bạn có thể cấu trúc lại mã theo cách này để điều hướng trang chủ trước mỗi lần kiểm tra.

 import { expect, test } from "@playwright/test"; test.describe("On View", () => { test.beforeEach(async ({ page }) => { await page.goto("/"); }); test("show tic tac toe page", async ({ page }) => { await expect(page).toHaveTitle("Tic Tac Toe"); }); test('the first player must be the "X" player', async ({ page }) => { const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); }); });

Kết quả giống như trước đây, nhưng bây giờ bạn chỉ có lệnh điều hướng bên trong hook beforeEach . Những hook này rất tuyệt nếu bạn phải thử API hoặc nếu bạn phải làm điều gì đó trước hoặc sau khi kiểm tra.

Chơi với DOM của bạn

Sau tất cả những điều này, đã đến lúc viết bài kiểm tra cuối cùng của bài đăng này. Bây giờ bạn sẽ viết bài kiểm tra mô phỏng hành vi của người dùng trong ứng dụng. Thử nghiệm mô phỏng việc người chơi nhấp vào chữ "X" ở ô trên cùng bên trái và sau đó kiểm tra xem người chơi tiếp theo có phải là chữ "O" hay không.

 test.describe("Users behaviours", () => { test.beforeEach(async ({ page }) => { await page.goto("/"); }); test('the first player select the top-left square and then the next player is the "O"', async ({ page, }) => { const squares = await page.getByRole("button"); const topLeftSquare = squares.first(); await topLeftSquare.click(); const topLeftSquareImg = await topLeftSquare.getByRole("img"); await expect(topLeftSquareImg).toHaveAttribute("title", "X"); await expect(topLeftSquareImg).toHaveAttribute("src", /x.png/i); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("O"); }); });

Ví dụ này bắt đầu trở nên phức tạp hơn. Như bạn có thể nhận thấy, có một số điều mới. Hãy bắt đầu với cái đầu tiên, phương pháp first . Trong trường hợp này, getByRole trả về nhiều phần tử và chỉ phần tử đầu tiên được yêu cầu trong thử nghiệm. Sử dụng phương thức first , bạn có thể lấy phần tử đầu tiên trong danh sách. Sau đó, khi bạn có hình vuông đầu tiên trên bảng, bạn có thể mô phỏng việc người dùng nhấp vào phần tử này. Sử dụng phương pháp click , bạn có thể làm điều đó. Vắt chanh dễ dàng. Nhưng bây giờ mọi thứ bắt đầu trở nên "phức tạp". Như bạn có thể thấy, bây giờ bạn có thể sử dụng getByRole từ phần tử hình vuông và phương thức này sẽ cố gắng tìm một hình ảnh con của phần tử này. Sau đó, sử dụng xác nhận toHaveAttribute , bạn kiểm tra xem hình ảnh này có tiêu đề với giá trị "X" hay không và liệu nguồn có chứa giá trị "x.png" hay không. Bước cuối cùng giống như trong bài viết trước, nơi bạn lấy đoạn văn và kiểm tra xem người chơi tiếp theo có phải là người chơi "O" hay không. Ok, nó không phải khoa học tên lửa nhưng phức tạp hơn một chút so với ví dụ trước.