Bài Tập 3: Viết Code với Locator Ưu Tiên¶

Yêu Cầu¶

Viết code Playwright cho flow đăng ký tài khoản, tuân thủ Locator Hierarchy.

Hướng Dẫn¶

Bước 1: Mở trang đăng ký¶

URL: https://practice.automationtesting.in/my-account/

Bước 2: Tìm locator cho các element¶

Dùng DevTools tìm locator cho:

Ô Email (đăng ký)
Ô Password (đăng ký)
Nút "Register"

Bước 3: Viết code¶

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

test('test register', async ({ page }) => {
  // Bước 1: Mở trang
  await page.goto('https://practice.automationtesting.in/my-account/');

  // Bước 2: Nhập email đăng ký
  // TODO: Tìm locator tốt nhất cho ô Email
  await page.locator('_______________').fill('test@example.com');

  // Bước 3: Nhập password đăng ký
  // TODO: Tìm locator tốt nhất cho ô Password
  await page.locator('_______________').fill('Test@123456');

  // Bước 4: Click nút Register
  // TODO: Tìm locator tốt nhất cho nút Register
  await page.locator('_______________').click();

  // Bước 5: Assertion - Kiểm tra đăng ký thành công
  // TODO: Viết assertion
  await expect(page.locator('_______________')).toBeVisible();
});

Checklist Locator¶

Kiểm tra code có tuân thủ Locator Hierarchy không:

□ Locator 1 (Email): data-testid > id > name > placeholder > class
□ Locator 2 (Password): data-testid > id > name > placeholder > class
□ Locator 3 (Register): data-testid > id > name > text > class
□ Không dùng waitForTimeout
□ Có assertion rõ ràng

Gợi Ý¶

Locator cho trang My Account¶

<!-- Form đăng ký (Register) -->
<input type="email" name="email" id="reg_email" ... />
<input type="password" name="password" id="reg_password" ... />
<button type="submit" name="register" value="Register">Register</button>

Code mẫu (solution)¶

Click để xem solution

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

test('test register', async ({ page }) => {
  await page.goto('https://practice.automationtesting.in/my-account/');

  // Dùng ID (ổn định)
  await page.locator('#reg_email').fill('test@example.com');
  await page.locator('#reg_password').fill('Test@123456');

  // Dùng name attribute (ổn định)
  await page.locator('[name="register"]').click();

  // Assertion - Kiểm tra đăng ký thành công
  await expect(page.locator('.woocommerce-MyAccount-content')).toBeVisible();
});

Nộp Bài¶

[ ] Code hoàn chỉnh
[ ] Checklist locator
[ ] Ghi chú lý do chọn locator