npx tsx hoc.ts

// Dòng bắt đầu bằng // là "chú thích" – máy bỏ qua, chỉ để người đọc
console.log('Xin chào Playwright!');
console.log(2 + 3);

Xin chào Playwright!
5

const ten = 'An';          // hộp tên "ten", bên trong là chữ 'An'
const tuoi = 25;           // hộp "tuoi", bên trong là số 25
let daDangNhap = true;     // hộp "daDangNhap", bên trong là true (đúng)

console.log(ten);          // In ra: An
console.log(tuoi + 1);     // In ra: 26

let soLanThu = 1;
soLanThu = 2;      // ✅ được, vì là let

const matKhau = 'abc123';
matKhau = 'xyz';   // ❌ LỖI: không thể gán lại biến const

const email: string = 'an@shop.vn';
const soLuong: number = 3;

const gia: number = 'một trăm';  // ❌ TypeScript báo lỗi ngay:
// Type 'string' is not assignable to type 'number'.

const ten = 'An';
const soDon = 3;
// Dùng dấu huyền ` (phím cạnh số 1) và ${...} để chèn biến vào
console.log(`Xin chào ${ten}, bạn có ${soDon} đơn hàng`);
// → Xin chào An, bạn có 3 đơn hàng

const tuoi = 20;

if (tuoi >= 18) {
  console.log('Mời vào');        // chạy khi điều kiện ĐÚNG
} else {
  console.log('Chưa đủ tuổi');   // chạy khi điều kiện SAI
}

const traiCay = ['Táo', 'Cam', 'Xoài'];

console.log(traiCay[0]);       // Táo   (toa số 0)
console.log(traiCay[2]);       // Xoài
console.log(traiCay.length);   // 3     (có 3 toa)

traiCay.push('Dưa');            // gắn thêm toa vào cuối
console.log(traiCay);          // [ 'Táo', 'Cam', 'Xoài', 'Dưa' ]

const emails = ['a@shop.vn', 'b@shop.vn', 'c@shop.vn'];

// "Với mỗi email trong danh sách emails, làm việc sau:"
for (const email of emails) {
  console.log(`Đang kiểm tra: ${email}`);
}

// Lặp theo số lần: i chạy từ 0 đến 2
for (let i = 0; i < 3; i++) {
  console.log(`Lần thứ ${i + 1}`);
}

const nguoiDung = {
  email: 'an@shop.vn',
  matKhau: 'Abc@123',
  tuoi: 25,
  laAdmin: false,
};

console.log(nguoiDung.email);     // an@shop.vn   (dùng dấu chấm để lấy giá trị)
console.log(nguoiDung.laAdmin);   // false

// Cách 1: function truyền thống
function cong(a: number, b: number): number {
  return a + b;   // return = "trả kết quả ra ngoài"
}

// Cách 2: arrow function (hàm mũi tên) – rất hay gặp trong Playwright
const chaoHoi = (ten: string) => {
  console.log(`Xin chào ${ten}`);
};

console.log(cong(2, 3));   // 5
chaoHoi('An');             // Xin chào An

// file: utils.ts
export function taoEmail(ten: string) {
  return `${ten}@test.vn`;
}

// file: login.spec.ts
import { taoEmail } from './utils';   // mượn hàm từ file khác
console.log(taoEmail('an'));           // an@test.vn

// Hàm giả lập pha cà phê mất 2 giây
function phaCaPhe(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => resolve('☕ Cà phê sữa'), 2000);
  });
}

// Muốn dùng await thì hàm phải có chữ async phía trước
async function buoiSang() {
  console.log('Gọi cà phê...');
  const ly = await phaCaPhe();   // đứng chờ 2 giây ở đây
  console.log(`Đã nhận: ${ly}`); // chỉ chạy sau khi có cà phê
}

buoiSang();

test('đăng nhập', async ({ page }) => {        // ← async ở đây
  await page.goto('https://shop.vidu.vn');     // ← đợi trang tải xong
  await page.getByLabel('Email').fill('an@shop.vn');  // ← đợi gõ xong
  await page.getByRole('button', { name: 'Đăng nhập' }).click();
  await expect(page.getByText('Xin chào')).toBeVisible();
});

<h1>Đăng nhập</h1>
<form>
  <label for="email">Email</label>
  <input id="email" type="text" placeholder="ban@vidu.vn">

  <label for="pass">Mật khẩu</label>
  <input id="pass" type="password">

  <button class="btn-primary" data-testid="login-btn">Đăng nhập</button>
</form>

// ① Lấy 2 "công cụ" từ thư viện Playwright
import { test, expect } from '@playwright/test';

// ② Khai báo một test: test('tên test', hàm chứa các bước)
test('trang chủ có tiêu đề Playwright', async ({ page }) => {
  // ③ ARRANGE – chuẩn bị: mở trang web
  await page.goto('https://playwright.dev/');

  // ④ ASSERT – kiểm tra: tiêu đề tab có chứa chữ "Playwright"
  await expect(page).toHaveTitle(/Playwright/);
});

test('bấm Get started dẫn tới trang Installation', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // ⑤ ACT – hành động: bấm vào link "Get started"
  await page.getByRole('link', { name: 'Get started' }).click();

  // ⑥ ASSERT – kiểm tra: thấy tiêu đề "Installation"
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

// ❌ Mơ hồ: có 10 nút giống nhau → Playwright báo lỗi "strict mode violation"
await page.getByRole('button', { name: 'Thêm vào giỏ' }).click();

// ✅ Lọc: tìm thẻ sản phẩm có chữ "Áo thun", rồi tìm nút bên trong nó
await page
  .getByRole('listitem')
  .filter({ hasText: 'Áo thun' })
  .getByRole('button', { name: 'Thêm vào giỏ' })
  .click();

// Các cách khác (dùng khi thật cần):
page.getByRole('button').first();   // phần tử đầu tiên
page.getByRole('button').last();    // phần tử cuối cùng
page.getByRole('button').nth(2);    // phần tử thứ 3 (đếm từ 0)

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

test('thêm và hoàn thành công việc', async ({ page }) => {
  // Arrange
  await page.goto('https://demo.playwright.dev/todomvc');
  const oNhap = page.getByPlaceholder('What needs to be done?');

  // Act: thêm 2 công việc
  await oNhap.fill('Mua sữa');
  await oNhap.press('Enter');
  await oNhap.fill('Học Playwright');
  await oNhap.press('Enter');

  // Assert: có đúng 2 dòng
  await expect(page.getByTestId('todo-item')).toHaveCount(2);

  // Act: tích hoàn thành "Mua sữa"
  await page
    .getByTestId('todo-item')
    .filter({ hasText: 'Mua sữa' })
    .getByRole('checkbox')
    .check();

  // Assert: dòng đó có class "completed"
  await expect(
    page.getByTestId('todo-item').filter({ hasText: 'Mua sữa' })
  ).toHaveClass(/completed/);

  // Assert: còn 1 việc chưa làm
  await expect(page.getByText('1 item left')).toBeVisible();
});

await page.keyboard.press('Tab');           // chuyển sang ô kế tiếp
await page.keyboard.press('Control+A');     // chọn tất cả
await page.keyboard.press('Escape');        // đóng popup

// Đăng ký TRƯỚC khi hành động làm hiện hộp thoại
page.on('dialog', (dialog) => dialog.accept());   // tự bấm "OK"
await page.getByRole('button', { name: 'Xóa' }).click();

// Bắt đầu "chờ tab mới" trước khi bấm, rồi mới bấm link
const tabMoiPromise = page.context().waitForEvent('page');
await page.getByRole('link', { name: 'Chính sách' }).click();
const tabMoi = await tabMoiPromise;
await expect(tabMoi).toHaveTitle(/Chính sách/);

await expect(page.getByText('Lỗi')).not.toBeVisible();
await expect(page).not.toHaveURL(/login/);

// Bình thường: assertion đầu tiên fail → test dừng luôn
// Soft: ghi nhận lỗi nhưng vẫn chạy tiếp, cuối cùng báo tất cả lỗi
await expect.soft(page.getByTestId('ten')).toHaveText('An');
await expect.soft(page.getByTestId('email')).toHaveText('an@shop.vn');
await expect.soft(page.getByTestId('sdt')).toHaveText('0901234567');

await expect(page.getByTestId('gio-hang'), 'Giỏ hàng phải có 2 sản phẩm').toHaveText('2');

npx playwright codegen https://demo.playwright.dev/todomvc

npx playwright test dau-tien.spec.ts --debug

test('gỡ lỗi', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.pause();   // ⏸ dừng tại đây để bạn tự quan sát
  await page.getByRole('link', { name: 'Get started' }).click();
});

# Bật trace cho lần chạy này
npx playwright test --trace on

# Mở trace (hoặc bấm vào test trong report → tab Trace)
npx playwright show-trace test-results/.../trace.zip

  1) tests/login.spec.ts:12:5 › đăng nhập thành công

    Error: Timed out 5000ms waiting for expect(locator).toBeVisible()

    Locator: getByText('Xin chào An')
    Expected: visible
    Received: <element(s) not found>

      14 |   await page.getByRole('button', { name: 'Đăng nhập' }).click();
    > 15 |   await expect(page.getByText('Xin chào An')).toBeVisible();
         |                                               ^

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

test.describe('Chức năng đăng nhập', () => {

  // Chạy TRƯỚC MỖI test trong nhóm này
  test.beforeEach(async ({ page }) => {
    await page.goto('https://www.saucedemo.com/');
  });

  test('đăng nhập thành công', async ({ page }) => {
    // không cần goto nữa – beforeEach đã làm
    await page.getByPlaceholder('Username').fill('standard_user');
    await page.getByPlaceholder('Password').fill('secret_sauce');
    await page.getByRole('button', { name: 'Login' }).click();
    await expect(page).toHaveURL(/inventory/);
  });

  test('sai mật khẩu báo lỗi', async ({ page }) => {
    await page.getByPlaceholder('Username').fill('standard_user');
    await page.getByPlaceholder('Password').fill('sai');
    await page.getByRole('button', { name: 'Login' }).click();
    await expect(page.locator('[data-test="error"]')).toContainText('do not match');
  });
});

const cacTaiKhoanLoi = [
  { user: 'locked_out_user', pass: 'secret_sauce', loi: 'locked out' },
  { user: 'standard_user',   pass: 'sai_mk',       loi: 'do not match' },
  { user: '',                pass: 'secret_sauce', loi: 'Username is required' },
];

for (const tk of cacTaiKhoanLoi) {
  test(`đăng nhập lỗi: "${tk.user}" → ${tk.loi}`, async ({ page }) => {
    await page.goto('https://www.saucedemo.com/');
    await page.getByPlaceholder('Username').fill(tk.user);
    await page.getByPlaceholder('Password').fill(tk.pass);
    await page.getByRole('button', { name: 'Login' }).click();
    await expect(page.locator('[data-test="error"]')).toContainText(tk.loi);
  });
}

// Gắn tag để chạy theo nhóm
test('đăng nhập', { tag: '@smoke' }, async ({ page }) => { /* ... */ });

test.skip('tính năng chưa xong', async ({ page }) => { /* ... */ });  // bỏ qua
test.only('chỉ chạy test này', async ({ page }) => { /* ... */ });     // chỉ chạy cái này (nhớ xóa trước khi commit!)
test.fixme('đang có bug #123', async ({ page }) => { /* ... */ });    // đánh dấu cần sửa

npx playwright test --grep @smoke          # chỉ chạy test có tag @smoke
npx playwright test --grep-invert @slow    # bỏ qua test có tag @slow

test('mua hàng', async ({ page }) => {
  await test.step('Đăng nhập', async () => { /* ... */ });
  await test.step('Thêm sản phẩm vào giỏ', async () => { /* ... */ });
  await test.step('Thanh toán', async () => { /* ... */ });
});

class ConCho {
  ten: string;                    // thuộc tính: con chó có tên

  constructor(ten: string) {      // hàm chạy khi tạo con chó mới
    this.ten = ten;               // this = "chính con chó này"
  }

  sua() {                         // hành động (method)
    console.log(`${this.ten}: Gâu gâu!`);
  }
}

const milu = new ConCho('Milu');  // đúc ra một con chó từ khuôn
milu.sua();                       // Milu: Gâu gâu!

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

export class LoginPage {
  // Khai báo các "linh kiện" của trang
  readonly page: Page;
  readonly oUsername: Locator;
  readonly oPassword: Locator;
  readonly nutLogin: Locator;
  readonly thongBaoLoi: Locator;

  constructor(page: Page) {
    this.page = page;
    this.oUsername = page.getByPlaceholder('Username');
    this.oPassword = page.getByPlaceholder('Password');
    this.nutLogin = page.getByRole('button', { name: 'Login' });
    this.thongBaoLoi = page.locator('[data-test="error"]');
  }

  // Các "nút bấm trên điều khiển"
  async moTrang() {
    await this.page.goto('https://www.saucedemo.com/');
  }

  async dangNhap(user: string, pass: string) {
    await this.oUsername.fill(user);
    await this.oPassword.fill(pass);
    await this.nutLogin.click();
  }

  async kiemTraLoi(noiDung: string) {
    await expect(this.thongBaoLoi).toContainText(noiDung);
  }
}

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

test('đăng nhập thành công', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.moTrang();
  await loginPage.dangNhap('standard_user', 'secret_sauce');
  await expect(page).toHaveURL(/inventory/);
});

test('tài khoản bị khóa', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.moTrang();
  await loginPage.dangNhap('locked_out_user', 'secret_sauce');
  await loginPage.kiemTraLoi('locked out');
});

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

export default defineConfig({
  testDir: './tests',            // thư mục chứa test
  timeout: 30_000,               // mỗi test tối đa 30 giây
  expect: { timeout: 5_000 },    // mỗi expect chờ tối đa 5 giây
  fullyParallel: true,           // chạy song song cho nhanh
  retries: process.env.CI ? 2 : 0,  // trên CI: fail thì chạy lại 2 lần
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',              // xuất báo cáo HTML

  use: {
    baseURL: 'https://www.saucedemo.com',  // goto('/') = goto(baseURL)
    trace: 'on-first-retry',     // ghi trace khi chạy lại
    screenshot: 'only-on-failure', // chụp ảnh khi fail
    video: 'retain-on-failure',  // giữ video khi fail
    testIdAttribute: 'data-test',  // getByTestId sẽ tìm thuộc tính data-test
  },

  // Mỗi project = một môi trường chạy
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
    { name: 'mobile',   use: { ...devices['iPhone 13'] } },   // giả lập điện thoại 📱
  ],
});

// Đọc từ biến môi trường, nếu không có thì dùng giá trị mặc định
const user = process.env.APP_USER ?? 'standard_user';
const pass = process.env.APP_PASS ?? 'secret_sauce';

# PowerShell
$env:APP_USER="admin"; npx playwright test
# macOS / Linux / Git Bash
APP_USER=admin npx playwright test

// file: fixtures.ts
import { test as base } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';

type MyFixtures = {
  loginPage: LoginPage;
};

export const test = base.extend<MyFixtures>({
  loginPage: async ({ page }, use) => {
    const loginPage = new LoginPage(page);   // 🍽️ bày bàn
    await loginPage.moTrang();
    await use(loginPage);                    // 👉 đưa cho test dùng
    // (code sau use = dọn dẹp, nếu cần)
  },
});

export { expect } from '@playwright/test';

// file: tests/login.spec.ts
import { test, expect } from '../fixtures';   // ⚠️ import từ fixtures, không phải @playwright/test

test('đăng nhập', async ({ loginPage, page }) => {
  await loginPage.dangNhap('standard_user', 'secret_sauce');  // trang đã mở sẵn!
  await expect(page).toHaveURL(/inventory/);
});

// file: tests/auth.setup.ts
import { test as setup, expect } from '@playwright/test';

setup('đăng nhập và lưu phiên', async ({ page }) => {
  await page.goto('https://www.saucedemo.com/');
  await page.getByPlaceholder('Username').fill('standard_user');
  await page.getByPlaceholder('Password').fill('secret_sauce');
  await page.getByRole('button', { name: 'Login' }).click();
  await expect(page).toHaveURL(/inventory/);
  await page.context().storageState({ path: 'playwright/.auth/user.json' });
});

// trong playwright.config.ts
projects: [
  { name: 'setup', testMatch: /.*\.setup\.ts/ },
  {
    name: 'chromium',
    use: { ...devices['Desktop Chrome'], storageState: 'playwright/.auth/user.json' },
    dependencies: ['setup'],   // chạy setup trước
  },
],

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

const API = 'https://jsonplaceholder.typicode.com';

test('GET: lấy bài viết số 1', async ({ request }) => {
  const res = await request.get(`${API}/posts/1`);

  expect(res.status()).toBe(200);          // kiểm tra mã trả lời
  const body = await res.json();           // đọc dữ liệu JSON
  expect(body.id).toBe(1);
  expect(body.userId).toBe(1);
  expect(body.title).toBeTruthy();         // có tiêu đề (không rỗng)
});

test('POST: tạo bài viết mới', async ({ request }) => {
  const res = await request.post(`${API}/posts`, {
    data: { title: 'Học Playwright', body: 'Rất vui!', userId: 1 },
  });

  expect(res.status()).toBe(201);
  const body = await res.json();
  expect(body).toMatchObject({ title: 'Học Playwright', userId: 1 });
  expect(body.id).toBeDefined();
});

test('GET: bài viết không tồn tại trả 404', async ({ request }) => {
  const res = await request.get(`${API}/posts/99999`);
  expect(res.status()).toBe(404);
});

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident...",
  "body": "quia et suscipit..."
}

test('xóa đơn hàng', async ({ page, request }) => {
  // Arrange bằng API – nhanh
  const res = await request.post('/api/orders', { data: { sanPham: 'Áo thun' } });
  const { id } = await res.json();

  // Act + Assert bằng UI
  await page.goto(`/orders/${id}`);
  await page.getByRole('button', { name: 'Xóa đơn' }).click();
  await expect(page.getByText('Đã xóa đơn hàng')).toBeVisible();
});

// playwright.config.ts (phần quan trọng)
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  reporter: 'html',
  use: {
    baseURL: 'https://www.saucedemo.com',
    testIdAttribute: 'data-test',     // SauceDemo dùng data-test
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
});

// pages/LoginPage.ts
import { type Page, type Locator } from '@playwright/test';

export class LoginPage {
  readonly username: Locator;
  readonly password: Locator;
  readonly loginButton: Locator;
  readonly error: Locator;

  constructor(private readonly page: Page) {
    this.username = page.getByTestId('username');
    this.password = page.getByTestId('password');
    this.loginButton = page.getByTestId('login-button');
    this.error = page.getByTestId('error');
  }

  async goto() {
    await this.page.goto('/');
  }

  async login(user: string, pass: string) {
    await this.username.fill(user);
    await this.password.fill(pass);
    await this.loginButton.click();
  }
}

// pages/InventoryPage.ts
import { type Page, type Locator } from '@playwright/test';

export class InventoryPage {
  readonly title: Locator;
  readonly cartBadge: Locator;
  readonly cartLink: Locator;

  constructor(private readonly page: Page) {
    this.title = page.getByTestId('title');
    this.cartBadge = page.getByTestId('shopping-cart-badge');
    this.cartLink = page.getByTestId('shopping-cart-link');
  }

  // Thêm sản phẩm theo tên hiển thị, ví dụ "Sauce Labs Backpack"
  async addToCart(productName: string) {
    await this.page
      .getByTestId('inventory-item')
      .filter({ hasText: productName })
      .getByRole('button', { name: 'Add to cart' })
      .click();
  }

  async openCart() {
    await this.cartLink.click();
  }
}

// pages/CheckoutPage.ts
import { type Page, type Locator } from '@playwright/test';

export class CheckoutPage {
  readonly checkoutButton: Locator;
  readonly firstName: Locator;
  readonly lastName: Locator;
  readonly postalCode: Locator;
  readonly continueButton: Locator;
  readonly finishButton: Locator;
  readonly completeHeader: Locator;
  readonly error: Locator;

  constructor(private readonly page: Page) {
    this.checkoutButton = page.getByTestId('checkout');
    this.firstName = page.getByTestId('firstName');
    this.lastName = page.getByTestId('lastName');
    this.postalCode = page.getByTestId('postalCode');
    this.continueButton = page.getByTestId('continue');
    this.finishButton = page.getByTestId('finish');
    this.completeHeader = page.getByTestId('complete-header');
    this.error = page.getByTestId('error');
  }

  async fillInfo(first: string, last: string, zip: string) {
    await this.firstName.fill(first);
    await this.lastName.fill(last);
    await this.postalCode.fill(zip);
    await this.continueButton.click();
  }
}

// fixtures.ts
import { test as base } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';
import { InventoryPage } from './pages/InventoryPage';
import { CheckoutPage } from './pages/CheckoutPage';

type Pages = {
  loginPage: LoginPage;
  inventoryPage: InventoryPage;
  checkoutPage: CheckoutPage;
};

export const test = base.extend<Pages>({
  loginPage: async ({ page }, use) => { await use(new LoginPage(page)); },
  inventoryPage: async ({ page }, use) => { await use(new InventoryPage(page)); },
  checkoutPage: async ({ page }, use) => { await use(new CheckoutPage(page)); },
});

export { expect } from '@playwright/test';

// tests/login.spec.ts
import { test, expect } from '../fixtures';

test.describe('Đăng nhập', () => {
  test.beforeEach(async ({ loginPage }) => {
    await loginPage.goto();
  });

  test('LG-01 đăng nhập đúng', { tag: '@smoke' }, async ({ loginPage, inventoryPage, page }) => {
    await loginPage.login('standard_user', 'secret_sauce');
    await expect(page).toHaveURL(/inventory/);
    await expect(inventoryPage.title).toHaveText('Products');
  });

  test('LG-02 sai mật khẩu', async ({ loginPage }) => {
    await loginPage.login('standard_user', 'sai_mat_khau');
    await expect(loginPage.error).toContainText('do not match');
  });

  test('LG-03 tài khoản bị khóa', async ({ loginPage }) => {
    await loginPage.login('locked_out_user', 'secret_sauce');
    await expect(loginPage.error).toContainText('locked out');
  });
});

// tests/checkout.spec.ts
import { test, expect } from '../fixtures';

test.describe('Giỏ hàng & Thanh toán', () => {
  test.beforeEach(async ({ loginPage }) => {
    await loginPage.goto();
    await loginPage.login('standard_user', 'secret_sauce');
  });

  test('CT-01 thêm 2 sản phẩm vào giỏ', async ({ inventoryPage }) => {
    await inventoryPage.addToCart('Sauce Labs Backpack');
    await inventoryPage.addToCart('Sauce Labs Bike Light');
    await expect(inventoryPage.cartBadge).toHaveText('2');
  });

  test('CO-01 thanh toán thành công', { tag: '@smoke' }, async ({ inventoryPage, checkoutPage }) => {
    await test.step('Thêm sản phẩm & mở giỏ', async () => {
      await inventoryPage.addToCart('Sauce Labs Backpack');
      await inventoryPage.openCart();
    });
    await test.step('Nhập thông tin giao hàng', async () => {
      await checkoutPage.checkoutButton.click();
      await checkoutPage.fillInfo('An', 'Nguyen', '700000');
    });
    await test.step('Hoàn tất đơn', async () => {
      await checkoutPage.finishButton.click();
      await expect(checkoutPage.completeHeader).toHaveText('Thank you for your order!');
    });
  });

  test('CO-02 thiếu họ tên báo lỗi', async ({ inventoryPage, checkoutPage }) => {
    await inventoryPage.addToCart('Sauce Labs Backpack');
    await inventoryPage.openCart();
    await checkoutPage.checkoutButton.click();
    await checkoutPage.fillInfo('', 'Nguyen', '700000');
    await expect(checkoutPage.error).toContainText('First Name is required');
  });
});

npx playwright test                 # chạy tất cả
npx playwright test --grep @smoke   # chỉ chạy smoke test
npx playwright show-report          # xem báo cáo

name: Playwright Tests
on:                                  # khi nào chạy?
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest           # máy ảo Linux miễn phí của GitHub
    steps:
    - uses: actions/checkout@v4      # 1. lấy code về
    - uses: actions/setup-node@v4    # 2. cài Node.js
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci                    # 3. cài thư viện
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps   # 4. cài trình duyệt
    - name: Run Playwright tests
      run: npx playwright test       # 5. chạy test
    - uses: actions/upload-artifact@v4   # 6. lưu báo cáo để tải về xem
      if: ${{ !cancelled() }}
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

npm init playwright@latest              # tạo dự án mới
npx playwright test                     # chạy tất cả test
npx playwright test login.spec.ts       # chạy 1 file
npx playwright test -g "đăng nhập"      # chạy theo tên
npx playwright test --headed            # hiện trình duyệt
npx playwright test --ui                # UI Mode
npx playwright test --debug             # chạy từng bước
npx playwright test --project=firefox   # chọn trình duyệt
npx playwright test --grep @smoke       # chạy theo tag
npx playwright test --last-failed       # chạy lại test vừa fail
npx playwright show-report              # xem báo cáo
npx playwright codegen URL              # ghi thao tác thành code
npx playwright show-trace trace.zip     # xem trace
npx playwright install                  # cài/cập nhật trình duyệt

page.getByRole('button', { name: 'Lưu' })
page.getByRole('link', { name: 'Trang chủ' })
page.getByRole('heading', { name: 'Giỏ hàng' })
page.getByRole('textbox', { name: 'Email' })
page.getByRole('checkbox', { name: 'Đồng ý' })
page.getByLabel('Mật khẩu')
page.getByPlaceholder('Tìm kiếm...')
page.getByText('Thành công')
page.getByText('Thành công', { exact: true })
page.getByTestId('submit')
page.locator('#id'), page.locator('.class'), page.locator('[name="q"]')
locator.filter({ hasText: 'Áo' }), locator.first(), locator.last(), locator.nth(1)

await page.goto('/duong-dan');
await loc.click();          await loc.dblclick();
await loc.fill('chữ');      await loc.clear();
await loc.press('Enter');   await loc.pressSequentially('chậm');
await loc.check();          await loc.uncheck();
await loc.selectOption('giá trị');
await loc.hover();          await loc.focus();
await loc.setInputFiles('file.pdf');
await loc.dragTo(dich);
await page.reload();        await page.goBack();

await expect(page).toHaveURL(/inventory/);
await expect(page).toHaveTitle('Tiêu đề');
await expect(loc).toBeVisible();        await expect(loc).toBeHidden();
await expect(loc).toHaveText('chính xác');
await expect(loc).toContainText('một phần');
await expect(loc).toHaveValue('giá trị ô nhập');
await expect(loc).toHaveCount(3);
await expect(loc).toBeEnabled();        await expect(loc).toBeDisabled();
await expect(loc).toBeChecked();
await expect(loc).toHaveAttribute('href', '/cart');
await expect(loc).toHaveClass(/active/);
await expect(loc).not.toBeVisible();
await expect.soft(loc).toHaveText('...');
expect(giaTri).toBe(5);  expect(obj).toEqual({ a: 1 });