Set up a basic login flow. Need to figure out how to test a complex flow.

UI/Web/e2e-tests/pages/login-page.ts

@@ -0,0 +1,19 @@
+import { Page } from '@playwright/test';
+
+export class LoginPage {
+  readonly page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async navigate() {
+    await this.page.goto('/login');
+  }
+
+  async login(username: string, password: string) {
+    await this.page.fill('input[formControlName="username"]', username);
+    await this.page.fill('input[formControlName="password"]', password);
+    await this.page.click('button[type="submit"]');
+  }
+}

UI/Web/e2e-tests/tests/Login/login.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test';
+import { LoginPage } from 'e2e-tests/pages/login-page';
+
+
+const url = 'https://demo.kavitareader.com/';
+
+test('has title', async ({ page }) => {
+  await page.goto(url);
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Kavita/);
+});
+
+test('login functionality', async ({ page }) => {
+  // Navigate to the login page
+  await page.goto(url);
+
+  // Verify the page title
+  await expect(page).toHaveTitle(/Kavita/);
+
+  const loginPage = new LoginPage(page);
+  await loginPage.navigate();
+  await loginPage.login('demouser', 'Demouser64');
+
+  // Verify successful login by checking for Home on side nav
+  await expect(page.locator('#null')).toBeVisible();
+});