Refactor tests using Page Object Model and remove original example test.

tests/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/create-group.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test'
+import { CreateGroupPage } from './create-group-page'
+
+test('Create a new group', async ({ page }) => {
+  const createGroupPage = new CreateGroupPage(page)
+
+  await createGroupPage.navigate()
+  await createGroupPage.fillGroupName('New Test Group')
+  await createGroupPage.fillCurrency('USD')
+  await createGroupPage.fillAdditionalInfo('This is a test group.')
+
+  await createGroupPage.addParticipant('John', 0)
+  await createGroupPage.addParticipant('Jane', 1)
+
+  await createGroupPage.submit()
+
+  await page.waitForURL(/.*\/groups\/.*\/expenses/)
+  await expect(
+    page.getByRole('heading', { name: 'New Test Group' }),
+  ).toBeVisible()
+})

tests/example.spec.ts

@@ -1,6 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('basic test', async ({ page }) => {
-  await page.goto('http://localhost:3002'); // replace with your local dev URL
-  await expect(page).toHaveTitle(/Spliit · Share Expenses with Friends & Family/); // replace with your app's title
-});