feat(e2e)!: move from cypress to playwright (#1991)

Signed-off-by: OMPRAKASH MISHRA <omprakashmishra3978@gmail.com>

Author: mishraomp

.github/workflows/.tests.yml

@@ -44,39 +44,44 @@ jobs:
           npm ci
           node src/main.js
 
-  cypress-e2e-tests:
+  e2e-tests:
     name: E2E
+    defaults:
+      run:
+        working-directory: frontend
     runs-on: ubuntu-22.04
+    timeout-minutes: 5
     strategy:
       matrix:
-        browser: [chrome, firefox, edge]
-    timeout-minutes: 5
+        project: [ chromium, Google Chrome, firefox, safari, Microsoft Edge ]
     steps:
       - uses: actions/checkout@v4
-      - id: cache-npm
-        uses: actions/cache@v4
+        name: Checkout
+      - uses: actions/setup-node@v4
+        name: Setup Node
         with:
-          path: ~/.npm
-          key: ${{ runner.os }}-build-cache-node-modules-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-cache-node-modules-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
+          node-version: 20
+          cache: 'npm'
+          cache-dependency-path: frontend/package-lock.json
+      - name: Install dependencies
+        run: |
+          npm ci
+          npx playwright install --with-deps
 
-      - uses: cypress-io/github-action@v6
+      - name: Run Tests
         env:
-          CYPRESS_baseUrl: https://${{ github.event.repository.name }}-${{ inputs.target }}-frontend.${{ env.DOMAIN }}/
-        with:
-          config: pageLoadTimeout=10000
-          working-directory: ./frontend
-          browser: ${{ matrix.browser }}
+          E2E_BASE_URL: https://${{ github.event.repository.name }}-${{ inputs.target }}-frontend.${{ env.DOMAIN }}/
+          CI: 'true'
+        run: |
+          npx playwright test --project="${{ matrix.project }}" --reporter=html
 
       - uses: actions/upload-artifact@v4
-        if: failure()
+        if: ${{ !cancelled() }}
+        name: upload results
         with:
-          name: cypress-screenshots
-          path: ./cypress/screenshots
-          if-no-files-found: ignore # 'warn' or 'error' are also available, defaults to `warn`
+          name: playwright-report-${{ matrix.project }}
+          path: "./frontend/playwright-report" # path from current folder
+          retention-days: 7
 
   load-tests:
     name: Load

frontend/cypress.config.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { baseURL } from '../utils';
+import { Page } from 'playwright';
+
+export const dashboard_page = async (page: Page) => {
+  await page.goto(baseURL);
+  await expect(page.getByRole('img', { name: 'Logo' })).toBeVisible();
+  await expect(page.locator('#root')).toContainText('QuickStart OpenShift');
+  await expect(page.getByText('Employee ID')).toBeVisible();
+  await expect(page.getByText('Employee Name')).toBeVisible();
+  await expect(page.getByText('Employee Email')).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Home' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'About gov.bc.ca' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Disclaimer' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Privacy' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Accessibility' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Copyright' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Contact Us' })).toBeVisible();
+  await page.getByPlaceholder('Search…').click();
+  await page.getByPlaceholder('Search…').fill('john');
+  await expect(page.locator('#root')).toContainText('1–1 of 1');
+};

frontend/cypress/e2e/home-page.cy.ts

@@ -0,0 +1,9 @@
+import { test } from '@playwright/test';
+import { dashboard_page } from './pages/dashboard';
+
+test.describe.parallel('QSOS', () => {
+  test('Dashboard Page', async ({ page }) => {
+    await dashboard_page(page);
+  });
+
+});

frontend/cypress/e2e/user-table.cy.ts

@@ -0,0 +1 @@
+export const baseURL = process.env.E2E_BASE_URL || 'https://quickstart-openshift-test-frontend.apps.silver.devops.gov.bc.ca/';