Merge pull request #7 from julienloizelet/feat/kasmvnc

Feat/kasmvnc

CHANGELOG.md

@@ -12,6 +12,24 @@ The public API for this project is defined by the files `docker-compose.playwrig
 
 ------
 
+## [2.0.0](https://github.com/julienloizelet/ddev-playwright/releases/tag/v2.0.0) - 2023-??-??
+[_Compare with previous release_](https://github.com/julienloizelet/ddev-playwright/compare/v1.0.2...v2.0.0)
+
+
+### Changed
+
+- Change `working_dir` to `/var/www/html` in `docker-compose.playwright.yaml` ([@see #5](https://github.com/julienloizelet/ddev-playwright/pull/5))
+
+### Added
+
+- Add `kasmVNC` service for Playwright headed test ([@see #5](https://github.com/julienloizelet/ddev-playwright/pull/5))
+- Add custom commands `ddev playwright` and `ddev playwright-install` ([@see #5](https://github.com/julienloizelet/ddev-playwright/pull/5))
+
+
+---
+
+
+
 ## [1.0.2](https://github.com/julienloizelet/ddev-playwright/releases/tag/v1.0.2) - 2023-06-12
 [_Compare with previous release_](https://github.com/julienloizelet/ddev-playwright/compare/v1.0.1...v1.0.2)
 

README.md

@@ -24,27 +24,87 @@ This DDEV add-on allows you to use Playwright in a separate `playwright` service
 
 ## Installation
 
-`ddev get julienloizelet/ddev-playwright && ddev restart`
+```bash
+ddev get julienloizelet/ddev-playwright
+ddev restart
+```
 
 ## Basic usage
 
-You can run all the basic `yarn` commands in the `playwright` container. 
+### Add-on commands for `@playwright/test` package
 
-As an example, you will find some testing and configuration files in the `tests/testdata/yarn` folder of this project.
+#### `ddev playwright-install`
 
-### Yarn install
+This command will install `playwright` and all dependencies in a Playwright folder defined by the environment variable `PLAYWRIGHT_TEST_DIR` of the `docker-compose.playwright.yaml` file. By default, `tests/Playwright` is used but you can modify this value to suit your needs.
 
-`ddev exec -s playwright yarn install --cwd ./var/www/html/yarn --force`
+**Before running this command**, ensure that you have a `package.json` file in the Playwright folder. You will find an example of such a file in the `tests/project_root/tests/Playwright`folder of this repository. You will also find an example of a `playwright.config.js` file.
 
-### Launch Playwright test 
+If there is a `.env.example` file in the folder, it will be copied into a `.env` file (to be used with the `dotenv` package for example).
 
-`ddev exec -s playwright yarn --cwd /var/www/html/yarn test "__tests__/1-simple-test.js"`
+#### `ddev playwright`
 
+You can run all the playwright command with `ddev playwright [command]`.
+
+- To run playwright's test command: 
+
+  ```bash
+  ddev playwright test
+  ```
+
+- To run with the UI.
+
+  ```bash
+  ddev playwright test --headed
+  ```
+
+- To generate playwright report
+
+  ```bash
+  ddev playwright show-report --host 0.0.0.0
+  ```
+
+  and then browse to `https://<PROJECT>.ddev.site:9323`
+
+  ![show report](./docs/show-report.jpg)
+
+### VNC server
+
+When running in UI/headed mode, you can use the provided Kasmvnc service by browsing to `https://<PROJECT>.ddev.site:8444`
+
+![kasmvnc](./docs/kasmvnc.jpg)
+
+It could be also used to generate playwright code by browsing with the following command: 
+
+```bash
+ddev playwright codegen
+```
+
+### Other commands
+
+As for any DDEV additional service, you can use the `ddev exec -s playwright [command]` snippet to run a command in the playwright container.
+
+For example: 
+
+- `ddev exec -s playwright yarn install --cwd ./var/www/html/yarn --force`
+- `ddev exec -s playwright yarn --cwd /var/www/html/yarn test "__tests__/1-simple-test.js"`
+
+## Technical notes
+
+### arm64
+
+On arm64 machine, edit the `playwright-build/Dockerfile` file to use `mcr.microsoft.com/playwright:focal-arm64` base image.
+
+
+
+## Thanks
+
+[devianintegral/ddev-playwright](https://github.com/deviantintegral/ddev-playwright) is another way of implementing Playwright as a DDEV add-on. The main difference is that this other add-on embeds Playwright in the Web container. Everyone can choose what suits them best.
+
+We'd like to thank [devianintegral](https://github.com/deviantintegral) for the fruitful discussions we've had and the fact that we  are using a few pieces of code taken directly from his repository.
 
 ## Contribute
 
 Anyone is welcome to submit a PR to this repo.
 
-
 **Contributed and maintained by [julienloizelet](https://github.com/julienloizelet)**
 

commands/playwright/playwright

@@ -0,0 +1,14 @@
+#!/bin/bash
+#ddev-generated
+# Remove the line above if you don't want this file to be overwritten when you run
+# ddev get julienloizelet/ddev-playwright
+#
+# This file comes from https://github.com/julienloizelet/ddev-playwright
+#
+cd /var/www/html || exit 1
+cd "${PLAYWRIGHT_TEST_DIR}" || exit 1
+
+export PLAYWRIGHT_BROWSERS_PATH=0
+PRE="sudo -u pwuser PLAYWRIGHT_BROWSERS_PATH=0 "
+
+$PRE yarn playwright "$@"

commands/playwright/playwright-install

@@ -0,0 +1,17 @@
+#!/bin/bash
+#ddev-generated
+# Remove the line above if you don't want this file to be overwritten when you run
+# ddev get julienloizelet/ddev-playwright
+#
+# This file comes from https://github.com/julienloizelet/ddev-playwright
+#
+cd /var/www/html || exit 1
+cd "${PLAYWRIGHT_TEST_DIR}" || exit 1
+
+export PLAYWRIGHT_BROWSERS_PATH=0
+PRE="sudo -u pwuser PLAYWRIGHT_BROWSERS_PATH=0 "
+
+$PRE yarn install
+$PRE yarn playwright install --with-deps
+# Conditionally copy an .env file if an example file exists
+[ -f .env.example ] && [ ! -f .env ] && $PRE cp -n .env.example .env; exit 0

docker-compose.playwright.yaml

@@ -6,20 +6,33 @@
 #
 services:
   playwright:
-    # If on arm64 machine, edit to use mcr.microsoft.com/playwright:focal-arm64
-    image: mcr.microsoft.com/playwright:focal
+    build:
+      context: playwright-build
     container_name: ddev-${DDEV_SITENAME}-playwright
     hostname: ${DDEV_SITENAME}-playwright
     # These labels ensure this service is discoverable by ddev.
     labels:
       com.ddev.site-name: ${DDEV_SITENAME}
       com.ddev.approot: $DDEV_APPROOT
     environment:
-      NETWORK_IFACE: eth0
+      # Modify the PLAYWRIGHT_TEST_DIR folder path to suit your needs
+      - PLAYWRIGHT_TEST_DIR=tests/Playwright
+      - NETWORK_IFACE=eth0
+      - DISPLAY=:1
+      - VIRTUAL_HOST=$DDEV_HOSTNAME
+      - HTTP_EXPOSE=8443:8444,9322:9323
+      - HTTPS_EXPOSE=8444:8444,9323:9323
+      - DDEV_UID=${DDEV_UID}
+      - DDEV_GID=${DDEV_GID}
+    expose:
+      - "8444"
+      - "9323"
     depends_on:
       - web
     volumes:
+      - .:/mnt/ddev_config
+      - ddev-global-cache:/mnt/ddev-global-cache
       - ../:/var/www/html:rw
     external_links:
       - ddev-router:${DDEV_HOSTNAME}
-    command: tail -f /dev/null
+    working_dir: /var/www/html

install.yaml

@@ -2,4 +2,10 @@ name: playwright
 
 # list of files and directories listed that are copied into project .ddev directory
 project_files:
+- commands/playwright/playwright
+- commands/playwright/playwright-install
+- playwright-build/Dockerfile
+- playwright-build/kasmvnc.yaml
+- playwright-build/xstartup
+- playwright-build/entrypoint.sh
 - docker-compose.playwright.yaml

playwright-build/Dockerfile

@@ -0,0 +1,57 @@
+#ddev-generated
+# Remove the line above if you don't want this file to be overwritten when you run
+# ddev get julienloizelet/ddev-playwright
+#
+# This file comes from https://github.com/julienloizelet/ddev-playwright
+#
+# If on arm64 machine, edit to use mcr.microsoft.com/playwright:focal-arm64
+FROM mcr.microsoft.com/playwright:focal
+
+# Debian images by default disable apt caching, so turn it on until we finish
+# the build.
+RUN mv /etc/apt/apt.conf.d/docker-clean /etc/apt/docker-clean-disabled
+
+USER root
+
+RUN --mount=type=cache,target=/var/cache/apt,sharing=locked \
+      --mount=type=cache,target=/var/lib/apt,sharing=locked \
+    apt-get update \
+    && apt-get install -y sudo
+
+# Give the pwuser user full `sudo` privileges
+RUN echo "pwuser ALL=(ALL) NOPASSWD: ALL" >> /etc/sudoers.d/pwuser \
+    && chmod 0440 /etc/sudoers.d/pwuser
+
+# CAROOT for `mkcert` to use, has the CA config
+ENV CAROOT=/mnt/ddev-global-cache/mkcert
+
+# Install the correct architecture binary of `mkcert`
+RUN export TARGETPLATFORM=linux/$(uname -m | sed 's/x86_64/amd64/;s/aarch64/arm64/') && mkdir -p /usr/local/bin && curl --fail -JL -s -o /usr/local/bin/mkcert "https://dl.filippo.io/mkcert/latest?for=${TARGETPLATFORM}"
+RUN chmod +x /usr/local/bin/mkcert
+
+
+# Install a window manager.
+RUN --mount=type=cache,target=/var/cache/apt,sharing=locked \
+      --mount=type=cache,target=/var/lib/apt,sharing=locked \
+    apt-get update \
+    && apt-get install -y icewm xauth
+
+# Install kasmvnc for remote access.
+RUN /bin/bash -c 'if [ $(arch) == "aarch64" ]; then KASM_ARCH=arm64; else KASM_ARCH=amd64; fi; wget https://github.com/kasmtech/KasmVNC/releases/download/v1.1.0/kasmvncserver_bullseye_1.1.0_${KASM_ARCH}.deb'
+RUN --mount=type=cache,target=/var/cache/apt,sharing=locked \
+      --mount=type=cache,target=/var/lib/apt,sharing=locked \
+    apt-get install -y ./kasmvncserver*.deb
+
+# We're done with apt so disable caching again for the final image.
+RUN mv /etc/apt/docker-clean-disabled /etc/apt/apt.conf.d/docker-clean
+
+# prepare KasmVNC
+RUN sudo -u pwuser mkdir /home/pwuser/.vnc
+COPY kasmvnc.yaml xstartup /home/pwuser/.vnc/
+RUN chown pwuser:pwuser /home/pwuser/.vnc/*
+RUN sudo -u pwuser touch /home/pwuser/.vnc/.de-was-selected
+RUN sudo -u pwuser /bin/bash -c 'echo -e "secret\nsecret\n" | kasmvncpasswd -wo -u pwuser' # We actually disable auth, but KASM complains without it
+
+
+COPY entrypoint.sh /root/entrypoint.sh
+ENTRYPOINT "/root/entrypoint.sh"

playwright-build/docker-compose.yml

@@ -0,0 +1,23 @@
+# This file exists just to aid with local debugging
+services:
+    dummy_playwright:
+        build:
+            context: .
+        environment:
+            - PLAYWRIGHT_TEST_DIR=tests/Playwright
+            - NETWORK_IFACE=eth0
+            - DISPLAY=:1
+            - VIRTUAL_HOST=$DDEV_HOSTNAME
+            - HTTP_EXPOSE=8443:8444,9323:9324
+            - HTTPS_EXPOSE=8444:8444,9324:9324
+            - DDEV_UID=1000
+            - DDEV_GID=1000
+        command: tail -F anything
+#        command: |
+#            tail -F foo
+#            printenv
+#            sudo usermod -u ${DDEV_UID} pwuser
+#            sudo groupmod -g ${DDEV_GID} pwuser
+#            sudo chgrp -R ${DDEV_GID}  /etc/ssl/private
+#            mkcert -install
+#            vncserver -fg

playwright-build/entrypoint.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+#ddev-generated
+# Remove the line above if you don't want this file to be overwritten when you run
+# ddev get julienloizelet/ddev-playwright
+#
+# This file comes from https://github.com/julienloizelet/ddev-playwright
+#
+
+# Change pwuser IDs to the host IDs supplied by DDEV
+usermod -u ${DDEV_UID} pwuser
+groupmod -g ${DDEV_GID} pwuser
+usermod -a -G ssl-cert pwuser
+
+# Install DDEV certificate
+mkcert -install
+
+# Run CMD from parameters as pwuser
+sudo -u pwuser vncserver -fg -disableBasicAuth

playwright-build/kasmvnc.yaml

@@ -0,0 +1,14 @@
+#ddev-generated
+# Remove the line above if you don't want this file to be overwritten when you run
+# ddev get julienloizelet/ddev-playwright
+#
+# This file comes from https://github.com/julienloizelet/ddev-playwright
+#
+logging:
+    log_writer_name: all
+    log_dest: syslog
+    level: 100
+
+network:
+    ssl:
+        require_ssl: false

playwright-build/xstartup

@@ -0,0 +1,32 @@
+#!/bin/sh
+#ddev-generated
+# Remove the line above if you don't want this file to be overwritten when you run
+# ddev get julienloizelet/ddev-playwright
+#
+# This file comes from https://github.com/julienloizelet/ddev-playwright
+#
+
+export DISPLAY=:1
+
+unset SESSION_MANAGER
+unset DBUS_SESSION_BUS_ADDRESS
+OS=`uname -s`
+if [ $OS = 'Linux' ]; then
+  case "$WINDOWMANAGER" in
+    *gnome*)
+      if [ -e /etc/SuSE-release ]; then
+        PATH=$PATH:/opt/gnome/bin
+        export PATH
+      fi
+      ;;
+  esac
+fi
+if [ -x /etc/X11/xinit/xinitrc ]; then
+  exec /etc/X11/xinit/xinitrc
+fi
+if [ -f /etc/X11/xinit/xinitrc ]; then
+  exec sh /etc/X11/xinit/xinitrc
+fi
+[ -r $HOME/.Xresources ] && xrdb $HOME/.Xresources
+xterm -geometry 80x24+10+10 -ls -title "$VNCDESKTOP Desktop" &
+icewm-session

tests/project_root/tests/Playwright/.env.example

@@ -0,0 +1,3 @@
+BASEURL="https://ddev-playwright-test.ddev.site"
+
+PAGE_URL="/home.php"

tests/project_root/tests/Playwright/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+pw-browsers
+test-results
+.env
+yarn.lock

tests/project_root/tests/Playwright/package.json

@@ -0,0 +1,7 @@
+{
+  "license": "MIT",
+  "dependencies": {
+      "@playwright/test": "^1.34.2",
+      "dotenv": "^16.0.3"
+  }
+}