Add Playwright scenario to test keycloak login

test/scenarios/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/

test/scenarios/README.md

@@ -0,0 +1,33 @@
+# OpenID Keycloak scenarios
+
+This allow to run tests to validate SSO login using [Playwright](https://playwright.dev/).
+This import the [.env](../oidc/.env) (which need to be created using [.env.temmplate](../oidc/.env.temmplate)) file for user credentials.
+
+## Install
+
+```bash
+npm install
+```
+
+## Usage
+
+To run all the tests:
+
+```bash
+npx playwright test
+```
+
+To access the ui to easily run test individually and debug if needed:
+
+```bash
+npx playwright test --ui
+```
+
+## Writing scenario
+
+When creating new scenario use the recorder to more easily identify elements (in general try to rely on visible hint to identify elements and not hidden ids).
+This does not start the server, you will need to run `docker-compose up` in a different terminal.
+
+```bash
+npx playwright codegen "http://127.0.0.1:8000"
+```

test/scenarios/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "scenarios",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.38.0",
+    "@types/node": "^20.6.1",
+    "dotenv": "^16.3.1",
+    "dotenv-expand": "^10.0.0"
+  }
+}

test/scenarios/playwright.config.ts

@@ -0,0 +1,48 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './.',
+  /* Run tests in files in parallel */
+  fullyParallel: false,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  timeout: 10 * 1000,
+  /* 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:8000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+      command: 'cd ../oidc && docker-compose --profile VaultWarden up --force-recreate -V',
+      url: 'http://127.0.0.1:8080/realms/test',
+      reuseExistingServer: !process.env.CI,
+      timeout: 300 * 1000
+  }
+});

test/scenarios/tests/login.spec.ts

@@ -0,0 +1,55 @@
+import { test, expect } from '@playwright/test';
+import dotenv from 'dotenv';
+import dotenvExpand from 'dotenv-expand';
+
+var myEnv = dotenv.config({ path: '../oidc/.env' })
+dotenvExpand.expand(myEnv)
+
+test('SSO first login', async ({ page }) => {
+  // Landing page
+  await page.goto('/');
+  await page.getByLabel(/Email address/).fill(process.env.TEST_USER_MAIL);
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Unlock page
+  await page.getByRole('link', { name: /Enterprise single sign-on/ }).click();
+
+  // Keycloak Login page
+  await expect(page.getByRole('heading', { name: 'Sign in to your account' })).toBeVisible();
+  await page.getByLabel(/Username/).fill(process.env.TEST_USER);
+  await page.getByLabel('Password').fill(process.env.TEST_USER_PASSWORD);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  // Back to Vault create account
+  await expect(page).toHaveTitle(/Set master password/);
+  await page.getByLabel('Master password', { exact: true }).fill('Master password');
+  await page.getByLabel('Re-type master password').fill('Master password');
+  await page.getByRole('button', { name: 'Submit' }).click();
+
+  // We are now in the default vault page
+  await expect(page).toHaveTitle(/Vaults/);
+});
+
+test('SSO second login', async ({ page }) => {
+  // Landing page
+  await page.goto('/');
+  await page.getByLabel(/Email address/).fill(process.env.TEST_USER_MAIL);
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Unlock page
+  await page.getByRole('link', { name: /Enterprise single sign-on/ }).click();
+
+  // Keycloak Login page
+  await expect(page.getByRole('heading', { name: 'Sign in to your account' })).toBeVisible();
+  await page.getByLabel(/Username/).fill(process.env.TEST_USER);
+  await page.getByLabel('Password').fill(process.env.TEST_USER_PASSWORD);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  // Back to Vault unlock page
+  await expect(page).toHaveTitle('Vaultwarden Web');
+  await page.getByLabel('Master password').fill('Master password');
+  await page.getByRole('button', { name: 'Unlock' }).click();
+
+  // We are now in the default vault page
+  await expect(page).toHaveTitle(/Vaults/);
+});