1541: initial cypress to playwright

.github/workflows/pr.yml

@@ -31,13 +31,11 @@ jobs:
           docker compose run --rm node yarn install
           docker compose run --rm node yarn check-coding-standards
 
-  cypress:
-    name: Cypress
+  playwright-tests:
+    name: Playwright
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
-      matrix:
-        browser: ["chrome"]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -48,16 +46,18 @@ jobs:
       - name: Install client
         run: docker compose run node yarn
 
-      - name: Cypress run
-        run: docker compose run cypress run --browser ${{ matrix.browser }}
+      - name: Run playwright
+        run: |
+          docker compose run --rm node yarn install
+          docker compose run --rm playwright npx playwright install
+          docker compose run --rm playwright npx playwright test --retries 3
 
-      - name: Archive screenshots
-        if: ${{ failure() }}
-        uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
+        if: always()
         with:
-          name: cypress-screenshots-${{ matrix.browser }}
-          path: cypress/screenshots
-          retention-days: 7
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
 
   changelog:
     runs-on: ubuntu-latest

.gitignore

@@ -25,10 +25,6 @@ yarn-error.log*
 # Ignore VS-code
 .vscode
 
-# Cypress
-cypress/videos/*
-cypress/screenshots/*
-
 # Temp files
 temp/
 
@@ -38,3 +34,7 @@ json-server/
 public/config.json
 public/access-config.json
 public/release.json
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

docker-compose.yml

@@ -46,18 +46,16 @@ services:
       retries: 3
       start_period: 60s
 
-  cypress:
-    image: cypress/included:9.5.4
+  playwright:
+    # https://playwright.dev/docs/docker
+    # This Playwright version should match the one in `package.json`.
+    image: mcr.microsoft.com/playwright:v1.44.1
+    command: yarn playwright test
     networks:
       - app
-      - frontend
     depends_on:
       - nginx
-    environment:
-      - CYPRESS_VIDEO=false
-      - CYPRESS_baseUrl=http://nginx:8080/admin
     volumes:
-      - .:/e2e
+      - .:/app
       - /tmp/.X11-unix:/tmp/.X11-unix
-    working_dir: /e2e
-    entrypoint: cypress
+    working_dir: /app

e2e/app.spec.js

@@ -0,0 +1,60 @@
+import { test, expect } from "@playwright/test";
+
+test("Basic app runs", async ({ page }) => {
+  await page.goto(
+    "/admin/slide/list?published=all&page=1&order=asc&sort=title"
+  );
+
+  await page.route("**/slides*", async (route) => {
+    const json = {
+      "hydra:member": [
+        {
+          "@id": "/v2/slides/0086TQQC671WHA1S150MMF1Q3T",
+          title: "Title on slide",
+          description:
+            "description",
+          created: "1978-12-11T09:47:36.000Z",
+          modified: "2021-12-09T12:01:33.000Z",
+          modifiedBy: "",
+          createdBy: "",
+          templateInfo: {
+            "@id": "/v2/templates/00MWCNKC4P0X5C0AT70E741E2V",
+          },
+          theme: "",
+          onPlaylists: ["/v2/playlists/00S7ZQK8Y90R351YES1DJN0RKR"],
+          duration: 70592,
+          published: {
+            from: null,
+            to: "1989-08-28T18:14:52.000Z",
+          },
+        },
+      ],
+    };
+    await route.fulfill({ json });
+  });
+  await page.route("**/token", async (route) => {
+    const json = {
+      token: "1",
+      refresh_token: "2",
+      tenants: [
+        {
+          tenantKey: "ABC",
+          title: "ABC Tenant",
+          description: "Description",
+          roles: ["ROLE_ADMIN"],
+        },
+      ],
+      user: {
+        fullname: "John Doe",
+        email: "[email protected]",
+      },
+    };
+    await route.fulfill({ json });
+  });
+
+  await expect(page).toHaveTitle(/OS2Display admin/);
+  await page.getByLabel("Email").fill("[email protected]");
+  await page.getByLabel("Kodeord").fill("password");
+  await page.locator("#login").click();
+  await expect(page.getByText("Title on slide")).toBeVisible();
+});