register.page.ts

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

export class RegisterPage {
    // Khai báo page và các locator
    page: Page;
    usernameInput: Locator;
    emailInput: Locator;
    submitButton: Locator;

    constructor(page: Page) {
        this.page = page;
        // Khởi tạo locator trong constructor
        this.usernameInput = page.locator('#username');
        this.emailInput = page.locator('#email');
        this.submitButton = page.locator('button[type="submit"]');
    }

    // Method điều hướng đến trang
    async goto() {
        await this.page.goto(
            'https://material.playwrightvn.com/01-xpath-register-page.html'
        );
    }

    // Method thực hiện đăng ký
    async register(
        username: string,
        email: string,
    ) {
        await this.usernameInput.fill(username);
        await this.emailInput.fill(email);
        await this.clickSubmit();
    }

    // Method click nút submit
    async clickSubmit() {
        await this.submitButton.click();
    }
}

register.spec.ts

import { test, expect } from '@playwright/test';
import { RegisterPage } from './register.page';

test.describe('Register Page Tests', () => {
    let registerPage: RegisterPage;

    test.beforeEach(async ({ page }) => {
        registerPage = new RegisterPage(page);
        await registerPage.goto();
    });

    test('should register successfully', async () => {
        await registerPage.register(
            'johndoe',
            '[email protected]',
        );
    });

    test('should show error for empty fields', async () => {
        await registerPage.clickSubmit();
    });
});

todo.page.ts

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

// POM
export class TodoPage {
    // Khai báo page và các locator
    page: Page;
    inputLocator: Locator;
    btnSubmit: Locator;
    todoItems: Locator;

    constructor(page: Page) {
        this.page = page;
        // Khởi tạo locator trong constructor
        this.inputLocator = page.locator("#input");
        this.btnSubmit = page.locator("#button");
        this.todoItems = page.locator("//ul[@id='task-list']//li");
    }

    // Method điều hướng đến trang
    async goto() {
        await this.page.goto(
            'https://material.playwrightvn.com/01-xpath-register-page.html'
        );
    }

    async addTodo(todo: string) {
        await this.inputLocator.fill(todo);
        await this.btnSubmit.click();
    }

    // Get total.
    async getTotalTodo() {
        const totalTodo = await this.todoItems.count();
        return totalTodo;
    }
}

todo.spec.ts

import { test, expect } from '@playwright/test';
import { TodoPage } from './todo.page';

test.describe('Register Page Tests', () => {
    let todoPage: TodoPage;

    test.beforeEach(async ({ page }) => {
        todoPage = new TodoPage(page);
        await todoPage.goto();
    });

    test('should have count 3 after add 3 todos', async () => {
       await todoPage.addTodo("vanh1");
       await todoPage.addTodo("vanh2");
       await todoPage.addTodo("vanh3");

       const totalTodo = await todoPage.getTotalTodo();
       expect(totalTodo).toEqual(3);
    });
});