Adopting Playwright (#2702)

.github/workflows/jobs.yaml

@@ -1307,3 +1307,70 @@ jobs:
             echo "It is smaller than threshold ($threshold%) value, failed!"
             exit 1
           fi
+
+  playwright:
+    needs:
+      - compile-binary
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install dependencies
+        run: |
+          echo "Install dependencies"
+          cd $GITHUB_WORKSPACE/portal-ui
+          yarn add -D playwright
+          yarn add -D babel-plugin-istanbul
+          yarn add -D nyc
+          yarn add -D react-app-rewired
+          yarn add -D create-react-app
+          yarn init -y
+          yarn add --dev @playwright/test
+          echo "yarn install"
+          yarn install
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - uses: actions/cache@v3
+        name: Console Binary Cache
+        with:
+          path: |
+            ./console
+          key: ${{ runner.os }}-binary-${{ github.run_id }}
+
+      - name: Start Console, front-end app and initialize users/policies
+        run: |
+          (./console server) & (make initialize-permissions)
+
+      - name: Start Browser at port 5005
+        run: |
+          echo "yarn playwright"
+          (cd $GITHUB_WORKSPACE/portal-ui; yarn playwright) & (sleep 120) # To start port 5005 with Istanbul Plugin Injected
+
+      - name: Run Playwright tests
+        run: |
+          echo "Run tests under playwright folder only"
+          cd $GITHUB_WORKSPACE/portal-ui
+          echo "npx playwright test"
+          npx playwright test # To run the tests
+          echo "npx nyc report"
+          npx nyc report # To see report printed in logs as text
+          echo "npx nyc report --reporter=html"
+          npx nyc report --reporter=html # to see report in ./coverage/index.html
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: coverage
+          path: coverage/
+          retention-days: 30