chore(e2e): execute e2e against built app (#511)

.github/workflows/e2e-tests.yml

@@ -13,14 +13,35 @@ jobs:
         shard: [1/3, 2/3, 3/3]
     steps:
       - uses: actions/checkout@v3
+
       - run: corepack enable
+
       - uses: actions/setup-node@v3
         with:
           node-version: 16
           cache: 'pnpm'
+
+      - name: Get Playwright version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(jq -r .dependencies.playwright package.json)" >> "$GITHUB_OUTPUT"
+
       - name: Install dependencies
         run: pnpm install
+
+      - name: Build app
+        run: pnpm build
+
+      - name: Restore Playwright browsers from cache
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}-${{ hashFiles('**/playwright.config.ts') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}-
+            ${{ runner.os }}-playwright-
+
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
+
       - name: Run Playwright tests
         run: pnpm run test:e2e --shard=${{ matrix.shard }}

.gitignore

@@ -31,3 +31,5 @@ coverage
 /test-results/
 /playwright-report/
 /playwright/.cache/
+# Webkit with playwright creates a salt file
+salt

playwright.config.ts

@@ -25,7 +25,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://127.0.0.1:3000',
+    baseURL: 'http://127.0.0.1:5050',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -75,8 +75,8 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'npm run dev',
+    command: 'npm run preview',
-    url: 'http://127.0.0.1:3000',
+    url: 'http://127.0.0.1:5050',
     reuseExistingServer: !process.env.CI,
   },
 });

src/tools/otp-code-generator-and-validator/otp-code-generator.e2e.spec.ts

@@ -2,6 +2,9 @@ import { expect, test } from '@playwright/test';
 
 test.describe('Tool - OTP code generator', () => {
   test.beforeEach(async ({ page }) => {
+    await page.addInitScript(() => {
+      Date.now = () => 1609477200000; // Jan 1, 2021
+    });
     await page.goto('/otp-generator');
   });
 
@@ -18,10 +21,6 @@ test.describe('Tool - OTP code generator', () => {
   });
 
   test('OTP a generated from the provided secret', async ({ page }) => {
-    page.evaluate(() => {
-      Date.now = () => 1609477200000; // Jan 1, 2021
-    });
-
     await page.getByPlaceholder('Paste your TOTP secret...').fill('ITTOOLS');
 
     const previousOtp = await page.getByTestId('previous-otp').innerText();