feat(playwright): setup and config

.github/workflows/playwright.yml

@@ -0,0 +1,33 @@
+name: Playwright Tests
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - 'frontend/**'
+      - '.github/workflows/playwright.yml'
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn playwright-e2e
+      env:
+        PLAYWRIGHT_TEST_BASE_URL: "https://dev.altinn.studio"
+        PLAYWRIGHT_DESIGNER_APP_NAME: "auto-designer-app-dev"
+        CI: true
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -411,3 +411,8 @@ stats.csv
 .vscode/settings.json
 .vscode/tasks.json
 .vscode/launch.json
+/test-results/
+/blob-report/
+/playwright/.cache/
+/frontend/testing/playwright/playwright-report
+.playwright/

frontend/testing/playwright/README.md

@@ -0,0 +1 @@
+# TODO WRITE DOCS!

frontend/testing/playwright/helpers/BasePage.ts

@@ -0,0 +1,16 @@
+import { Routes } from './Routes';
+import { Page } from '@playwright/test';
+import { RouterRoute } from './RouterRoute';
+import { Environment } from './StudioEnvironment';
+
+export class BasePage extends RouterRoute {
+  public readonly _page: Page;
+
+  constructor(
+    private page: Page,
+    private environment: Environment,
+  ) {
+    super(environment);
+    this._page = this.page;
+  }
+}

frontend/testing/playwright/helpers/RouterRoute.ts

@@ -0,0 +1,36 @@
+import { Environment, StudioEnvironment } from './StudioEnvironment';
+
+type SupportedRoutes = 'altinnLoginPage' | 'dashboard' | 'dashboardCreateApp' | 'editorOverview';
+
+type RouterRoutes = Record<SupportedRoutes, string>;
+
+export class RouterRoute extends StudioEnvironment {
+  private readonly routerRoutes: RouterRoutes = {
+    altinnLoginPage: '/',
+    dashboard: '/dashboard',
+    dashboardCreateApp: '/dashboard/self/new',
+    editorOverview: `/editor/{{org}}/{{app}}/overview`,
+  };
+
+  constructor(environment: Environment) {
+    super(environment);
+  }
+
+  public getRoute(route: SupportedRoutes): string {
+    const routerRoute: string = this.routerRoutes[route];
+
+    if (this.includesOrgAndApp(routerRoute)) {
+      return this.replaceOrgAndMap(routerRoute);
+    }
+
+    return this.routerRoutes[route];
+  }
+
+  private replaceOrgAndMap(route: string): string {
+    return route.replace('{{org}}', this.org).replace('{{app}}', this.app);
+  }
+
+  private includesOrgAndApp(route: string): boolean {
+    return route.includes('{{org}}') || route.includes('{{app}}');
+  }
+}

frontend/testing/playwright/helpers/StudioEnvironment.ts

@@ -0,0 +1,15 @@
+export type Environment = {
+  org: string;
+  app: string;
+};
+
+export class StudioEnvironment {
+  public readonly org: string;
+  public readonly app: string;
+  public readonly designerAppName: string;
+
+  constructor(private environment: Environment) {
+    this.org = this.environment?.org ?? process.env.PLAYWRIGHT_USER;
+    this.app = this.environment?.app ?? process.env.PLAYWRIGHT_DESIGNER_APP_NAME;
+  }
+}

frontend/testing/playwright/integration/auth.setup.ts

@@ -0,0 +1,15 @@
+import { test as setup } from '@playwright/test';
+import { LoginPage } from "../pages/LoginPage";
+
+
+setup('authenticate user', async ({page}) => {
+    const loginPage = new LoginPage(page);
+
+    await loginPage.goToAltinnLoginPage();
+    await loginPage.goToGiteaLoginPage();
+    await loginPage.writeUsername(process.env.PLAYWRIGHT_USER);
+    await loginPage.writePassword(process.env.PLAYWRIGHT_PASS);
+    await loginPage.clickLoginButton();
+    await loginPage.confirmSuccessfulLogin();
+    await loginPage.addSessionToSharableStorage();
+})

frontend/testing/playwright/integration/dashboard.spec.ts

@@ -0,0 +1,13 @@
+import { test } from '@playwright/test';
+import { DashboardPage } from '../pages/DashboardPage';
+
+test('create app', async ({ page }): Promise<void> => {
+  const dashboardPage = new DashboardPage(page);
+
+  await dashboardPage.goToDashboard();
+  await dashboardPage.clickOnCreateAppLink();
+  await dashboardPage.confirmNavigationToCreateAppForm();
+  await dashboardPage.writeAppName(app);
+  await dashboardPage.clickOnCreateAppButton();
+  await dashboardPage.verifyCreateAppIsSuccessful();
+});

frontend/testing/playwright/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "playwright-studio",
+  "private": true,
+  "version": "1.0.0",
+  "packageManager": "yarn@4.0.2",
+  "devDependencies": {
+    "@playwright/test": "^1.40.1"
+  },
+  "scripts": {
+    "test:all": "playwright test --config ./playwright.config.ts"
+  }
+}

frontend/testing/playwright/pages/DashboardPage.ts

@@ -0,0 +1,33 @@
+import { BasePage } from '../helpers/BasePage';
+import { Page } from '@playwright/test';
+
+export class DashboardPage extends BasePage {
+  constructor(page: Page) {
+    super(page);
+  }
+
+  public async goToDashboard(): Promise<void> {
+    await this._page.goto(this.getRoute('dashboard'));
+    await this._page.waitForURL(this.getRoute('dashboard'));
+  }
+
+  public async clickOnCreateAppLink(): Promise<void> {
+    await this._page.getByRole('link', { name: 'Opprett ny applikasjon' }).click();
+  }
+
+  public async confirmNavigationToCreateAppForm(): Promise<void> {
+    await this._page.waitForURL(this.getRoute('dashboardCreateApp'));
+  }
+
+  public async writeAppName(appName: string): Promise<void> {
+    await this._page.getByLabel('Navn').fill(appName);
+  }
+
+  public async clickOnCreateAppButton(): Promise<void> {
+    await this._page.getByRole('button', { name: 'Opprett applikasjon' }).click();
+  }
+
+  public async verifyCreateAppIsSuccessful(): Promise<void> {
+    await this._page.waitForURL(this.getRoute('editorOverview'));
+  }
+}

frontend/testing/playwright/pages/LoginPage.ts

@@ -0,0 +1,38 @@
+import { Page } from '@playwright/test';
+import { BasePage } from '../helpers/BasePage';
+
+export class LoginPage extends BasePage {
+  private readonly _authStorageFile: string = '.playwright/auth/user.json';
+
+  constructor(page: Page) {
+    super(page);
+  }
+
+  public async goToAltinnLoginPage(): Promise<void> {
+    await this._page.goto(this.getRoute('altinnLoginPage'));
+  }
+
+  public async goToGiteaLoginPage(): Promise<void> {
+    await this._page.getByRole('button', { name: 'Logg inn' }).click();
+  }
+
+  public async writeUsername(username: string): Promise<void> {
+    return await this._page.getByLabel('Username or Email Address').fill(username);
+  }
+
+  public async writePassword(password: string): Promise<void> {
+    return await this._page.getByLabel('Password').fill(password);
+  }
+
+  public async clickLoginButton(): Promise<void> {
+    return await this._page.getByRole('button', { name: 'Sign In' }).click();
+  }
+
+  public async confirmSuccessfulLogin(): Promise<void> {
+    return this._page.waitForURL(this.getRoute('dashboard'));
+  }
+
+  public async addSessionToSharableStorage() {
+    return await this._page.context().storageState({ path: this._authStorageFile });
+  }
+}

frontend/testing/playwright/playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from '@playwright/test';
+import { config } from 'dotenv';
+
+config();
+
+export default defineConfig({
+  testDir: './integration',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    trace: 'on-first-retry'
+  },
+
+  projects: [
+    { name: "setup", testMatch: /.*\.setup\.ts/ },
+    {
+      name: 'chromium',
+      dependencies: ['setup'],
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL,
+        storageState: '.playwright/auth/user.json',
+        headless: false
+      },
+    },
+  ],
+});

frontend/testing/playwright/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

package.json

@@ -11,8 +11,10 @@
     "@navikt/aksel-icons": "5.9.2",
     "@tanstack/react-query": "5.4.3",
     "@tanstack/react-query-devtools": "5.8.1",
+    "@types/dotenv": "^8.2.0",
     "ajv": "8.12.0",
     "ajv-formats": "2.1.1",
+    "dotenv": "^16.3.1",
     "react-error-boundary": "^4.0.11",
     "react-i18next": "13.3.1",
     "react-router-dom": "6.18.0",
@@ -33,6 +35,7 @@
     "@types/css-modules": "1.0.4",
     "@types/jest": "29.5.7",
     "@types/lodash-es": "4.17.10",
+    "@types/node": "^20.10.3",
     "@types/react": "18.2.34",
     "@types/react-dom": "18.2.14",
     "@types/react-redux": "7.1.28",
@@ -101,7 +104,8 @@
     "syncpack": "npx syncpack fix-mismatches && npx syncpack format && npx syncpack set-semver-ranges",
     "test": "jest --maxWorkers=50% --config=frontend/jest.config.js",
     "test:ci": "jest --ci --coverage --max-workers=2 --cacheDirectory=$(yarn config get cacheFolder) --config=frontend/jest.config.js",
-    "typecheck": "yarn workspaces foreach -A run typecheck"
+    "typecheck": "yarn workspaces foreach -A run typecheck",
+    "playwright:test:all": "yarn workspace playwright-studio test:all"
   },
   "syncpack": {
     "semverRange": ""
@@ -116,6 +120,7 @@
     "frontend/studio-root",
     "frontend/testing/mockend",
     "frontend/testing/cypress",
+    "frontend/testing/playwright",
     "frontend/packages/schema-editor",
     "frontend/packages/schema-model",
     "frontend/packages/shared",