feat: add devcontainers

.devcontainer/Dockerfile

@@ -0,0 +1,10 @@
+# Image tag should match package.json > @playwright/test
+FROM mcr.microsoft.com/playwright:v1.49.1-jammy
+
+RUN apt update && \
+    apt install sudo && \
+    usermod -aG sudo pwuser  && \
+    echo "%sudo ALL=(ALL) NOPASSWD:ALL" | tee -a /etc/sudoers > /dev/null
+
+RUN chown pwuser:pwuser -R /home/pwuser
+USER pwuser

.devcontainer/README.md

@@ -0,0 +1,41 @@
+# Devcontainers
+
+Use [Devcontainers](https://code.visualstudio.com/docs/devcontainers/containers) to prepare a fully automated working environment.
+
+Generate the `devcontainer.json` executing:
+
+```shell
+.devcontainer/generate_devcontainer.sh
+```
+
+Now you should see the file `.devcontainer/devcontainer.json`. At this point you can use your favorite IDE to run Devcontainers
+
+## VSCode
+
+Install the extension https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
+
+To open the repository with DevContainers do `Ctrl + Shift + P` and enter `Dev Containers: Rebuild and Reopen in Container`. For more options see the Extension documentations.
+
+### Docker
+
+Docker defaults should work fine therefore there is nothing to do.
+
+### Podman
+
+Start Podman service for a regular user (rootless) and make it listen to a socket:
+
+```shell
+systemctl --user enable --now podman.socket
+```
+
+Restart your OS if necessary and verify that podman listens:
+
+```shell
+systemctl --user status podman.socket
+```
+
+Go to the Extension Settings:
+
+- `Dev › Containers: Docker Compose Path` set `podman-compose`
+- `Dev › Containers: Docker Path` set `podman`
+- `Dev › Containers: Docker Socket Path` set `/run/podman/podman.sock`

.devcontainer/generate_devcontainer.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+HOSTNAME=$(hostname)
+envsubst '${HOSTNAME}' < template.json > devcontainer.json

.devcontainer/template.json

@@ -0,0 +1,44 @@
+{
+  "name": "trustify-ui-tests",
+  "build": {
+    "dockerfile": "Dockerfile"
+  },
+  "runArgs": [
+    "--privileged",
+    "--userns=keep-id",
+    "--network=host",
+    "--add-host=${HOSTNAME}:127.0.0.1",
+    "-e DISPLAY=:2"
+  ],
+  "remoteUser": "pwuser",
+  "features": {
+    "ghcr.io/devcontainers/features/desktop-lite:1": {
+      "VNC_RESOLUTION": "1920x1200x16"
+    }
+  },
+  "forwardPorts": [6080, 5901],
+  "portsAttributes": {
+    "6080": {
+      "label": "browser vnc"
+    },
+    "5901": {
+      "label": "real vnc"
+    }
+  },
+  "onCreateCommand": "npx playwright install-deps && npx playwright install",
+  "postCreateCommand": "npm ci",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "k--kato.intellij-idea-keybindings",
+        "vadimcn.vscode-lldb",
+        "ms-playwright.playwright",
+        "github.vscode-pull-request-github",
+        "GitHub.github-vscode-theme",
+        "esbenp.prettier-vscode",
+        "oderwat.indent-rainbow",
+        "eamodio.gitlens"
+      ]
+    }
+  }
+}

.gitignore

@@ -3,3 +3,5 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+.devcontainer/devcontainer.json

README.md

@@ -1,5 +1,9 @@
 # End-to-end tests for trustify-ui
 
+### Devcontainers
+
+Read our docs for [Devcontainers](./.devcontainer/README.md) if you would like to use it.
+
 ### Requirements
 
 - NodeJS 21
@@ -28,5 +32,5 @@ npx playwright test
 - Or if you prefer to run the tests and see the Playwright UI use:
 
 ```shell
-npm run test
+npx playwright test --ui
 ```

package.json

@@ -4,16 +4,18 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "codegen": "npx playwright codegen http://localhost:8080/",
-    "test": "npx playwright test --ui --trace on",
+    "codegen": "npx playwright codegen",
+    "test": "npx playwright test",
+    "ui": "npx playwright test --ui --trace on",
+    "ui-host": "npx playwright test --ui-host=0.0.0.0 --trace on",
     "check": "prettier --check './**/*.{ts,js,json}'",
     "format": "prettier --write './**/*.{ts,js,json}'"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.45.3",
+    "@playwright/test": "^1.49.1",
     "@types/node": "^22.0.2",
     "prettier": "^3.3.3"
   }