VLM integration via Ollama added

.github/workflows/playwright.yml

@@ -7,29 +7,22 @@ on:
 
 jobs:
   test:
-    timeout-minutes: 5
+    timeout-minutes: 10
     runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright:v1.38.0-focal
     steps:
       - uses: actions/checkout@v3
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         run: npm ci
 
       - name: Run Playwright tests
-        run: npx playwright test
+        run: npm run test:pw:docker
         env:
-          VRT_APIURL: "https://visual-regression-tracker.com:4200"
-          VRT_PROJECT: "VRT"
-          VRT_ENABLESOFTASSERT: false
-          VRT_APIKEY: ${{ secrets.VRT_API_KEY }}
-          VRT_BRANCHNAME: ${{ github.head_ref || github.ref_name }}
-          VRT_CIBUILDID: "Github run_id:  ${{ github.run_id }}"
+          CI: true
 
       - uses: actions/upload-artifact@v4
         if: always()

.github/workflows/workflow.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
 
       - name: Install npm dependencies
         run: npm ci

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

Dockerfile

@@ -1,6 +1,6 @@
 ### STAGE 1: Build ###
 # This image is around 50 megabytes
-FROM node:18-alpine3.18 AS builder
+FROM node:20-alpine AS builder
 
 # Create app directory
 WORKDIR /app

README.md

@@ -11,6 +11,22 @@
 
 The testing related `.spec.tsx` files are used with Playwright for browser tests, and the `.test.tsx` files with Jest for unit tests.
 
+## Running Tests
+
+### Unit Tests (Jest)
+Run Jest unit tests:
+```bash
+npm run test
+```
+
+### Integration Tests (Playwright)
+
+#### Local Testing
+Run Playwright tests locally (requires local dev server):
+```bash
+npm run test:pw:local
+```
+
 ## Local HTTPS config
 
 - Generate keys [here](https://www.selfsignedcertificate.com/)

integration_tests/fixtures/index.ts

@@ -1,13 +1,11 @@
 import { test as base } from "@playwright/test";
-import { PlaywrightVisualRegressionTracker } from "@visual-regression-tracker/agent-playwright";
 import { LoginPage, ProfilePage, ProjectListPage, ProjectPage } from "pages";
 import { RegisterPage } from "pages/RegisterPage";
 import { TestVariationDetailsPage } from "pages/TestVariationDetailsPage";
 import { TestVariationListPage } from "pages/TestVariationListPage";
 import { UserListPage } from "pages/UserListPage";
 
 type Fixtures = {
-  vrt: PlaywrightVisualRegressionTracker;
   loginPage: LoginPage;
   registerPage: RegisterPage;
   openProjectPage: (
@@ -28,13 +26,6 @@ type Fixtures = {
 };
 
 export const test = base.extend<Fixtures>({
-  vrt: async ({ browserName }, use) => {
-    const vrt = new PlaywrightVisualRegressionTracker(browserName);
-
-    await vrt.start();
-    await use(vrt);
-    await vrt.stop();
-  },
   loginPage: [
     async ({ page }, use) => {
       await page.goto("/");

integration_tests/test/login.spec.ts

@@ -1,8 +1,8 @@
 import { test } from "fixtures";
 import { expect } from "@playwright/test";
 
-test("renders", async ({ page, vrt }) => {
-  await vrt.trackPage(page, "Login page");
+test("renders", async ({ page }) => {
+  await expect(page).toHaveScreenshot("login-page.png");
 });
 
 test("can login", async ({ loginPage }) => {

integration_tests/test/profile.spec.ts

@@ -1,3 +1,4 @@
+import { expect } from "@playwright/test";
 import { test } from "fixtures";
 import { TEST_PROJECT } from "~client/_test/test.data.helper";
 import { mockGetProjects } from "utils/mocks";
@@ -9,6 +10,6 @@ test.beforeEach(async ({ page }) => {
 });
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-test("renders", async ({ profilePage, page, vrt }) => {
-  await vrt.trackPage(page, "Profile page");
+test("renders", async ({ profilePage, page }) => {
+  await expect(page).toHaveScreenshot("profile-page.png");
 });

integration_tests/test/projec.spec.ts

@@ -41,15 +41,15 @@ test.beforeEach(async ({ page }) => {
   await mockImage(page, "image.png");
 });
 
-test("renders", async ({ openProjectPage, page, vrt }) => {
+test("renders", async ({ openProjectPage, page }) => {
   const projectPage = await openProjectPage(project.id);
   await projectPage.buildList.getBuildLocator(TEST_BUILD_FAILED.number).click();
 
-  await vrt.trackPage(page, "Project page. Test run list");
+  await expect(page).toHaveScreenshot("project-page-test-run-list.png");
 
   await projectPage.testRunList.getRow(TEST_UNRESOLVED.id).click();
 
-  await vrt.trackPage(page, "Project page. Test run details");
+  await expect(page).toHaveScreenshot("project-page-test-run-details.png");
 });
 
 test("can download images", async ({ openProjectPage, page }) => {

integration_tests/test/projectList.spec.ts

@@ -10,8 +10,8 @@ test.beforeEach(async ({ page }) => {
 });
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-test("renders", async ({ projectListPage, page, vrt }) => {
-  await vrt.trackPage(page, "Projects list page");
+test("renders", async ({ projectListPage, page }) => {
+  await expect(page).toHaveScreenshot("projects-list-page.png");
 });
 
 test("can delete project", async ({ projectListPage, page }) => {

integration_tests/test/register.spec.ts

@@ -2,8 +2,8 @@ import { test } from "fixtures";
 import { expect } from "@playwright/test";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-test("renders", async ({ registerPage, page, vrt }) => {
-  await vrt.trackPage(page, "Register page");
+test("renders", async ({ registerPage, page }) => {
+  await expect(page).toHaveScreenshot("register-page.png");
 });
 
 test("can register", async ({ registerPage }) => {

integration_tests/test/testVariationDetails.spec.ts

@@ -1,3 +1,4 @@
+import { expect } from "@playwright/test";
 import { test } from "fixtures";
 import {
   mockGetProjects,
@@ -16,10 +17,10 @@ test.beforeEach(async ({ page }) => {
   await mockImage(page, "baseline2.png");
 });
 
-test("renders", async ({ openTestVariationDetailsPage, page, vrt }) => {
+test("renders", async ({ openTestVariationDetailsPage, page }) => {
   await openTestVariationDetailsPage(TEST_VARIATION_ONE.id);
 
-  await vrt.trackPage(page, "TestVariationDetails page", {
-    screenshotOptions: { fullPage: true },
+  await expect(page).toHaveScreenshot("test-variation-details-page.png", {
+    fullPage: true,
   });
 });

integration_tests/test/testVariationList.spec.ts

@@ -1,3 +1,4 @@
+import { expect } from "@playwright/test";
 import { test } from "fixtures";
 import { mockGetProjects, mockGetTestVariations, mockImage } from "utils/mocks";
 import {
@@ -16,8 +17,8 @@ test.beforeEach(async ({ page }) => {
   await mockImage(page, "baseline2.png");
 });
 
-test("renders", async ({ openTestVariationListPage, page, vrt }) => {
+test("renders", async ({ openTestVariationListPage, page }) => {
   await openTestVariationListPage(TEST_PROJECT.id);
 
-  await vrt.trackPage(page, "TestVariationList page");
+  await expect(page).toHaveScreenshot("test-variation-list-page.png");
 });

integration_tests/test/userList.spec.ts

@@ -15,8 +15,8 @@ test.beforeEach(async ({ page }) => {
 });
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-test("renders", async ({ userListPage, page, vrt }) => {
-  await vrt.trackPage(page, "User list page");
+test("renders", async ({ userListPage, page }) => {
+  await expect(page).toHaveScreenshot("user-list-page.png");
 });
 
 const assignRoleCases: [User, keyof typeof Role][] = [