feat: Added Playwright testing CI

.github/workflows/test.yml

@@ -0,0 +1,61 @@
+name: E2E Testing
+
+on:
+  push:
+    branches: main
+  pull_request:
+    branches: main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install browser binaries
+        run: npx playwright install --with-deps
+
+      - name: Start the dev server and Playwright testing
+        env:
+          NEXT_PUBLIC_ENVIRONMENT_ID: ${{secrets.NEXT_PUBLIC_ENVIRONMENT_ID}}
+          NEXT_PUBLIC_FLAGSMITH_API: ${{secrets.NEXT_PUBLIC_FLAGSMITH_API}}
+          NEXT_PUBLIC_SOCKET_URL: ${{secrets.NEXT_PUBLIC_SOCKET_URL}}
+          NEXT_PUBLIC_BASE_URL: ${{secrets.NEXT_PUBLIC_BASE_URL}}
+          NEXT_PUBLIC_USER_SERVICE_APP_ID: ${{secrets.NEXT_PUBLIC_USER_SERVICE_APP_ID}}
+          NEXT_PUBLIC_JWKS_URI: ${{secrets.NEXT_PUBLIC_JWKS_URI}}
+          NEXT_PUBLIC_OTP_BASE_URL: ${{secrets.NEXT_PUBLIC_OTP_BASE_URL}}
+          NEXT_PUBLIC_FIREBASE_API_KEY: ${{secrets.NEXT_PUBLIC_FIREBASE_API_KEY}}
+          NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN}}
+          NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID}}
+          NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET}}
+          NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID}}
+          NEXT_PUBLIC_FIREBASE_APP_ID: ${{secrets.NEXT_PUBLIC_FIREBASE_APP_ID}}
+          NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID}}
+          NEXT_PUBLIC_FCM_VAPID_KEY: ${{secrets.NEXT_PUBLIC_FCM_VAPID_KEY}}
+          NEXT_PUBLIC_FUS_APP_ID: ${{secrets.NEXT_PUBLIC_FUS_APP_ID}}
+          NEXT_PUBLIC_FUS_URL: ${{secrets.NEXT_PUBLIC_FUS_URL}}
+          NEXT_PUBLIC_FUS_AUTH: ${{secrets.NEXT_PUBLIC_FUS_AUTH}}
+          NEXT_PUBLIC_DHRUVA_AUTH: ${{secrets.NEXT_PUBLIC_DHRUVA_AUTH}}
+          NEXT_PUBLIC_TRANSLITERATION_MODELID: ${{secrets.NEXT_PUBLIC_TRANSLITERATION_MODELID}}
+        run: npm run dev & sleep 65 && npm run e2e:test
+      - name: Uploading Test Video (can be downloaded from Summary)
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: Test Video
+          path: test-results
+          retention-days: 2

apps/amakrushi/README.md

@@ -1,7 +1,6 @@
 # Unified Communication Interface 
 [![ci](https://github.com/samagra-comms/uci-web-channel/actions/workflows/ci.yml/badge.svg)](https://github.com/samagra-comms/uci-web-channel/actions/workflows/ci.yml)
 [![badges](https://github.com/samagra-comms/uci-web-channel/actions/workflows/badges.yml/badge.svg)](https://github.com/samagra-comms/uci-web-channel/actions/workflows/badges.yml)
-![cypress version](https://img.shields.io/badge/cypress-9.7.0-brightgreen)
 
 ## About UCI :open_book:
 

apps/amakrushi/package.json

@@ -9,13 +9,13 @@
     "lint": "next lint",
     "analyze": "cross-env ANALYZE=true next build",
     "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
-    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
+    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
+    "e2e:test": "npx playwright test"
   },
   "dependencies": {
     "@chakra-ui/react": "^1.8.8",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@magicbell/magicbell-react": "^8.5.3",
     "@material-ui/core": "^4.12.4",
     "@next/bundle-analyzer": "^13.3.0",
     "@storybook/react": "^6.5.9",
@@ -55,8 +55,7 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
-    "@cypress/react": "^5.12.5",
-    "@cypress/webpack-dev-server": "^1.8.4",
+    "@playwright/test": "^1.35.0",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-essentials": "^6.4.19",
     "@storybook/addon-interactions": "^6.4.19",
@@ -73,7 +72,6 @@
     "@types/react-dom": "^18.0.5",
     "@types/underscore": "^1.11.4",
     "@types/uuid": "^9.0.1",
-    "cypress": "^9.7.0",
     "dotenv-cli": "^7.2.1",
     "eslint": "8.18.0",
     "eslint-config-next": "12.1.6",

apps/amakrushi/playwright.config.ts

@@ -0,0 +1,12 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: './src/tests/e2e',
+  outputDir: '../../test-results',
+  use: {
+    video: 'on',
+    baseURL: 'http://localhost:3000',
+  },
+};
+
+export default config;

apps/amakrushi/src/components/LoginPage/LoginPage.tsx

@@ -68,7 +68,7 @@ const LoginPage: React.FC = () => {
 
         <form onSubmit={(event) => event?.preventDefault()}>
           <div className={styles.container}>
-            <NumberInput style={{ margin: '5vh auto 0px auto', width: '100%' }}>
+            <NumberInput id='mobile-number-input' style={{ margin: '5vh auto 0px auto', width: '100%' }}>
               <NumberInputField
                 height="45px"
                 padding="18px 16px"
@@ -95,7 +95,7 @@ const LoginPage: React.FC = () => {
         >
           {t("message.register_message")}
         </div> */}
-            <button className={styles.submitButton} onClick={handleOTPPage} disabled={isButtonDisabled}>
+            <button id='login-continue-button' className={styles.submitButton} onClick={handleOTPPage} disabled={isButtonDisabled}>
               {t('label.continue')}
             </button>
           </div>

apps/amakrushi/src/tests/e2e/login.spec.ts

@@ -0,0 +1,74 @@
+import { test, expect } from '@playwright/test';
+
+// This code will run before each test
+test.beforeEach(async ({ page }) => {
+  // Navigate to the login page
+  await page.goto('http://localhost:3000');
+  // Wait for the page title to load
+  await page.waitForLoadState('networkidle');
+  await page.waitForFunction(() => document.title === 'ଆମ କୃଷି');
+});
+
+test('Login Page - Mobile input field', async ({ page }) => {
+  console.log('1) Running test: Login Page - Mobile input field');
+  // Find the mobile number input field
+  const mobileNumberInput = await page.$('#mobile-number-input');
+  expect(mobileNumberInput).not.toBeNull(); // Assert that the input field exists
+
+  if (mobileNumberInput) {
+    console.log('Mobile input field found successfully! ✅ ');
+    const inputPlaceholder = await mobileNumberInput.getAttribute(
+      'placeholder'
+    );
+    expect(inputPlaceholder).toBe('ମୋବାଇଲ୍ ନମ୍ବର ପ୍ରବେଶ କରନ୍ତୁ |');
+    console.log(
+      'Mobile input field placeholder text matched successfully! ✅ '
+    );
+  } else {
+    throw new Error('Mobile number input field not found.');
+  }
+});
+
+test('Login Page - Less than 10 digits', async ({ page }) => {
+  console.log('2) Running test: Login Page - Less than 10 digits');
+  // Find the mobile number input field
+  const mobileNumberInput = await page.$('#mobile-number-input');
+  expect(mobileNumberInput).not.toBeNull(); // Assert that the input field exists
+
+  if (mobileNumberInput) {
+    // Enter less than 10 digits in the input field and click continue
+    await mobileNumberInput.fill('123456789');
+    const continueButton = await page.$('#login-continue-button');
+    expect(await continueButton?.innerText()).toBe('ଜାରି ରଖ');
+    await continueButton?.click();
+
+    // Verify the URL remains same after clicking continue
+    const currentURL = page.url();
+    expect(currentURL).toBe('http://localhost:3000/login');
+    console.log('Did not send OTP on entering less than 10 digits! ✅ ');
+  } else {
+    throw new Error('Mobile number input field not found.');
+  }
+});
+
+test('Login Page - Send OTP', async ({ page }) => {
+  console.log('3) Running test: Login Page - Send OTP');
+  // Find the mobile number input field
+  const mobileNumberInput = await page.$('#mobile-number-input');
+  expect(mobileNumberInput).not.toBeNull(); // Assert that the input field exists
+
+  if (mobileNumberInput) {
+    console.log('Running test: Login Page - Send OTP');
+    // Enter exactly 10 digits in the input field and click continue
+    await mobileNumberInput.fill('9034350533');
+    const continueButton = await page.$('#login-continue-button');
+    await continueButton?.click();
+
+    // Verify the URL after clicking continue
+    const otpURL = new URL('http://localhost:3000/otp?state=9034350533');
+    await page.waitForURL((url) => url.href.startsWith(otpURL.href));
+    console.log('Successfully sent OTP on entering 10 digits! ✅ ');
+  } else {
+    throw new Error('Mobile number input field not found.');
+  }
+});