kie-issues#1114: Containerize Playwright end-to-end tests to resolve screenshot comparison issues caused by OS differences

README.md

@@ -113,6 +113,10 @@ Bootstrapping installs the necessary dependencies for each package.
 > - To enable container images build: `export KIE_TOOLS_BUILD__buildContainerImages=true`
 > - To enable E2E tests: `export KIE_TOOLS_BUILD__runEndToEndTests=true`
 
+> **ℹ️ NOTE**
+>
+> Ubuntu 22.04 is the only OS that nativelly supports running E2E tests. To run in another OS please use `export KIE_TOOLS_BUILD__containerizedEndToEndTests=true` together with the `KIE_TOOLS_BUILD__runEndToEndTests`. Please refer to @kie-tools/playwright-base [README](./packages/playwright-base/README.md).
+
 > **ℹ️ NOTE**
 >
 > Final artifacts will be in `{packages,examples}/*/dist` directories.

packages/boxed-expression-component/package.json

@@ -16,7 +16,14 @@
     "start:linux:darwin": "cross-env STORYBOOK_PORT=$(build-env boxedExpressionComponent.storybook.port) pnpm kie-tools--storybook --storybookArgs=\"dev --no-open\"",
     "start:win32": "pnpm powershell \"cross-env STORYBOOK_PORT=$(build-env boxedExpressionComponent.storybook.port) pnpm kie-tools--storybook --storybookArgs='dev --no-open'",
     "test": "run-script-if --ignore-errors \"$(build-env tests.ignoreFailures)\" --bool \"$(build-env tests.run)\" --then \"jest --silent --verbose --passWithNoTests\"",
-    "test-e2e": "run-script-if --ignore-errors \"$(build-env endToEndTests.ignoreFailures)\" --bool \"$(build-env endToEndTests.run)\" --then \"pnpm rimraf ./dist-tests-e2e\" \"pnpm test-e2e:run\"",
+    "test-e2e": "run-script-if --ignore-errors \"$(build-env endToEndTests.ignoreFailures)\" --bool \"$(build-env endToEndTests.run)\" --then \"pnpm test-e2e:condition\"",
+    "test-e2e:condition": "run-script-if --bool \"$(build-env endToEndTests.containerized)\" --then  \"pnpm rimraf ./dist-tests-e2e\" \"pnpm test-e2e:container:start\" --else \"pnpm rimraf ./dist-tests-e2e\" \"pnpm test-e2e:run\"",
+    "test-e2e:container:bash": "docker exec -it kie-tools-playwright-containerization-boxed-expression-component /bin/bash -c \"cd incubator-kie-tools/packages/boxed-expression-component && exec /bin/bash\"",
+    "test-e2e:container:down": "docker compose -f ./tests-e2e/__containerization__/playwright-docker-compose.yml down",
+    "test-e2e:container:run": "docker exec -it kie-tools-playwright-containerization-boxed-expression-component /bin/bash -c \"cd incubator-kie-tools/packages/boxed-expression-component && pnpm test-e2e:run\"",
+    "test-e2e:container:shell": "start-server-and-test 'pnpm start' http://localhost:$(build-env boxedExpressionComponent.storybook.port)/iframe.html 'pnpm test-e2e:container:up && pnpm test-e2e:container:bash'",
+    "test-e2e:container:start": "start-server-and-test 'pnpm start' http://localhost:$(build-env boxedExpressionComponent.storybook.port)/iframe.html 'pnpm test-e2e:container:up && pnpm test-e2e:container:run'",
+    "test-e2e:container:up": "cross-env PROJECT_VERSION=$(build-env root.version) PLAYWRIGHT_PORT=$(build-env boxedExpressionComponent.storybook.port) docker compose -f ./tests-e2e/__containerization__/playwright-docker-compose.yml up -d",
     "test-e2e:open": "pnpm exec playwright show-report dist-tests-e2e/reports",
     "test-e2e:run": "pnpm exec playwright test"
   },
@@ -75,6 +82,7 @@
     "react-json-view": "^1.21.3",
     "rimraf": "^3.0.2",
     "run-script-os": "^1.1.6",
+    "start-server-and-test": "^2.0.3",
     "storybook": "^7.3.2",
     "ts-jest": "^29.1.5",
     "typescript": "^5.5.3",

packages/boxed-expression-component/tests-e2e/__containerization__/playwright-docker-compose.yml

@@ -0,0 +1,64 @@
+#
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+#
+
+services:
+  playwright:
+    platform: linux/amd64
+    container_name: kie-tools-playwright-containerization-boxed-expression-component
+    image: kie-tools-playwright-container-image:${PROJECT_VERSION}
+    depends_on:
+      - reverse-proxy
+    entrypoint: ["/bin/bash"]
+    stdin_open: true
+    tty: true
+    network_mode: host
+    user: 1000:1000
+    environment:
+      - KIE_TOOLS_BUILD__runEndToEndTests=true
+      - KIE_TOOLS_BUILD__containerizedEndToEndTests=true
+    volumes:
+      - type: bind
+        source: ./../../../../
+        target: /home/node/kie-tools-playwright/incubator-kie-tools
+
+  # The nginx reverse-proxy is used to forward `host.docker.internal` requests to `localhost.
+  reverse-proxy:
+    image: nginx:1.27.3-alpine
+    container_name: kie-tools-playwright-containerization-scesim-editor-reverse-proxy
+    network_mode: host
+    command: ["nginx", "-g", "daemon off;"]
+    configs:
+      - source: reverse-proxy-config
+        target: /etc/nginx/nginx.conf
+
+configs:
+  reverse-proxy-config:
+    content: |
+      events {}
+
+      http {
+          server {
+              listen ${PLAYWRIGHT_PORT};
+              server_name localhost;
+
+              location / {
+                  proxy_pass http://host.docker.internal:${PLAYWRIGHT_PORT};
+              }
+          }
+      }

packages/dmn-editor/package.json

@@ -26,7 +26,14 @@
     "start:linux:darwin": "cross-env STORYBOOK_PORT=$(build-env dmnEditor.storybook.port) pnpm kie-tools--storybook --storybookArgs=\"dev --no-open\"",
     "start:win32": "pnpm powershell \"cross-env STORYBOOK_PORT=$(build-env dmnEditor.storybook.port) pnpm kie-tools--storybook --storybookArgs='dev --no-open'",
     "test": "run-script-if --ignore-errors \"$(build-env tests.ignoreFailures)\" --bool \"$(build-env tests.run)\" --then \"jest --silent --verbose --passWithNoTests\"",
-    "test-e2e": "run-script-if --ignore-errors \"$(build-env endToEndTests.ignoreFailures)\" --bool \"$(build-env endToEndTests.run)\" --then \"pnpm rimraf ./dist-tests-e2e\" \"pnpm test-e2e:run\"",
+    "test-e2e": "run-script-if --ignore-errors \"$(build-env endToEndTests.ignoreFailures)\" --bool \"$(build-env endToEndTests.run)\" --then \"pnpm test-e2e:condition\"",
+    "test-e2e:condition": "run-script-if --bool \"$(build-env endToEndTests.containerized)\" --then  \"pnpm rimraf ./dist-tests-e2e\" \"pnpm test-e2e:container:start\" --else \"pnpm rimraf ./dist-tests-e2e\" \"pnpm test-e2e:run\"",
+    "test-e2e:container:bash": "docker exec -it kie-tools-playwright-containerization-dmn-editor /bin/bash -c \"cd incubator-kie-tools/packages/dmn-editor && exec /bin/bash\"",
+    "test-e2e:container:down": "docker compose -f ./tests-e2e/__containerization__/playwright-docker-compose.yml down",
+    "test-e2e:container:run": "docker exec -it kie-tools-playwright-containerization-dmn-editor /bin/bash -c \"cd incubator-kie-tools/packages/dmn-editor && pnpm test-e2e:run\"",
+    "test-e2e:container:shell": "start-server-and-test 'pnpm start' http://localhost:$(build-env dmnEditor.storybook.port)/iframe.html 'pnpm test-e2e:container:up && pnpm test-e2e:container:bash'",
+    "test-e2e:container:start": "start-server-and-test 'pnpm start' http://localhost:$(build-env dmnEditor.storybook.port)/iframe.html 'pnpm test-e2e:container:up && pnpm test-e2e:container:run'",
+    "test-e2e:container:up": "cross-env PROJECT_VERSION=$(build-env root.version) PLAYWRIGHT_PORT=$(build-env dmnEditor.storybook.port) docker compose -f ./tests-e2e/__containerization__/playwright-docker-compose.yml up -d",
     "test-e2e:open": "pnpm exec playwright show-report dist-tests-e2e/reports",
     "test-e2e:run": "pnpm exec playwright test"
   },

packages/dmn-editor/tests-e2e/__containerization__/playwright-docker-compose.yml

@@ -0,0 +1,64 @@
+#
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+#
+
+services:
+  playwright:
+    platform: linux/amd64
+    container_name: kie-tools-playwright-containerization-dmn-editor
+    image: kie-tools-playwright-container-image:${PROJECT_VERSION}
+    depends_on:
+      - reverse-proxy
+    entrypoint: ["/bin/bash"]
+    stdin_open: true
+    tty: true
+    network_mode: host
+    user: 1000:1000
+    environment:
+      - KIE_TOOLS_BUILD__runEndToEndTests=true
+      - KIE_TOOLS_BUILD__containerizedEndToEndTests=true
+    volumes:
+      - type: bind
+        source: ./../../../../
+        target: /home/node/kie-tools-playwright/incubator-kie-tools
+
+  # The nginx reverse-proxy is used to forward `host.docker.internal` requests to `localhost.
+  reverse-proxy:
+    image: nginx:1.27.3-alpine
+    container_name: kie-tools-playwright-containerization-dmn-editor-reverse-proxy
+    network_mode: host
+    command: ["nginx", "-g", "daemon off;"]
+    configs:
+      - source: reverse-proxy-config
+        target: /etc/nginx/nginx.conf
+
+configs:
+  reverse-proxy-config:
+    content: |
+      events {}
+
+      http {
+          server {
+              listen ${PLAYWRIGHT_PORT};
+              server_name localhost;
+
+              location / {
+                  proxy_pass http://host.docker.internal:${PLAYWRIGHT_PORT};
+              }
+          }
+      }

packages/online-editor/package.json

@@ -24,7 +24,14 @@
     "start:kie-sandbox": "webpack serve --host 0.0.0.0 --env dev",
     "start:kie-sandbox-accelerator-quarkus": "npm --prefix ./node_modules/@kie-tools/kie-sandbox-accelerator-quarkus run start",
     "test": "run-script-if --ignore-errors \"$(build-env tests.ignoreFailures)\" --bool \"$(build-env tests.run)\" --then \"jest --silent --verbose\"",
-    "test-e2e": "run-script-if --ignore-errors \"$(build-env endToEndTests.ignoreFailures)\" --bool \"$(build-env endToEndTests.run)\" --then  \"pnpm rimraf ./dist-tests-e2e\" \"pnpm test-e2e:run\"",
+    "test-e2e": "run-script-if --ignore-errors \"$(build-env endToEndTests.ignoreFailures)\" --bool \"$(build-env endToEndTests.run)\" --then \"pnpm test-e2e:condition\"",
+    "test-e2e:condition": "run-script-if --bool \"$(build-env endToEndTests.containerized)\" --then  \"pnpm rimraf ./dist-tests-e2e\" \"pnpm test-e2e:container:start\" --else \"pnpm rimraf ./dist-tests-e2e\" \"pnpm test-e2e:run\"",
+    "test-e2e:container:bash": "docker exec -it kie-tools-playwright-containerization-online-editor /bin/bash -c \"cd incubator-kie-tools/packages/online-editor && exec /bin/bash\"",
+    "test-e2e:container:down": "docker compose -f ./tests-e2e/__containerization__/playwright-docker-compose.yml down",
+    "test-e2e:container:run": "docker exec -it kie-tools-playwright-containerization-online-editor /bin/bash -c \"cd incubator-kie-tools/packages/online-editor && pnpm test-e2e:run\"",
+    "test-e2e:container:shell": "start-server-and-test 'pnpm start' \"http://localhost:$(build-env corsProxy.dev.port)/ping|http://localhost:$(build-env extendedServicesJava.port)/ping|http://localhost:$(build-env onlineEditor.dev.port)/#/|http://localhost:$(build-env kieSandboxAcceleratorQuarkus.dev.port)/git-repo-bare.git\" 'pnpm test-e2e:container:up && pnpm test-e2e:container:bash'",
+    "test-e2e:container:start": "start-server-and-test 'pnpm start' \"http://localhost:$(build-env corsProxy.dev.port)/ping|http://localhost:$(build-env extendedServicesJava.port)/ping|http://localhost:$(build-env onlineEditor.dev.port)/#/|http://localhost:$(build-env kieSandboxAcceleratorQuarkus.dev.port)/git-repo-bare.git\" 'pnpm test-e2e:container:up && pnpm test-e2e:container:run'",
+    "test-e2e:container:up": "cross-env PROJECT_VERSION=$(build-env root.version) PLAYWRIGHT_PORT=$(build-env onlineEditor.dev.port) PLAYWRIGHT_CORS_PROXY_PORT=$(build-env corsProxy.dev.port) PLAYWRIGHT_EXTENDED_SERVICES_PORT=$(build-env extendedServicesJava.port) PLAYWRIGHT_QUARKUS_ACCELERATOR_PORT=$(build-env kieSandboxAcceleratorQuarkus.dev.port) docker compose -f ./tests-e2e/__containerization__/playwright-docker-compose.yml up -d",
     "test-e2e:open": "pnpm exec playwright show-report dist-tests-e2e/reports",
     "test-e2e:run": "pnpm exec playwright test"
   },
@@ -122,6 +129,7 @@
     "jest-when": "^3.6.0",
     "process": "^0.11.10",
     "rimraf": "^3.0.2",
+    "start-server-and-test": "^2.0.3",
     "ts-jest": "^29.1.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",

packages/online-editor/tests-e2e/__containerization__/playwright-docker-compose.yml

@@ -0,0 +1,102 @@
+#
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+#
+
+services:
+  playwright:
+    platform: linux/amd64
+    container_name: kie-tools-playwright-containerization-online-editor
+    image: kie-tools-playwright-container-image:${PROJECT_VERSION}
+    depends_on:
+      - reverse-proxy
+    entrypoint: ["/bin/bash"]
+    stdin_open: true
+    tty: true
+    network_mode: host
+    user: 1000:1000
+    environment:
+      - KIE_TOOLS_BUILD__runEndToEndTests=true
+      - KIE_TOOLS_BUILD__containerizedEndToEndTests=true
+    volumes:
+      - type: bind
+        source: ./../../../../
+        target: /home/node/kie-tools-playwright/incubator-kie-tools
+
+  # The nginx reverse-proxy is used to forward `host.docker.internal` requests to `localhost.
+  reverse-proxy:
+    image: nginx:1.27.3-alpine
+    container_name: kie-tools-playwright-containerization-online-editor-reverse-proxy
+    network_mode: host
+    command: ["nginx", "-g", "daemon off;"]
+    configs:
+      - source: reverse-proxy-config
+        target: /etc/nginx/nginx.conf
+
+configs:
+  reverse-proxy-config:
+    content: |
+      events {}
+
+      http {
+          server {
+              listen ${PLAYWRIGHT_PORT};
+              server_name localhost;
+
+              location / {
+                  proxy_pass http://host.docker.internal:${PLAYWRIGHT_PORT};
+
+                  proxy_http_version 1.1;
+                  proxy_set_header Connection "Upgrade";
+              }
+
+              location /ws {
+                  proxy_pass http://host.docker.internal:${PLAYWRIGHT_PORT};
+
+                  proxy_http_version 1.1;
+                  proxy_set_header Upgrade websocket;
+                  proxy_set_header Connection "Upgrade";
+              }
+          }
+
+          server {
+              listen ${PLAYWRIGHT_CORS_PROXY_PORT};
+              server_name localhost;
+
+              location / {
+                  proxy_pass http://host.docker.internal:${PLAYWRIGHT_CORS_PROXY_PORT};
+              }
+          }
+
+          server {
+              listen ${PLAYWRIGHT_EXTENDED_SERVICES_PORT};
+              server_name localhost;
+
+              location / {
+                  proxy_pass http://host.docker.internal:${PLAYWRIGHT_EXTENDED_SERVICES_PORT};
+              }
+          }
+
+          server {
+              listen ${PLAYWRIGHT_QUARKUS_ACCELERATOR_PORT};
+              server_name localhost;
+
+              location / {
+                  proxy_pass http://host.docker.internal:${PLAYWRIGHT_QUARKUS_ACCELERATOR_PORT};
+              }
+          }
+      }

packages/playwright-base/Containerfile

@@ -0,0 +1,33 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#  http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+
+# Using bookworm (debian 12) due to compatibility with GHA ubuntu-latest (Ubuntu 22.04)
+FROM node:22-bookworm
+
+# Set cache folder
+ENV PLAYWRIGHT_BROWSERS_PATH=/home/node/kie-tools-playwright/.cache/ms-playwright
+
+# Installing `pnpm` to keep it consistent with the kie-tools repository
+RUN npm install --global [email protected]
+
+# Installing Playwright browser and dependencies
+RUN npx [email protected] install-deps 
+RUN npx [email protected] install chrome chromium webkit
+
+WORKDIR /home/node/kie-tools-playwright
+
+ENTRYPOINT ["/bin/bash"]

packages/playwright-base/README.md

@@ -17,6 +17,48 @@
 
 ## @kie-tools/playwright-base
 
+## Overview
+
+This package collects common configurations to run end-to-end Playwright tests.
+
+## Using containers to generate screenshots
+
+Each operating system has slight variations in UI, even within the same browser. These differences can cause screenshot comparison tests to fail. To address this issue and ensure a stable environment with consistent test results locally and in CI, containers can be used. Running Playwright tests inside a container that replicates the CI environment makes screenshot tests reproducible, regardless of the host OS.
+
+> **ℹ️ NOTE**
+>
+> Due to compatibility issues, this containerization solution cannot yet be used on Windows natively and requires running it directly within WSL (Windows Subsystem for Linux).
+
+---
+
+To run tests in a container, you first need to build the image using the Containerfile provided in this package. Use the `build:dev` script as shown below:
+
+```sh
+# In this package folder
+KIE_TOOLS_BUILD__buildContainerImages=true pnpm build:dev
+# or in any folder of the kie-tools monorepo
+KIE_TOOLS_BUILD__buildContainerImages=true pnpm -F @kie-tools/plawright-base build:dev
+```
+
+By default, tests run on the host machine. To execute them in the containerized environment, set the `KIE_TOOLS_BUILD__containerizedEndToEndTests` environment variable to `true`.
+
+```sh
+KIE_TOOLS_BUILD__containerizedEndToEndTests=true pnpm test-e2e
+```
+
+## Updating Playwright screenshots
+
+By default, running tests does not automatically update screenshots. The `test-e2e` script launches the test suite with standard settings. For greater control over Playwright parameters, you can use the `test-e2e:container:shell` script, which opens a shell inside the container. This script will start the dev server (if not already running), initialize the Playwright container, and provide access to a new shell.
+
+To update screenshots, use the `-u` or `--update-snapshots` flags with the `test-e2e:run` script as shown below:
+
+```sh
+pnpm test-e2e:container:shell
+
+# Wait until the new shell is ready
+pnpm test-e2e:run --update-snapshots
+```
+
 ---
 
 Apache KIE (incubating) is an effort undergoing incubation at The Apache Software