Playwright added

.eslintrc.cjs

@@ -6,7 +6,6 @@ module.exports = {
     "plugin:import/recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:cypress/recommended",
     // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
     // Make sure it's always the last config, so it gets the chance to override other configs.
     "eslint-config-prettier",
@@ -18,14 +17,13 @@ module.exports = {
     },
     // Tells eslint how to resolve imports
     "import/resolver": {
-      node: {
-        paths: ["src"],
-        extensions: [".js", ".jsx", ".ts", ".tsx"],
+      typescript: {
+        project: ["tsconfig.json", "integration_tests/tsconfig.json"],
       },
     },
   },
   rules: {
     // Add your own rules here to override ones from the extended configs.
-    "@typescript-eslint/no-non-null-assertion": "warn"
+    "@typescript-eslint/no-non-null-assertion": "warn",
   },
 };

.github/workflows/playwright.yml

@@ -0,0 +1,43 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  test:
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.36.2-focal
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm ci
+
+      - id: get-branch-name
+        run: echo "::set-output name=branch_name::$(git symbolic-ref --short HEAD)"
+        shell: bash
+
+      - name: Run Playwright tests
+        run: npx playwright test
+        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 || steps.get-branch-name.outputs.branch_name }}
+          VRT_CIBUILDID: "Github run_id:  ${{ github.run_id }}"
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/workflow.yml

@@ -23,20 +23,3 @@ jobs:
 
       - name: Unit tests
         run: npm test -- --coverage
-
-      - id: get-branch-name
-        run: echo "::set-output name=branch_name::$(git symbolic-ref --short HEAD)"
-        shell: bash
-
-      # - name: Run Component tests 🧪
-      #   uses: cypress-io/github-action@v2
-      #   with:
-      #     command: npm run test:cy
-      #   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 || steps.get-branch-name.outputs.branch_name }}
-      #     VRT_CIBUILDID: "Github run_id:  ${{ github.run_id }}"
-      #     CHOKIDAR_USEPOLLING: 1

.gitignore

@@ -9,13 +9,11 @@
 vrt.json
 .nyc_output/
 /coverage
-/cypress/screenshots
 
 # production
 /secrets
 /build
 env-config.js
-cypress.env.json
 
 # misc
 .idea/
@@ -28,3 +26,6 @@ cypress.env.json
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/test-results/
+/playwright-report/
+/playwright/.cache/

README.md

@@ -9,11 +9,11 @@
 - Update `.env`
 - `npm run start`
 
-The testing related `.spec.tsx` files are used with Cypress for browser tests, and the `.test.tsx` files with Jest for unit tests.
+The testing related `.spec.tsx` files are used with Playwright for browser tests, and the `.test.tsx` files with Jest for unit tests.
 
 ## Image download
- 
- - If you want to use image download feature in test runs, you have to have the files in backend imageUploads folder to a folder in this project under public/static/imageUploads. This can be achieved via manual copy, docker volume mapping to this project folder etc.
+
+- If you want to use image download feature in test runs, you have to have the files in backend imageUploads folder to a folder in this project under public/static/imageUploads. This can be achieved via manual copy, docker volume mapping to this project folder etc.
 
 ## Local HTTPS config
 

integration_tests/fixtures/index.ts

@@ -0,0 +1,104 @@
+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: (id: string) => Promise<ProjectPage>;
+  openTestVariationListPage: (
+    projectId: string
+  ) => Promise<TestVariationListPage>;
+  openTestVariationDetailsPage: (
+    id: string
+  ) => Promise<TestVariationDetailsPage>;
+  projectListPage: ProjectListPage;
+  profilePage: ProfilePage;
+  userListPage: UserListPage;
+  authUser: void;
+};
+
+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("/");
+
+      await use(new LoginPage(page));
+    },
+    { auto: true },
+  ],
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  projectListPage: async ({ page, authUser }, use) => {
+    await page.goto("/projects");
+
+    await use(new ProjectListPage(page));
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  profilePage: async ({ page, authUser }, use) => {
+    await page.goto("/profile");
+
+    await use(new ProfilePage(page));
+  },
+  registerPage: async ({ page }, use) => {
+    await page.goto("/register");
+
+    await use(new RegisterPage(page));
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  userListPage: async ({ page, authUser }, use) => {
+    await page.goto("/users");
+
+    await use(new UserListPage(page));
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  openProjectPage: async ({ page, authUser }, use) => {
+    await use(async (id) => {
+      await page.goto(`${id}`);
+      return new ProjectPage(page);
+    });
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  openTestVariationListPage: async ({ page, authUser }, use) => {
+    await use(async (projectId) => {
+      await page.goto(`/variations/${projectId}`);
+      return new TestVariationListPage(page);
+    });
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  openTestVariationDetailsPage: async ({ page, authUser }, use) => {
+    await use(async (id) => {
+      await page.goto(`/variations/details/${id}`);
+      return new TestVariationDetailsPage(page);
+    });
+  },
+  authUser: async ({ page }, use) => {
+    await page.evaluate(() =>
+      window.localStorage.setItem(
+        "user",
+        JSON.stringify({
+          id: "00b428bf-9b4d-487f-9883-0dc5ec9403d3",
+          email: "visual-regression-tracker@example.com",
+          firstName: "fname",
+          lastName: "lname",
+          apiKey: "ASJDHGAKJSDGASD",
+          role: "admin",
+          token: "eyJsgOE8Bw2bFwhZAugRRGm8U",
+        })
+      )
+    );
+
+    await use();
+  },
+});

integration_tests/pages/BasePage.ts

@@ -0,0 +1,14 @@
+import { Page } from "@playwright/test";
+import { Modal } from "./Modal";
+import { Notification } from "./Notification";
+
+export abstract class BasePage {
+  modal: Modal;
+  notification: Notification;
+
+  constructor(public page: Page) {
+    this.page = page;
+    this.modal = new Modal(page);
+    this.notification = new Notification(page);
+  }
+}

integration_tests/pages/LoginPage.ts

@@ -0,0 +1,7 @@
+import { BasePage } from "./BasePage";
+
+export class LoginPage extends BasePage {
+  email = this.page.getByTestId("email");
+  password = this.page.getByTestId("password");
+  loginBtn = this.page.getByTestId("loginBtn");
+}

integration_tests/pages/Modal.ts

@@ -0,0 +1,9 @@
+import { Page } from "@playwright/test";
+
+export class Modal {
+  confirmBtn = this.page.getByTestId("submitButton");
+
+  constructor(public page: Page) {
+    this.page = page;
+  }
+}

integration_tests/pages/Notification.ts

@@ -0,0 +1,9 @@
+import { Page } from "@playwright/test";
+
+export class Notification {
+  message = this.page.locator("#notistack-snackbar");
+
+  constructor(public page: Page) {
+    this.page = page;
+  }
+}

integration_tests/pages/ProfilePage.ts

@@ -0,0 +1,3 @@
+import { BasePage } from "./BasePage";
+
+export class ProfilePage extends BasePage {}

integration_tests/pages/ProjectListPage.ts

@@ -0,0 +1,6 @@
+import { BasePage } from "./BasePage";
+
+export class ProjectListPage extends BasePage {
+  projects = this.page.locator("#projectlist-1");
+  deleteBtn = this.page.getByTestId("delete");
+}

integration_tests/pages/ProjectPage.ts

@@ -0,0 +1,14 @@
+import { BasePage } from "./BasePage";
+
+export class ProjectPage extends BasePage {
+  buildList = this.page.locator("#build-list");
+  testRunList = this.page.locator("#test-run-list");
+
+  getBuildLocator(number: number) {
+    return this.buildList.getByText(`#${number}`);
+  }
+
+  getTestRunLocator(name: string) {
+    return this.testRunList.getByText(name);
+  }
+}