Playwright

.dockerignore

@@ -1,4 +1,5 @@
 cypress
+e2e
 doc
 frontend/dist
 frontend/node_modules

.github/workflows/playwright.yml

@@ -0,0 +1,29 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Build Frontend
+      run: npm run build
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -2,3 +2,7 @@
 /cypress/videos/
 /node_modules/
 /public/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/login.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("login", () => {
+	test("bad password", async ({ page }) => {
+		await page.goto("/-login");
+
+		await page.fill("input[id=password]", "bad-password");
+		await page.getByRole("button", { name: "Login" }).click();
+		await expect(page.getByRole("alert")).toContainText("Authenitacion failed");
+	});
+
+	test("successful login and logout", async ({ page }) => {
+		await page.goto("/-login");
+
+		await page.fill("input[id=password]", "admin-password");
+		await page.getByRole("button", { name: "Login" }).click();
+
+		await expect(page).toHaveURL("/");
+
+		await page.getByRole("link", { name: "Logout" }).click();
+		await expect(page.getByRole("link", { name: "Login" })).toBeVisible();
+	});
+});

e2e/top.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("/", () => {
+	test("navigation", async ({ page }) => {
+		await page.goto("/");
+
+		await expect(page.getByRole("navigation")).toContainText("SPARQList");
+		await expect(page.getByRole("link", { name: "Login" })).toBeVisible();
+	});
+
+	test("navigate to login", async ({ page }) => {
+		await page.goto("/");
+		await page.click("text=Login");
+
+		await expect(page).toHaveURL("/-login");
+	});
+
+	test("search", async ({ page }) => {
+		await page.goto("/");
+
+		await expect(
+			page.getByRole("link", { name: "gene_and_organism_annotation" }),
+		).toBeVisible();
+		await expect(
+			page.getByRole("link", { name: "adjacent_prefectures -" }),
+		).toBeVisible();
+
+		await page.fill("input[type=search]", "ge");
+
+		await expect(
+			page.getByRole("link", { name: "gene_and_organism_annotation" }),
+		).toBeVisible();
+		await expect(
+			page.getByRole("link", { name: "adjacent_prefectures -" }),
+		).not.toBeVisible();
+	});
+});

package.json

@@ -11,12 +11,14 @@
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.24.0",
+    "@types/node": "^20.11.25",
     "babel-jest": "^29.7.0",
     "cypress": "^13.6.6",
     "jest": "^29.7.0",
     "nodemon": "^3.1.0"
   },
   "dependencies": {
+    "@playwright/test": "^1.42.1",
     "accepts": "^1.3.8",
     "body-parser": "^1.20.2",
     "commonmark": "^0.31.0",