Exposed Selenium VNC to host.

.ahoy.yml

@@ -37,6 +37,7 @@ commands:
       COMPOSE_PROJECT_NAME=${COMPOSE_PROJECT_NAME:-${PWD##*/}} \
       DREVOPS_HOST_DB_PORT=$(docker compose port mariadb 3306 2>/dev/null | cut -d : -f 2) \
       DREVOPS_HOST_SOLR_PORT=$(docker compose port solr 8983 2>/dev/null | cut -d : -f 2) \
+      DREVOPS_HOST_SELENIUM_VNC_PORT=$(docker compose port chrome 7900 2>/dev/null | cut -d : -f 2) \
       DREVOPS_HOST_HAS_SEQUELACE=$(uname -a | grep -i -q darwin && mdfind -name 'Sequel Ace' 2>/dev/null | grep -q "Ace" && echo 1 || true) \
       ahoy cli ./scripts/drevops/info.sh "$@"
 

.scaffold/.ahoy.yml

@@ -9,6 +9,12 @@ commands:
       npm --prefix tests ci
       npm --prefix docs ci
 
+  docs:
+    name: Build Scaffold docs.
+    cmd: |
+      npm --prefix docs ci
+      npm --prefix docs run start
+
   lint:
     name: Lint Scaffold project.
     cmd: |

.scaffold/docs/content/tools/behat.mdx

@@ -169,3 +169,32 @@ There are also example tests in the [`tests/behat/features`](https://github.com/
 directory that can be used as a starting point for writing tests. These tests
 define `@smoke` tests for the homepage and login page as well as tests for
 contributed modules.
+
+## Connecting to the browser
+
+For `@javascript` tests, Behat uses Selenium to connect to the browser. The
+browser runs within a container and can be observed from the host machine by
+using a browser thanks to the VNC server running in the container and [noVNC](https://novnc.com/).
+
+Run
+
+```shell
+ahoy info
+```
+and click on the link next to `Selenium VNC URL on host` to open the browser.
+
+Or use the following command to get the port number:
+```shell
+docker compose port chrome 7900
+```
+and open `http://localhost:<port>/?autoconnect=1&password=secret` in the browser.
+
+:::tip
+
+    When running tests, you can add `And I wait for 60 seconds` step to suspend
+    the test execution for a minute and interact with the headless browser in a
+    container through a browser on your host machine.
+
+:::
+
+![behat-novnc.gif](/img/behat-novnc.gif)

.scaffold/docs/cspell.json

@@ -34,6 +34,7 @@
         "localdev",
         "mglaman",
         "minimised",
+        "novnc",
         "oomphinc",
         "optimise",
         "optimised",

.scaffold/tests/bats/_helper.workflow.bash

@@ -303,6 +303,7 @@ assert_ahoy_info() {
     assert_output_not_contains "DB-in-image             : ${db_image}"
   fi
   assert_output_contains "Solr URL on host            :"
+  assert_output_contains "Selenium VNC URL on host    :"
   assert_output_contains "Mailhog URL                 : http://mailhog.docker.amazee.io/"
   assert_output_contains "Xdebug                      : Disabled ('ahoy debug' to enable)"
   assert_output_not_contains "Containers are not running."

.scaffold/tests/bats/fixtures/docker-compose.env.json

@@ -47,6 +47,13 @@
             "networks": {
                 "default": null
             },
+            "ports": [
+                {
+                    "mode": "ingress",
+                    "protocol": "tcp",
+                    "target": 7900
+                }
+            ],
             "shm_size": "1073741824",
             "volumes": [
                 {

.scaffold/tests/bats/fixtures/docker-compose.env_local.json

@@ -47,6 +47,13 @@
             "networks": {
                 "default": null
             },
+            "ports": [
+                {
+                    "mode": "ingress",
+                    "protocol": "tcp",
+                    "target": 7900
+                }
+            ],
             "shm_size": "1073741824",
             "volumes": [
                 {

.scaffold/tests/bats/fixtures/docker-compose.env_mod.json

@@ -47,6 +47,13 @@
             "networks": {
                 "default": null
             },
+            "ports": [
+                {
+                    "mode": "ingress",
+                    "protocol": "tcp",
+                    "target": 7900
+                }
+            ],
             "shm_size": "1073741824",
             "volumes": [
                 {

.scaffold/tests/bats/fixtures/docker-compose.noenv.json

@@ -47,6 +47,13 @@
             "networks": {
                 "default": null
             },
+            "ports": [
+                {
+                    "mode": "ingress",
+                    "protocol": "tcp",
+                    "target": 7900
+                }
+            ],
             "shm_size": "1073741824",
             "volumes": [
                 {

docker-compose.yml

@@ -202,7 +202,7 @@ services:
       context: .
       dockerfile: .docker/clamav.dockerfile
     ports:
-      - "3310" # Find port on host with `docker-compose port clamav 3310`.
+      - "3310" # Find port on host with `docker compose port clamav 3310`.
     environment:
       << : *default-environment
     networks:
@@ -219,7 +219,7 @@ services:
   chrome:
     image: selenium/standalone-chromium:128.0
     ports:
-      - "7900" # Find port on host with `docker-compose port chrome 7900`.
+      - "7900" # Find port on host with `docker compose port chrome 7900`.
     shm_size: '1gb' # Increase '/dev/shm' partition size to avoid browser crashing.
     <<: *default-volumes # Use default volumes to provide access to test fixtures.
     environment:

scripts/drevops/info.sh

@@ -44,6 +44,9 @@ fi
 if [ -n "${DREVOPS_HOST_SOLR_PORT:-}" ]; then
   note "Solr URL on host            : http://127.0.0.1:${DREVOPS_HOST_SOLR_PORT}"
 fi
+if [ -n "${DREVOPS_HOST_SELENIUM_VNC_PORT:-}" ]; then
+  note "Selenium VNC URL on host    : http://localhost:${DREVOPS_HOST_SELENIUM_VNC_PORT}/?autoconnect=1&password=secret"
+fi
 note "Mailhog URL                 : http://mailhog.docker.amazee.io/"
 note "Xdebug                      : $(php -v | grep -q Xdebug && echo "Enabled ('ahoy up cli' to disable)" || echo "Disabled ('ahoy debug' to enable)")"
 if [ "${DREVOPS_SHOW_LOGIN}" = "1" ] || [ -n "${1:-}" ]; then