Kiểm thử đăng nhập bằng Playwright với AI agent

Một test đăng nhập cần xác nhận trạng thái sau thao tác, không chỉ việc nút đã được bấm. Bài này phát triển từ hướng dẫn Playwright tổng quát thành hai ca cụ thể: đăng nhập đúng và từ chối thông tin sai.

A login test must verify the resulting state, not just that a button was clicked. This guide extends the general Playwright workflow into two concrete cases: successful login and rejected credentials.

1. Chuẩn bị trước khi yêu cầu agent viết test

2. Giữ bằng chứng khi thất bại

Ghép các tùy chọn phù hợp vào playwright.config.ts hiện có. Ví dụ dùng một worker và không retry để việc điều tra ban đầu dễ theo dõi.

Merge suitable options into the existing playwright.config.ts. One worker and no retries make the initial investigation easier to follow.

import {defineConfig} from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  workers: 1,
  retries: 0,
  reporter: [['list'], ['html', {open: 'never'}]],
  use: {
    baseURL: 'http://127.0.0.1:3000',
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure',
  },
});

Thêm script gọi binary đã cài trong package.json; giữ các script khác của dự án:

Add scripts invoking the installed binary in package.json, preserving other project scripts:

{
  "scripts": {
    "test:e2e": "playwright test",
    "test:report": "playwright show-report",
    "test:trace": "playwright show-trace"
  }
}

3. Kiểm tra thành công và từ chối đăng nhập

Tạo tests/e2e/login.spec.ts trong dự án thử. Ca thành công kiểm tra cả điều hướng và nội dung sau reload. Ca thất bại dùng email minh họa phải được xác nhận là không tồn tại trong fixture, tránh gây khóa tài khoản người dùng.

Create tests/e2e/login.spec.ts in the test project. The success case checks navigation and content after reload. Confirm that the illustrative invalid email is absent from the fixture so the negative case cannot lock a real account.

import {test, expect} from '@playwright/test';

test('valid credentials create a usable session', async ({page}) => {
  const email = process.env.E2E_EMAIL;
  const password = process.env.E2E_PASSWORD;
  if (!email || !password) {
    throw new Error('Configure dedicated E2E_EMAIL and E2E_PASSWORD');
  }

  await page.goto('/login');
  await page.getByLabel('Email', {exact: true}).fill(email);
  await page.getByLabel('Password', {exact: true}).fill(password);
  await page.getByRole('button', {name: 'Sign in', exact: true}).click();
  await expect(page).toHaveURL(/\/dashboard(?:[/?#]|$)/);
  await expect(page.getByRole('heading', {name: 'Dashboard', exact: true}))
    .toBeVisible();
  await page.reload();
  await expect(page.getByRole('heading', {name: 'Dashboard', exact: true}))
    .toBeVisible();
});

test('invalid credentials remain unauthenticated', async ({page}) => {
  await page.goto('/login');
  await page.getByLabel('Email', {exact: true}).fill('not-a-user@example.test');
  await page.getByLabel('Password', {exact: true}).fill('deliberately-invalid');
  await page.getByRole('button', {name: 'Sign in', exact: true}).click();
  await expect(page.getByRole('alert'))
    .toContainText('Invalid email or password');
  await expect(page).toHaveURL(/\/login(?:[/?#]|$)/);
});

Mỗi test bắt đầu với browser context riêng. Nếu cấu hình chung đang nạp storageState đã đăng nhập, cần một project test sạch cho các ca này. Không dùng timeout cố định để chờ đăng nhập; assertion của Playwright sẽ chờ điều kiện mong đợi trong giới hạn cấu hình.

Each test starts with a separate browser context. If shared configuration loads an authenticated storageState, use a clean test project for these cases. Avoid fixed sleeps; Playwright assertions wait for the expected condition within configured limits.

4. Chạy ca nhỏ và đọc đúng loại lỗi

npm run test:e2e -- tests/e2e/login.spec.ts
npm run test:report

5. Mở rộng sau khi hai ca cơ bản ổn định

Theo yêu cầu sản phẩm, bổ sung logout, truy cập trang được bảo vệ khi chưa đăng nhập, session hết hạn và điều hướng bàn phím. SSO hoặc MFA cần fixture và chính sách riêng; hai test minh họa này không kiểm chứng các luồng đó. Khi chia sẻ tài khoản giữa các test song song, kiểm tra xem chúng có thay đổi cùng trạng thái phía server không.

Add logout, unauthenticated access to protected pages, session expiry and keyboard navigation according to product requirements. SSO and MFA need their own fixtures and policies; the two examples do not verify them. Before sharing an account across parallel tests, check whether those tests mutate the same server-side state.

Nguồn đối chiếu

• Playwright locators
• Playwright assertions
• Authentication and stored state
• Trace viewer