VLM integration via Ollama added (#369)

* VLM integration via Ollama added

Author: pashidlos

.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/)

env.sh

@@ -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/fixtures/index.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/login.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");
 });