include web-js and web-js-script in e2e tests (#471)

* add projectId to url path in web-js * serve all assets from root * prettier * add nightly test workflow * fix e2e workflows * test out web-js on commitly workflow * test * fix workflow * fix workflow * fix workflow * fix warning * handle block hash * debug * fix passkeys for local tests * reduce flakiness of tests * preserve query string for email link in web-js * don't enforce signup-init as default landing page (to allow auth component to choose login-init in some cases) * add query and hash to every route in web-js * add rewrite rule to vercel web-js * add projectId to path in web-js-script * prettier * run tests only when deployment succeeded * add web-js-script to nightly tests * don't recalculate branch name in nightly tests
corbado · Nov 19, 2024 · 0b942cd · 0b942cd
1 parent d2dbe87
commit 0b942cd
Show file tree

Hide file tree

Showing 21 changed files with 421 additions and 243 deletions.
diff --git a/.github/workflows/deploy-playground.yml b/.github/workflows/deploy-playground.yml
@@ -8,9 +8,7 @@ on:
   pull_request:
   push:
     branches:
-      - main
       - develop
-      - feature-refactor-to-thin-frontend
 
 jobs:
   deploy:

diff --git a/.github/workflows/e2e-test-commitly.yml b/.github/workflows/e2e-test-commitly.yml
@@ -8,6 +8,7 @@ on:
     workflows: ["Deploy Playground Apps to Vercel"]
     types:
       - completed
+    conclusion: success
 
 jobs:
   e2e-tests:

diff --git a/.github/workflows/e2e-test-nightly.yml b/.github/workflows/e2e-test-nightly.yml
@@ -0,0 +1,129 @@
+name: Nightly End-to-End testing check for Playground Apps
+env:
+  BRANCH_NAME_RAW: ${{ github.head_ref || github.ref_name }}
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '42 1 * * *'  # 1:42 AM UTC = 3:42 AM CEST
+
+jobs:
+  prepare:
+    timeout-minutes: 60
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+
+      - name: Get installed Playwright version
+        id: playwright-version
+        run: echo "::set-output name=version::$(yarn why --json @playwright/test | grep -h 'workspace:.' | jq --raw-output '.children[].locator' | sed -e 's/@playwright\/test@.*://')"
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: |
+            ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+        name: List the state of node modules
+        continue-on-error: true
+        run: |
+          cd packages/tests-e2e
+          npm list
+
+      - name: Install Dependencies
+        run: |
+          cd packages/tests-e2e
+          npm install
+
+      - uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: '~/.cache/ms-playwright'
+          key: '${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}'
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: Install Playwright's dependencies
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: |
+          cd packages/tests-e2e
+          npx playwright install --with-deps
+
+      - name: Install and run E2E Test for react
+        run: |
+          cd packages/tests-e2e
+          BRANCH_NAME=$(echo $BRANCH_NAME_RAW | tr '/_' '-')
+          export PLAYWRIGHT_TEST_URL="https://$BRANCH_NAME.react.playground.corbado.io"
+          PLAYWRIGHT_TEST_URL=$PLAYWRIGHT_TEST_URL npx playwright test --config=playwright.config.ui.ts
+        env:
+          PLAYWRIGHT_NUM_CORES: 4
+          PLAYWRIGHT_JWT_TOKEN: ${{ secrets.PLAYWRIGHT_JWT_TOKEN }}
+          PLAYWRIGHT_MICROSOFT_EMAIL: ${{ secrets.PLAYWRIGHT_MICROSOFT_EMAIL }}
+          PLAYWRIGHT_MICROSOFT_PASSWORD: ${{ secrets.PLAYWRIGHT_MICROSOFT_PASSWORD }}
+          GITHUB_RUN_ID: ${{ github.run_id }}
+          SLACK_BOT_USER_OAUTH_TOKEN: ${{ secrets.SLACK_BOT_USER_OAUTH_TOKEN }}
+          GITHUB_BRANCH_NAME: ${{ env.BRANCH_NAME_RAW }}
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report-react
+          path: packages/tests-e2e/playwright-report/
+          retention-days: 30
+
+      - name: Install and run E2E Test for web-js
+        run: |
+          cd packages/tests-e2e
+          BRANCH_NAME=$(echo $BRANCH_NAME_RAW | tr '/_' '-')
+          export PLAYWRIGHT_TEST_URL="https://$BRANCH_NAME.web-js.playground.corbado.io"
+          PLAYWRIGHT_TEST_URL=$PLAYWRIGHT_TEST_URL npx playwright test --config=playwright.config.ui.ts
+        env:
+          PLAYWRIGHT_NUM_CORES: 4
+          PLAYWRIGHT_JWT_TOKEN: ${{ secrets.PLAYWRIGHT_JWT_TOKEN }}
+          PLAYWRIGHT_MICROSOFT_EMAIL: ${{ secrets.PLAYWRIGHT_MICROSOFT_EMAIL }}
+          PLAYWRIGHT_MICROSOFT_PASSWORD: ${{ secrets.PLAYWRIGHT_MICROSOFT_PASSWORD }}
+          GITHUB_RUN_ID: ${{ github.run_id }}
+          SLACK_BOT_USER_OAUTH_TOKEN: ${{ secrets.SLACK_BOT_USER_OAUTH_TOKEN }}
+          GITHUB_BRANCH_NAME: ${{ env.BRANCH_NAME_RAW }}
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report-web-js
+          path: packages/tests-e2e/playwright-report/
+          retention-days: 30
+
+      - name: Install and run E2E Test for web-js-script
+        run: |
+          cd packages/tests-e2e
+          BRANCH_NAME=$(echo $BRANCH_NAME_RAW | tr '/_' '-')
+          export PLAYWRIGHT_TEST_URL="https://$BRANCH_NAME.web-js-script.playground.corbado.io"
+          PLAYWRIGHT_TEST_URL=$PLAYWRIGHT_TEST_URL npx playwright test --config=playwright.config.ui.ts
+        env:
+          PLAYWRIGHT_NUM_CORES: 4
+          PLAYWRIGHT_JWT_TOKEN: ${{ secrets.PLAYWRIGHT_JWT_TOKEN }}
+          PLAYWRIGHT_MICROSOFT_EMAIL: ${{ secrets.PLAYWRIGHT_MICROSOFT_EMAIL }}
+          PLAYWRIGHT_MICROSOFT_PASSWORD: ${{ secrets.PLAYWRIGHT_MICROSOFT_PASSWORD }}
+          GITHUB_RUN_ID: ${{ github.run_id }}
+          SLACK_BOT_USER_OAUTH_TOKEN: ${{ secrets.SLACK_BOT_USER_OAUTH_TOKEN }}
+          GITHUB_BRANCH_NAME: ${{ env.BRANCH_NAME_RAW }}
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report-web-js-script
+          path: packages/tests-e2e/playwright-report/
+          retention-days: 30
diff --git a/packages/tests-e2e/playwright.config.ui.ts b/packages/tests-e2e/playwright.config.ui.ts
@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
 import dotenv from 'dotenv';
 import path from 'path';
 

diff --git a/...s-e2e/src/ui/corbado-auth-component-configs/email-username-verification-at-signup.spec.ts b/...s-e2e/src/ui/corbado-auth-component-configs/email-username-verification-at-signup.spec.ts
@@ -40,6 +40,7 @@ test.describe('tests that focus on these identifiers: email (verification at sig
     await model.expectScreen(ScreenNames.End);
 
     await model.logout();
+    await model.expectScreen(ScreenNames.InitLogin);
 
     // we first try login with email
     await model.loginInit.removePasskeyButton();
@@ -48,6 +49,7 @@ test.describe('tests that focus on these identifiers: email (verification at sig
     await model.expectScreen(ScreenNames.End);
 
     await model.logout();
+    await model.expectScreen(ScreenNames.InitLogin);
 
     // we then try login with username
     await model.loginInit.removePasskeyButton();

diff --git a/packages/tests-e2e/src/ui/corbado-auth-component-configs/email-verification-at-login.spec.ts b/packages/tests-e2e/src/ui/corbado-auth-component-configs/email-verification-at-login.spec.ts
@@ -36,6 +36,7 @@ test.describe('tests that focus on these identifiers: email (verification at log
 
     await model.expectScreen(ScreenNames.End);
     await model.logout();
+    await model.expectScreen(ScreenNames.InitLogin);
 
     await model.passkeyVerify.performAutomaticPasskeyVerification(() => model.loginInit.submitPasskeyButton());
     await model.emailVerify.fillOtpCode(OtpCodeType.Correct);

diff --git a/...ages/tests-e2e/src/ui/corbado-auth-component-configs/email-verification-at-signup.spec.ts b/...ages/tests-e2e/src/ui/corbado-auth-component-configs/email-verification-at-signup.spec.ts
@@ -38,6 +38,7 @@ test.describe('tests that focus on these identifiers: email (verification at sig
 
     await model.expectScreen(ScreenNames.End);
     await model.logout();
+    await model.expectScreen(ScreenNames.InitLogin);
 
     await model.passkeyVerify.performAutomaticPasskeyVerification(() => model.loginInit.submitPasskeyButton());
     await model.expectScreen(ScreenNames.End);

diff --git a/packages/tests-e2e/src/ui/corbado-auth-component-configs/email-verification-none.spec.ts b/packages/tests-e2e/src/ui/corbado-auth-component-configs/email-verification-none.spec.ts
@@ -34,6 +34,7 @@ test.describe('tests that focus on these identifiers: email (verification none)'
 
     await model.expectScreen(ScreenNames.End);
     await model.logout();
+    await model.expectScreen(ScreenNames.InitLogin);
 
     await model.passkeyVerify.performAutomaticPasskeyVerification(() => model.loginInit.submitPasskeyButton());
     await model.expectScreen(ScreenNames.End);

diff --git a/...ages/tests-e2e/src/ui/corbado-auth-component-configs/phone-verification-at-signup.spec.ts b/...ages/tests-e2e/src/ui/corbado-auth-component-configs/phone-verification-at-signup.spec.ts
@@ -37,6 +37,7 @@ test.describe('tests that focus on these identifiers: phone (verification at sig
 
     await model.expectScreen(ScreenNames.End);
     await model.logout();
+    await model.expectScreen(ScreenNames.InitLogin);
 
     await model.passkeyVerify.performAutomaticPasskeyVerification(() => model.loginInit.submitPasskeyButton());
     await model.expectScreen(ScreenNames.End);

diff --git a/packages/tests-e2e/src/ui/corbado-auth-component-configs/username.spec.ts b/packages/tests-e2e/src/ui/corbado-auth-component-configs/username.spec.ts
@@ -28,6 +28,7 @@ test.describe('tests that focus on these identifiers: username', () => {
 
     await model.expectScreen(ScreenNames.End);
     await model.logout();
+    await model.expectScreen(ScreenNames.InitLogin);
 
     await model.passkeyVerify.performAutomaticPasskeyVerification(() => model.loginInit.submitPasskeyButton());
     await model.expectScreen(ScreenNames.End);

diff --git a/packages/tests-e2e/src/utils/developerpanel.ts b/packages/tests-e2e/src/utils/developerpanel.ts
@@ -34,7 +34,7 @@ export const createProjectNew = async () => {
     body: JSON.stringify({
       name,
       allowStaticChallenges: true,
-      webauthnRPID: process.env.CI ? 'playground.corbado.io' : 'playground.corbado.io',
+      webauthnRPID: process.env.CI ? 'playground.corbado.io' : 'localhost',
     }),
   });
   expect(createRes.ok).toBeTruthy();

diff --git a/playground/web-js-script/README.md b/playground/web-js-script/README.md
@@ -6,4 +6,4 @@ This application uses script tag to load Web JS library.
 
 1. create bundler by running `npm run build:bundler:local` on main folder.
 2. install `npm i -g serve`
-3. run `serve` on this folder
+3. run `serve -s .` on this folder
diff --git a/playground/web-js-script/auth.html b/playground/web-js-script/auth.html