test(e2e): setup base tests using playwright

.github/workflows/build.yml

@@ -4,18 +4,31 @@ on:
     branches-ignore:
       - main
       - gh-pages
+  pull_request:
+    branches:
+      - main
+
 jobs:
   build-and-test:
+    timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
         uses: actions/[email protected]
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-      - name: Build and Run End2End tests with Cypress
-        uses: cypress-io/github-action@v4
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        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: ${{ !cancelled() }}
         with:
-          build: npm run build
-          start: npm run dev
-          wait-on: "http://localhost:8080"
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -19,3 +19,7 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/smoke.spec.ts

@@ -0,0 +1,46 @@
+import { expect, Page, test } from "@playwright/test"
+import * as path from "path"
+
+const trivyReportUrl =
+  "https://raw.githubusercontent.com/dbsystel/trivy-vulnerability-explorer/refs/heads/main/public/alpine-3.9.2.json"
+
+async function verifyTableResult(page: Page) {
+  expect(await page.locator("table").isVisible()).toBe(true)
+  const rows = page.locator("table tr")
+  expect(await rows.count()).toBeGreaterThanOrEqual(20)
+}
+
+test("should have the correct title", async ({ page }) => {
+  const expectedTitle = "Trivy Vulnerability Explorer"
+  await page.goto("http://localhost:8080")
+  expect(await page.title()).toMatch(expectedTitle)
+  expect(await page.getByRole("banner").textContent()).toBe(expectedTitle)
+})
+
+test("fetches from URL", async ({ page }) => {
+  await page.goto("http://localhost:8080")
+
+  await page.getByRole("button", { name: "URL" }).click()
+  const fetchButton = page.getByRole("button", { name: "Fetch" })
+
+  expect(await fetchButton.isDisabled()).toBe(true)
+  await page.getByRole("textbox", { name: "Url" }).fill(trivyReportUrl)
+
+  const responsePromise = page.waitForResponse(trivyReportUrl)
+  await fetchButton.click()
+  await responsePromise
+
+  await verifyTableResult(page)
+})
+
+test("fetches from uploaded file", async ({ page }) => {
+  await page.goto("http://localhost:8080")
+
+  await page.getByRole("button", { name: "File" }).click()
+
+  const fileInput = page.locator("input[type=file]")
+  const invalidFilePath = path.resolve(__dirname, "../public/alpine-3.9.2.json")
+  await fileInput.setInputFiles(invalidFilePath)
+
+  await verifyTableResult(page)
+})