Nhảy tới nội dung

Hướng dẫn viết auto test cho trang đăng nhập (login) bằng Playwright

· 3 phút để đọc
Phạm Quyết Thắng

Playwright là một framework tự động hóa web mới của Microsoft được phát triển dựa trên Chromium. Playwright cung cấp một bộ API mạnh mẽ và linh hoạt để kiểm tra các ứng dụng web, bao gồm cả các ứng dụng web động và phức tạp.

Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu cách viết auto test cho một trang đăng nhập bằng Playwright.

Bước 1: Cài đặt Playwright

Bạn cần cài đặt nodejs trước khi cài đặt Playwright, nếu bạn chưa cài nodejs, bạn có thể tham khảo bài viết Hướng dẫn cài đặt Node.js thông qua NVM trên Windows, Linux và Mac

Để cài đặt Playwright, bạn có thể sử dụng lệnh sau:

npm install -g playwright

Bước 2: Tạo một dự án Playwright

Sau khi cài đặt Playwright, bạn có thể tạo một dự án Playwright mới bằng lệnh sau:

playwright init

Lệnh này sẽ tạo ra một dự án mới với cấu trúc thư mục sau:

my-project
├── playwright.config.js
└── tests
└── basic.spec.ts

Bước 3: Viết test case

Test case là một tập hợp các bước cần thực hiện để kiểm tra một chức năng cụ thể của ứng dụng web. Trong bài viết này, chúng ta sẽ viết hai test case cho trang đăng nhập:

  • Test case 1: Kiểm tra trường hợp đăng nhập thành công.
  • Test case 2: Kiểm tra trường hợp đăng nhập thất bại.

Test case 1: Kiểm tra trường hợp đăng nhập thành công

import { chromium } from "playwright";

describe("Login", () => {
it("should be able to login successfully", async () => {
// Mở trang đăng nhập
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto("https://example.com/login");

// Nhập username và password
await page.type("#username", "admin");
await page.type("#password", "123456");

// Nhấp vào nút đăng nhập
await page.click("#login-button");

// Kiểm tra xem người dùng đã đăng nhập thành công hay chưa
expect(page.url()).toBe("https://example.com/");
});
});

Test case 2: Kiểm tra trường hợp đăng nhập thất bại

import { chromium } from "playwright";

describe("Login", () => {
it("should not be able to login with invalid credentials", async () => {
// Mở trang đăng nhập
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto("https://example.com/login");

// Nhập username và password không hợp lệ
await page.type("#username", "invalid-username");
await page.type("#password", "invalid-password");

// Nhấp vào nút đăng nhập
await page.click("#login-button");

// Kiểm tra xem người dùng đã đăng nhập thành công hay chưa
expect(page.url()).toBe("https://example.com/login");
});
});

Bước 4: Chạy test

Để chạy test, bạn có thể sử dụng lệnh sau:

playwright test

Lệnh này sẽ chạy tất cả các test case trong thư mục tests.

Kết quả

Nếu test case chạy thành công, bạn sẽ thấy kết quả như sau:

PASS ./tests/basic.spec.ts
Login should be able to login successfully (100ms)
Login should not be able to login with invalid credentials (100ms)

Nếu test case chạy thất bại, bạn sẽ thấy kết quả như sau:

FAIL ./tests/basic.spec.ts
Login should be able to login successfully (100ms)
Expected url to be "https://example.com/", but was "https://example.com/login"

Lời kết

Trong bài viết này, chúng ta đã cùng nhau tìm hiểu cách viết auto test cho một trang đăng nhập bằng Playwright. Hy vọng bài viết này sẽ giúp bạn có được những kiến thức cơ bản để bắt đầu viết auto test cho