Skip to main content

1. Giới thiệu

I. Giới thiệu​

E2E Testing là một loại kiểm thử phần mềm, trong đó hành vi của một ứng dụng được kiểm tra từ đầu đến cuối theo kịch bản thực tế. Mục tiêu của E2E Testing là đảm bảo rằng ứng dụng hoạt động đúng đắn từ góc nhìn của người dùng cuối.

Playwright là một thư viện mã nguồn mở được phát triển bởi Microsoft, cung cấp một API đơn giản để tự động hóa các trình duyệt web như Chromium, Firefox và WebKit. Playwright cung cấp một số tính năng nổi bật như:

  • Tự động hóa các các hành động trên trình duyệt web như Chromium, Firefox và WebKit.

II. Cài đặt​

1.1. Cài đặt NodeJS​

Playwright yêu cầu NodeJS phiên bản 10 trở lên. Nếu bạn chưa cài đặt NodeJS, bạn có thể tải phiên bản LTS mới nhất tại đây.

1.2. Cài git scm​

https://www.git-scm.com/downloads

2. Cài đặt Visual Studio Code​

Để viết mã, bạn có thể sử dụng bất kỳ trình soạn thảo mã nào. Tuy nhiên, trong bài viết này, chúng ta sẽ sử dụng Visual Studio Code. Bạn có thể tải phiên bản mới nhất tại đây.

Bên tay trái, click vào biểu tượng Extensions để cài Playwright for VS Code của Microsoft.

3. Tạo dự án​

  1. Tạo 1 folder làm việc, ví dụ: playwright-e2e-testing hoặc đặt tên theo ý thích.

  2. Mở VS Code, chọn File -> Open Folder, chọn folder vừa tạo.

  3. Tại VS Code, gõ tổ hợp phím: Ctrl + Shift + P hoặc tại Menu -> View -> Command Palette: Gõ Install Playwright

  4. Sau khi khởi tạo xong, mở terminal (bằng cách: Menu -> Terminal -> New Terminal) và gõ lệnh:

    npx playwright test tests/example.spec.ts

  5. Để xem báo cáo, tại terminal, gõ lệnh:

    npx playwright show-report

  6. Vào trình duyệt, gõ địa chỉ: http://localhost:9323 để xem báo cáo.

III. Thực hành trải nghiệm​

Viết test cases để kiểm thử đăng nhập​

Thông tin chung​

  • Vào https://aptech-tester.web.app/login
  • Gõ username: admin
  • Gõ password: Tester@123
  • Nếu đăng nhập thành công, sẽ chuyển sang trang https://aptech-tester.web.app/home
  • Nếu đăng nhập không thành công, sẽ ở lại trang https://aptech-tester.web.app/login

Test cases​

  1. Yêu cầu 1: Đăng nhập thành công
  2. Yêu cầu 2: Đăng nhập không thành công

Hướng dẫn​

  • Tại VS Code, tạo 1 file mới có tên là login.spec.ts trong thư mục tests.
  • Gõ đoạn mã sau vào file login.spec.ts:
import { test, expect } from '@playwright/test';
// Trước khi chạy mỗi test case
test.beforeEach(async ({ page }) => {
  await page.goto('https://aptech-tester.web.app/login');
});
// Testcase 1: Đăng nhập thành công với tài khoản đúng thông tin
test('TC1 - Login: Thành công ', async ({ page }) => {
  // Điền tên đăng nhập
  await page.locator('#login-form_username').fill('admin');

  // Điền mật khẩu
  await page.locator('#login-form_password').fill('Tester@123');

  // Click vào nút Đăng nhập
  await page.locator('button:has-text("Đăng nhập")').click();

  // Kiểm tra URL sau khi đăng nhập thành công
  await expect(page).toHaveURL('https://aptech-tester.web.app/home');
});
// Testcase 2: Đăng nhập không thành công với tài khoản sai thông tin
test('TC1 - Login: Không thành công', async ({ page }) => {
  // Điền tên đăng nhập
  await page.locator('#login-form_username').fill('wrong-username');

  // Điền mật khẩu
  await page.locator('#login-form_password').fill('Tester@123');

  // Click vào nút Đăng nhập
  await page.locator('button:has-text("Đăng nhập")').click();

  // Kiểm tra URL sau khi đăng nhập không thành công
  await expect(page).toHaveURL('https://aptech-tester.web.app/login');
});

  • Tại terminal, gõ lệnh sau để chạy test case:

    npx playwright test tests/login.spec.ts

  • Hoặc

    npx playwright test tests/login.spec.ts --ui

    để chạy test case với giao diện trực quan.

Để chạy từng dòng lệnh, bạn có thể sử dụng chế độ debug của VS Code​

  • Tạo 1 breakpoint tại dòng lệnh muốn debug, bằng cách click vào vùng trước (có nút chấm tròn màu đỏ) số dòng lệnh bên trái.
  • Tại VS Code, bên tay trái, chọn biểu tượng Testing
  • Tại Login test cases, chọn nút 'Debug Test' (có biểu tượng hình tam giác + hình con bọ)

Viết test cases kiểm tra required fields​

Test cases​

  • Yêu cầu 1: Không nhập username, nhập password hợp lệ.
  • Yêu cầu 2: Không nhập password, nhập username hợp lệ.
  • Yêu cầu 3: Không nhập username, không nhập password.

Hướng dẫn​

  • Tạo 1 file mới có tên là required-fields.spec.ts trong thư mục tests.
  • Gõ đoạn mã sau vào file required-fields.spec.ts:
import { test, expect } from '@playwright/test';
// Trước khi chạy mỗi test case
test.beforeEach(async ({ page }) => {
  await page.goto('https://aptech-tester.web.app/login');
});
// Testcase 1: Không nhập username, nhập password hợp lệ.
test('TC1 - Login: Không nhập username, nhập password hợp lệ', async ({ page }) => {
  // Điền tên đăng nhập
  await page.locator('#login-form_username').fill('');

  // Điền mật khẩu
  await page.locator('#login-form_password').fill('Tester@123');

  // Click vào nút Đăng nhập
  await page.locator('button:has-text("Đăng nhập")').click();

  await page.waitForTimeout(500);

  const actualResult = await page.locator('div.ant-form-item-explain-error');
  await expect(actualResult).toHaveText('Tên đăng nhập không được để trống');
});
// Testcase 2: Không nhập password, nhập username hợp lệ.
test('TC2 - Login: Không nhập password, nhập username hợp lệ', async ({ page }) => {
  // Điền tên đăng nhập
  await page.locator('#login-form_username').fill('admin');

  // Điền mật khẩu
  await page.locator('#login-form_password').fill('');

  // Click vào nút Đăng nhập
  await page.locator('button:has-text("Đăng nhập")').click();

  await page.waitForTimeout(500);

  const actualResult = await page.locator('div.ant-form-item-explain-error');
  await expect(actualResult).toHaveText('Mật khẩu không được để trống');
});
// Testcase 3: Không nhập username, không nhập password.
test('TC3 - Login: Không nhập username, không nhập password', async ({ page }) => {
  // Điền tên đăng nhập
  await page.locator('#login-form_username').fill('');

  // Điền mật khẩu
  await page.locator('#login-form_password').fill('');

  // Click vào nút Đăng nhập
  await page.locator('button:has-text("Đăng nhập")').click();

  await page.waitForTimeout(500);

  const actualResult1 = await page.locator('div.ant-form-item-explain-error').first();
  await expect(actualResult1).toHaveText('Tên đăng nhập không được để trống');

  const actualResult2 = await page.locator('div.ant-form-item-explain-error').last();
  await expect(actualResult2).toHaveText('Mật khẩu không được để trống');
});