feat: add Playwright e2e tests

.github/workflows/dotnet-core-master.yml

@@ -173,4 +173,119 @@ jobs:
     - name: Build
       run: dotnet build eFormAPI/Plugins/ItemsPlanning.Pn/ItemsPlanning.Pn.sln
     - name: Unit Tests
-      run: dotnet test --no-restore -c Release -v n eFormAPI/Plugins/ItemsPlanning.Pn/ItemsPlanning.Pn.Test/ItemsPlanning.Pn.Test.csproj        
+      run: dotnet test --no-restore -c Release -v n eFormAPI/Plugins/ItemsPlanning.Pn/ItemsPlanning.Pn.Test/ItemsPlanning.Pn.Test.csproj
+  items-planning-playwright-test:
+    needs: build
+    runs-on: ubuntu-22.04
+    continue-on-error: ${{ matrix.test == 'a' }}
+    strategy:
+      fail-fast: false
+      matrix:
+        test: [a,b,c]
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        path: main
+    - uses: actions/download-artifact@v4
+      with:
+        name: items-planning-container
+    - run: docker load -i items-planning-container.tar
+    - name: Create docker network
+      run: docker network create --driver bridge --attachable data
+    - name: Start MariaDB
+      run: |
+        docker pull mariadb:10.8
+        docker run --name mariadbtest --network data -e MYSQL_ROOT_PASSWORD=secretpassword -p 3306:3306 -d mariadb:10.8
+    - name: Start rabbitmq
+      run: |
+        docker pull rabbitmq:latest
+        docker run -d --hostname my-rabbit --name some-rabbit --network data -e RABBITMQ_DEFAULT_USER=admin -e RABBITMQ_DEFAULT_PASS=password rabbitmq:latest
+    - name: Sleep 15
+      run: sleep 15
+    - name: Start the newly build Docker container
+      id: docker-run
+      run: docker run --name my-container -p 4200:5000 --network data microtingas/frontend-container:latest "/ConnectionString=host=mariadbtest;Database=420_Angular;user=root;password=secretpassword;port=3306;Convert Zero Datetime = true;SslMode=none;" > docker_run_log 2>&1 &
+    - name: Use Node.ts
+      uses: actions/setup-node@v3
+      with:
+        node-version: 22
+    - name: Extract branch name
+      id: extract_branch
+      run: echo "BRANCH=$(echo ${GITHUB_REF#refs/heads/})" >> $GITHUB_OUTPUT
+    - name: 'Preparing Frontend checkout'
+      uses: actions/checkout@v3
+      with:
+        repository: microting/eform-angular-frontend
+        ref: ${{ steps.extract_branch.outputs.BRANCH }}
+        path: eform-angular-frontend
+    - name: Copy dependencies
+      run: |
+        cp -av main/eform-client/src/app/plugins/modules/items-planning-pn eform-angular-frontend/eform-client/src/app/plugins/modules/items-planning-pn
+        mkdir -p eform-angular-frontend/eform-client/playwright/e2e/plugins/
+        cp -av main/eform-client/playwright/e2e/plugins/items-planning-pn eform-angular-frontend/eform-client/playwright/e2e/plugins/items-planning-pn
+        cp -av main/eform-client/playwright.config.ts eform-angular-frontend/eform-client/playwright.config.ts
+        mkdir -p eform-angular-frontend/eform-client/cypress/e2e/plugins/
+        cp -av main/eform-client/cypress/e2e/plugins/items-planning-pn eform-angular-frontend/eform-client/cypress/e2e/plugins/items-planning-pn
+        cp -av main/eform-client/e2e/Assets eform-angular-frontend/eform-client/e2e/
+        cd eform-angular-frontend/eform-client && ../../main/testinginstallpn.sh
+    - name: yarn install
+      run: cd eform-angular-frontend/eform-client && yarn install
+    - name: Install Playwright browsers
+      run: cd eform-angular-frontend/eform-client && npx playwright install --with-deps chromium
+    - name: Pretest changes to work with Docker container
+      run: sed -i 's/localhost/mariadbtest/g' eform-angular-frontend/eform-client/e2e/Constants/DatabaseConfigurationConstants.ts
+    - name: DB Configuration
+      uses: cypress-io/github-action@v4
+      with:
+        start: echo 'hi'
+        wait-on: "http://localhost:4200"
+        wait-on-timeout: 120
+        browser: chrome
+        record: false
+        spec: cypress/e2e/db/*
+        config-file: cypress.config.ts
+        working-directory: eform-angular-frontend/eform-client
+        command-prefix: "--"
+    - name: Load DB dump
+      if: matrix.test == 'a'
+      run: |
+        docker exec -i mariadbtest mysql -u root --password=secretpassword -e 'update 420_Angular.EformPlugins set Status = 1'
+        docker exec -i mariadbtest mysql -u root --password=secretpassword -e 'drop database `420_SDK`'
+        docker exec -i mariadbtest mysql -u root --password=secretpassword -e 'create database `420_SDK`'
+        docker exec -i mariadbtest mysql -u root --password=secretpassword 420_SDK < eform-angular-frontend/eform-client/cypress/e2e/plugins/items-planning-pn/a/420_sdk.sql
+    - name: Change rabbitmq hostname
+      if: ${{ matrix.test != 'a' }}
+      run: docker exec -i mariadbtest mysql -u root --password=secretpassword -e 'update 420_SDK.Settings set Value = "my-rabbit" where Name = "rabbitMqHost"'
+    - name: Enable plugins
+      if: ${{ matrix.test != 'a' }}
+      run: |
+        docker exec -i mariadbtest mysql -u root --password=secretpassword -e 'update 420_Angular.EformPlugins set Status = 2'
+        docker restart my-container
+        sleep 15
+    - name: Get standard output
+      run: |
+        docker logs my-container
+        docker ps -a
+    - name: Wait for app
+      run: npx wait-on http://localhost:4200 --timeout 120000
+    - name: Run Playwright test
+      run: |
+        cd eform-angular-frontend/eform-client
+        npx playwright test playwright/e2e/plugins/items-planning-pn/${{matrix.test}}/
+    - name: Stop the newly build Docker container
+      run: docker stop my-container
+    - name: Get standard output
+      run: |
+        docker logs my-container
+        docker ps -a
+    - name: The job has failed
+      if: ${{ failure() }}
+      run: |
+        cat docker_run_log
+    - name: Archive Playwright report
+      if: ${{ failure() }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-report-${{matrix.test}}
+        path: eform-angular-frontend/eform-client/playwright-report/
+        retention-days: 2        

.github/workflows/dotnet-core-pr.yml

@@ -167,4 +167,116 @@ jobs:
     - name: Build
       run: dotnet build eFormAPI/Plugins/ItemsPlanning.Pn/ItemsPlanning.Pn.sln
     - name: Unit Tests
-      run: dotnet test --no-restore -c Release -v n eFormAPI/Plugins/ItemsPlanning.Pn/ItemsPlanning.Pn.Test/ItemsPlanning.Pn.Test.csproj        
+      run: dotnet test --no-restore -c Release -v n eFormAPI/Plugins/ItemsPlanning.Pn/ItemsPlanning.Pn.Test/ItemsPlanning.Pn.Test.csproj
+  items-planning-playwright-test:
+    needs: build
+    runs-on: ubuntu-22.04
+    continue-on-error: ${{ matrix.test == 'a' }}
+    strategy:
+      fail-fast: false
+      matrix:
+        test: [a,b,c]
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        path: main
+    - uses: actions/download-artifact@v4
+      with:
+        name: items-planning-container
+    - run: docker load -i items-planning-container.tar
+    - name: Create docker network
+      run: docker network create --driver bridge --attachable data
+    - name: Start MariaDB
+      run: |
+        docker pull mariadb:10.8
+        docker run --name mariadbtest --network data -e MYSQL_ROOT_PASSWORD=secretpassword -p 3306:3306 -d mariadb:10.8
+    - name: Start rabbitmq
+      run: |
+        docker pull rabbitmq:latest
+        docker run -d --hostname my-rabbit --name some-rabbit --network data -e RABBITMQ_DEFAULT_USER=admin -e RABBITMQ_DEFAULT_PASS=password rabbitmq:latest
+    - name: Sleep 15
+      run: sleep 15
+    - name: Start the newly build Docker container
+      id: docker-run
+      run: docker run --name my-container -p 4200:5000 --network data microtingas/frontend-container:latest "/ConnectionString=host=mariadbtest;Database=420_Angular;user=root;password=secretpassword;port=3306;Convert Zero Datetime = true;SslMode=none;" > docker_run_log 2>&1 &
+    - name: Use Node.ts
+      uses: actions/setup-node@v3
+      with:
+        node-version: 22
+    - name: 'Preparing Frontend checkout'
+      uses: actions/checkout@v3
+      with:
+        repository: microting/eform-angular-frontend
+        ref: stable
+        path: eform-angular-frontend
+    - name: Copy dependencies
+      run: |
+        cp -av main/eform-client/src/app/plugins/modules/items-planning-pn eform-angular-frontend/eform-client/src/app/plugins/modules/items-planning-pn
+        mkdir -p eform-angular-frontend/eform-client/playwright/e2e/plugins/
+        cp -av main/eform-client/playwright/e2e/plugins/items-planning-pn eform-angular-frontend/eform-client/playwright/e2e/plugins/items-planning-pn
+        cp -av main/eform-client/playwright.config.ts eform-angular-frontend/eform-client/playwright.config.ts
+        mkdir -p eform-angular-frontend/eform-client/cypress/e2e/plugins/
+        cp -av main/eform-client/cypress/e2e/plugins/items-planning-pn eform-angular-frontend/eform-client/cypress/e2e/plugins/items-planning-pn
+        cp -av main/eform-client/e2e/Assets eform-angular-frontend/eform-client/e2e/
+        cd eform-angular-frontend/eform-client && ../../main/testinginstallpn.sh
+    - name: yarn install
+      run: cd eform-angular-frontend/eform-client && yarn install
+    - name: Install Playwright browsers
+      run: cd eform-angular-frontend/eform-client && npx playwright install --with-deps chromium
+    - name: Pretest changes to work with Docker container
+      run: sed -i 's/localhost/mariadbtest/g' eform-angular-frontend/eform-client/e2e/Constants/DatabaseConfigurationConstants.ts
+    - name: DB Configuration
+      uses: cypress-io/github-action@v4
+      with:
+        start: echo 'hi'
+        wait-on: "http://localhost:4200"
+        wait-on-timeout: 120
+        browser: chrome
+        record: false
+        spec: cypress/e2e/db/*
+        config-file: cypress.config.ts
+        working-directory: eform-angular-frontend/eform-client
+        command-prefix: "--"
+    - name: Load DB dump
+      if: matrix.test == 'a'
+      run: |
+        docker exec -i mariadbtest mysql -u root --password=secretpassword -e 'update 420_Angular.EformPlugins set Status = 1'
+        docker exec -i mariadbtest mysql -u root --password=secretpassword -e 'drop database `420_SDK`'
+        docker exec -i mariadbtest mysql -u root --password=secretpassword -e 'create database `420_SDK`'
+        docker exec -i mariadbtest mysql -u root --password=secretpassword 420_SDK < eform-angular-frontend/eform-client/cypress/e2e/plugins/items-planning-pn/a/420_sdk.sql
+    - name: Change rabbitmq hostname
+      if: ${{ matrix.test != 'a' }}
+      run: docker exec -i mariadbtest mysql -u root --password=secretpassword -e 'update 420_SDK.Settings set Value = "my-rabbit" where Name = "rabbitMqHost"'
+    - name: Enable plugins
+      if: ${{ matrix.test != 'a' }}
+      run: |
+        docker exec -i mariadbtest mysql -u root --password=secretpassword -e 'update 420_Angular.EformPlugins set Status = 2'
+        docker restart my-container
+        sleep 15
+    - name: Get standard output
+      run: |
+        docker logs my-container
+        docker ps -a
+    - name: Wait for app
+      run: npx wait-on http://localhost:4200 --timeout 120000
+    - name: Run Playwright test
+      run: |
+        cd eform-angular-frontend/eform-client
+        npx playwright test playwright/e2e/plugins/items-planning-pn/${{matrix.test}}/
+    - name: Stop the newly build Docker container
+      run: docker stop my-container
+    - name: Get standard output
+      run: |
+        docker logs my-container
+        docker ps -a
+    - name: The job has failed
+      if: ${{ failure() }}
+      run: |
+        cat docker_run_log
+    - name: Archive Playwright report
+      if: ${{ failure() }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-report-${{matrix.test}}
+        path: eform-angular-frontend/eform-client/playwright-report/
+        retention-days: 2        

docs/superpowers/plans/2026-04-04-items-planning-playwright-migration.md

@@ -0,0 +1,26 @@
+# Items Planning Playwright Migration — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development to implement this plan task-by-task.
+
+**Goal:** Migrate items-planning WDIO e2e tests to Playwright with CI jobs.
+
+**Architecture:** 3 page objects + 8 test files across folders a/b/c. Uses shared Playwright page objects from eform-angular-frontend.
+
+**Tech Stack:** Playwright Test, TypeScript, GitHub Actions
+
+---
+
+See spec at `docs/superpowers/specs/2026-04-04-items-planning-playwright-migration-design.md` for detailed conversion patterns.
+
+Tasks:
+1. Create `playwright.config.ts`
+2. Port `ItemsPlanningPlanningPage.ts` (main page + PlanningRowObject + PlanningCreateUpdate)
+3. Port `ItemsPlanningModal.page.ts` (create/edit/delete modals)
+4. Port `ItemsPlanningPairingPage.ts` (pairing grid)
+5. Copy `PlanningsTestImport.data.ts` (pure data, no WDIO deps)
+6. Port folder `a/` test (plugin activation)
+7. Port folder `b/` tests (add, edit, delete)
+8. Port folder `c/` tests (sorting, multiple-delete, tags, import, pairing)
+9. Update master workflow
+10. Update PR workflow
+11. Create PR

docs/superpowers/specs/2026-04-04-items-planning-playwright-migration-design.md

@@ -0,0 +1,104 @@
+# Items Planning Plugin — Playwright Migration Design Spec
+
+## Goal
+
+Migrate WDIO e2e tests in `eform-angular-items-planning-plugin` to Playwright, following patterns from `eform-angular-workflow-plugin` PR #1346. WDIO tests remain in place.
+
+## Current State
+
+- **10 WDIO test files** (+ 1 placeholder `assert-true.spec.ts`)
+- **4 WDIO page objects** in `eform-client/e2e/Page objects/ItemsPlanning/`
+- **CI uses matrix [a,b,c]** mapping to `wdio-headless-plugin-step2{a,b,c}.conf.ts`
+- Config `a` runs only `assert-true.spec.ts` (placeholder), `b` same, `c` runs tags/import/pairing/plugins-page
+- No Playwright files exist
+
+## Target State
+
+### New Files
+
+```
+eform-client/playwright.config.ts
+eform-client/playwright/e2e/plugins/items-planning-pn/
+├── ItemsPlanningPlanningPage.ts
+├── ItemsPlanningModal.page.ts
+├── ItemsPlanningPairingPage.ts
+├── PlanningsTestImport.data.ts
+├── a/
+│   └── items-planning-settings.spec.ts       # plugin activation
+├── b/
+│   ├── items-planning.add.spec.ts
+│   ├── items-planning.edit.spec.ts
+│   └── items-planning.delete.spec.ts
+└── c/
+    ├── items-planning.sorting.spec.ts
+    ├── items-planning.multiple-delete.spec.ts
+    ├── items-planning.tags.spec.ts
+    ├── items-planning.import.spec.ts
+    └── items-planning.pairing.spec.ts
+```
+
+### Modified Files
+
+| File | Change |
+|------|--------|
+| `.github/workflows/dotnet-core-master.yml` | Add `items-planning-playwright-test` job |
+| `.github/workflows/dotnet-core-pr.yml` | Add `items-planning-playwright-test` job |
+
+## Excluded Tests
+
+- `items-planning.settings.spec.ts` — references missing `ItemsPlanningSettings.page`, not run in CI
+- `assert-true.spec.ts` — placeholder canary
+
+## WDIO → Playwright Conversion Patterns
+
+| WDIO | Playwright |
+|------|-----------|
+| `$('#id')` | `this.page.locator('#id')` |
+| `$$('sel')` | `this.page.locator('sel')` |
+| `element.getText()` | `locator.textContent()` + `.trim()` |
+| `element.getValue()` | `locator.inputValue()` |
+| `element.setValue(v)` | `locator.fill(v)` |
+| `element.addValue(v)` | `locator.pressSequentially(v)` |
+| `element.getProperty('checked')` | `locator.isChecked()` |
+| `element.getAttribute('style')` | `locator.getAttribute('style')` |
+| `element.waitForDisplayed()` | `locator.waitFor({state:'visible'})` |
+| `element.waitForDisplayed({reverse:true})` | `locator.waitFor({state:'hidden'})` |
+| `element.waitForClickable()` | `locator.waitFor({state:'visible'})` (Playwright auto-waits on click) |
+| `element.isClickable()` | `await locator.isVisible()` |
+| `element.isExisting()` | `await locator.count() > 0` |
+| `browser.pause(n)` | `page.waitForTimeout(n)` |
+| `browser.keys(['Return'])` | `page.keyboard.press('Enter')` |
+| `browser.keys(['Escape'])` | `page.keyboard.press('Escape')` |
+| `browser.uploadFile(path)` | `locator.setInputFiles(path)` |
+| `export default new Class()` | `export class Class { constructor(page: Page) {} }` |
+| `selectValueInNgSelector(element, value)` | `selectValueInNgSelector(page, '#selector', value)` |
+| `selectDateOnDatePicker(y,m,d)` | `selectDateOnNewDatePicker(page, y, m, d)` |
+| `customDaLocale` date format `P` | `format(date, 'dd.MM.yyyy')` (equivalent output) |
+
+## Shared Dependencies from eform-angular-frontend
+
+Page objects (already Playwright-ready):
+- `LoginPage`, `MyEformsPage`, `PluginPage`, `FoldersPage`, `DeviceUsersPage`, `TagsModalPage`
+
+Helper functions:
+- `generateRandmString`, `getRandomInt`, `selectValueInNgSelector`, `selectDateOnNewDatePicker`, `testSorting`
+
+Import paths from `plugins/items-planning-pn/`:
+- Shared page objects: `../../Page objects/X.page`
+- Helper functions: `../../helper-functions`
+- From test files in `a/`, `b/`, `c/`: `../../../Page objects/X.page`, `../../../helper-functions`
+- Plugin page objects from same plugin dir: `../ItemsPlanningPlanningPage`
+
+## CI Job Design
+
+New `items-planning-playwright-test` job:
+- `needs: build`, matrix `[a,b,c]`
+- Copies plugin source + Playwright tests + config into frontend
+- For matrix `a`: no plugin enable (activation test), loads DB dump from cypress path
+- For matrix `b`,`c`: enables plugin in DB, restarts container
+- Runs `npx playwright test playwright/e2e/plugins/items-planning-pn/${{matrix.test}}/`
+- Uploads Playwright report artifact on failure
+
+## Assets
+
+The import test requires `e2e/Assets/Skabelon Døvmark NEW.xlsx`. This needs to be copied to the frontend in CI. The Playwright test uses `page.setInputFiles()` instead of WDIO's `browser.uploadFile()`.

eform-client/playwright.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './playwright/e2e',
+  fullyParallel: false,
+  workers: 1,
+  timeout: 120_000,
+  reporter: [['html', { open: 'never' }]],
+  use: {
+    baseURL: 'http://localhost:4200',
+    viewport: { width: 1920, height: 1080 },
+    video: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    trace: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});