adds playwright tests

web/tests/playwright/pages/index_page.ts

@@ -0,0 +1,19 @@
+import { expect, type Locator, type Page } from '@playwright/test';
+
+export class IndexPage {
+  readonly page: Page;
+  readonly error: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.error = page.getByText("Internal Error");
+  }
+
+  async goto() {
+    await this.page.goto('/');
+  }
+
+  async hasNoError() {
+    await expect(this.error).toHaveCount(0);
+  }
+}

web/tests/playwright/pages/lists_page.ts

@@ -0,0 +1,83 @@
+import { type Locator, type Page } from '@playwright/test';
+
+export class ListsPage {
+  readonly page: Page;
+  readonly createListButton: Locator;
+
+  readonly listItems: Locator;
+  readonly listItemsImage: Locator;
+
+  readonly listModal: Locator;
+  readonly listModalAvatar: Locator;
+  readonly listModalName: Locator;
+  readonly listModalDescription: Locator;
+  readonly listModalSaveButton: Locator;
+
+
+  readonly confirmModal: Locator;
+  readonly confirmModalConfirmButton: Locator;
+
+
+  constructor(page: Page) {
+    this.page = page;
+    this.createListButton = page.locator("#create-list-button");
+    this.listModal = page.locator("#list-modal");
+
+    this.listModalAvatar = this.listModal.locator('input[name="avatar"]')
+    this.listModalName = this.listModal.locator('input[name="name"]')
+    this.listModalDescription = this.listModal.locator('textarea[name="description"]')
+    this.listModalSaveButton = this.listModal.getByText('Save');
+
+    this.listItems = page.locator('.list-list-item');
+    this.listItemsImage = page.locator('.list-list-item img');
+
+
+    this.confirmModal = page.locator("#confirm-modal");
+    this.confirmModalConfirmButton = this.confirmModal.locator("button").filter({ hasText: "Delete" });
+  }
+
+  async goto() {
+    await this.page.goto('/lists', { waitUntil: 'networkidle' });
+  }
+
+  async create(name: string = "Test List") {
+    await this.createListButton.click();
+    await this.listModalName.fill(name);
+    await this.listModalAvatar.setInputFiles([
+      "./tests/playwright/fixtures/avatar.webp"
+    ]);
+    await Promise.all([
+      this.page.waitForResponse(resp => resp.url().includes('/api/v1/list') && resp.status() === 200),
+      this.listModalSaveButton.click()
+    ]);
+  }
+
+  async update(name: string = "Updated List", description = "New Description") {
+    await this.listItems.first().locator(".dropdown button").click();
+    await this.listItems.first().locator(".menu .menu-item").filter({ hasText: "Edit" }).click();
+    await this.listModalName.fill(name);
+    await this.listModalDescription.fill(description);
+
+    await Promise.all([
+      this.page.waitForResponse(resp => resp.url().includes('/api/v1/list') && resp.status() === 200),
+      this.listModalSaveButton.click()
+    ]);
+  }
+
+  async delete() {
+    await this.listItems.first().locator(".dropdown button").click();
+    await this.listItems.first().locator(".menu .menu-item").filter({ hasText: "Delete" }).click();
+    await Promise.all([
+      this.page.waitForResponse(resp => resp.url().includes('/api/v1/list') && resp.status() === 200),
+      this.confirmModalConfirmButton.click()
+    ]);
+  }
+
+  async removeAll() {
+    while ((await this.listItems.count()) > 0) {
+      await this.delete();
+    }
+  }
+
+
+}