Bài Tập 1: Tạo LoginPage

Yêu Cầu

Tạo Page Object cho trang Login trên Practice Website.

Hướng Dẫn

Bước 1: Tạo file

Tạo file pages/LoginPage.ts

Bước 2: Viết Page Object

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

export class LoginPage {
  readonly page: Page;

  // TODO: Khai báo locator
  readonly usernameInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;
  readonly registerEmailInput: Locator;
  readonly registerPasswordInput: Locator;
  readonly registerButton: Locator;

  constructor(page: Page) {
    this.page = page;

    // TODO: Khởi tạo locator
    this.usernameInput = page.locator('_______________');
    this.passwordInput = page.locator('_______________');
    this.loginButton = page.locator('_______________');
    this.registerEmailInput = page.locator('_______________');
    this.registerPasswordInput = page.locator('_______________');
    this.registerButton = page.locator('_______________');
  }

  // TODO: Method mở trang
  async goto() {
    await this.page.goto('_______________');
  }

  // TODO: Method đăng nhập
  async login(username: string, password: string) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }

  // TODO: Method đăng ký
  async register(email: string, password: string) {
    await this.registerEmailInput.fill(email);
    await this.registerPasswordInput.fill(password);
    await this.registerButton.click();
  }

  // TODO: Assertion đăng nhập thành công
  async expectLoginSuccess() {
    await expect(this.page.locator('_______________')).toBeVisible();
  }
}

Bước 3: Tìm locator

Dùng DevTools tìm locator cho:

• Ô Username (login): _____
• Ô Password (login): _____
• Nút Login: _____
• Ô Email (register): _____
• Ô Password (register): _____
• Nút Register: _____

Bước 4: Test Page Object

Tạo file test để kiểm tra:

// tests/test-login-page.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

test('test login page object', async ({ page }) => {
  const loginPage = new LoginPage(page);

  await loginPage.goto();
  await loginPage.login('testuser123', 'Test@123456');
  await loginPage.expectLoginSuccess();
});

---

Checklist

□ File LoginPage.ts được tạo
□ Tất cả locator được khai báo
□ Method goto() hoạt động
□ Method login() hoạt động
□ Method register() hoạt động
□ Assertion expectLoginSuccess() hoạt động
□ Test pass

---

Gợi Ý

Click để xem solution

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

export class LoginPage {
  readonly page: Page;
  readonly usernameInput: Locator;
  readonly passwordInput: Locator;
  readonly loginButton: Locator;
  readonly registerEmailInput: Locator;
  readonly registerPasswordInput: Locator;
  readonly registerButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.usernameInput = page.locator('#username');
    this.passwordInput = page.locator('#password');
    this.loginButton = page.locator('[name="login"]');
    this.registerEmailInput = page.locator('#reg_email');
    this.registerPasswordInput = page.locator('#reg_password');
    this.registerButton = page.locator('[name="register"]');
  }

  async goto() {
    await this.page.goto('https://practice.automationtesting.in/my-account/');
  }

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

  async register(email: string, password: string) {
    await this.registerEmailInput.fill(email);
    await this.registerPasswordInput.fill(password);
    await this.registerButton.click();
  }

  async expectLoginSuccess() {
    await expect(this.page.locator('.woocommerce-MyAccount-content')).toBeVisible();
  }
}

---

Nộp Bài

• [ ] File LoginPage.ts hoàn chỉnh
• [ ] File test kiểm tra
• [ ] Test pass