Add expense creation to E2E tests using Page Object Model

tests/pom/create-group-page.ts

@@ -0,0 +1,33 @@
+import { Page } from '@playwright/test'
+
+export class CreateGroupPage {
+  constructor(private page: Page) {}
+
+  async navigate() {
+    await this.page.goto('http://localhost:3002/groups/create')
+  }
+
+  async fillGroupName(name: string) {
+    await this.page.getByRole('textbox', { name: 'Group name' }).fill(name)
+  }
+
+  async fillCurrency(currency: string) {
+    await this.page.getByRole('textbox', { name: 'Currency' }).fill(currency)
+  }
+
+  async fillAdditionalInfo(info: string) {
+    await this.page
+      .getByRole('textbox', { name: 'Group Information' })
+      .fill(info)
+  }
+
+  async addParticipant(participantName: string, index: number) {
+    await this.page
+      .locator(`input[name="participants.${index}.name"]`)
+      .fill(participantName)
+  }
+
+  async submit() {
+    await this.page.getByRole('button', { name: 'Create' }).click()
+  }
+}

tests/pom/expense-page.ts

@@ -0,0 +1,31 @@
+import { Page } from '@playwright/test'
+
+export class ExpensePage {
+  constructor(private page: Page) {}
+
+  async navigateToGroupExpenses(groupId: string) {
+    await this.page.goto(`http://localhost:3002/groups/${groupId}/expenses`)
+  }
+
+  async fillTitle(expenseTitle: string) {
+    await this.page
+      .getByRole('textbox', { name: 'Expense title' })
+      .fill(expenseTitle)
+  }
+
+  async fillAmount(expenseAmount: string) {
+    await this.page.getByRole('textbox', { name: 'Amount' }).fill(expenseAmount)
+  }
+
+  async selectPayer(payer: string) {
+    await this.page
+      .getByRole('combobox')
+      .filter({ hasText: 'Select a participant' })
+      .click()
+    await this.page.getByRole('option', { name: payer, exact: true }).click()
+  }
+
+  async submit() {
+    await this.page.getByRole('button', { name: 'Create' }).click()
+  }
+}

tests/pom/group-page.ts

@@ -0,0 +1,21 @@
+import { Locator, Page } from '@playwright/test'
+
+export class GroupPage {
+  page: Page
+  title: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.title = page.getByRole('main').getByRole('heading', { level: 1 })
+  }
+
+  async createExpense() {
+    await this.page.getByRole('link', { name: 'Create expense' }).click()
+  }
+
+  getExpenseCard(expenseTitle: string) {
+    return this.page
+      .locator('[data-expense-card]')
+      .filter({ hasText: expenseTitle })
+  }
+}