Selenium debug via VNC viewer (#3)

Author: mstrelan

.env.dist

@@ -1,6 +1,19 @@
 WEB_PORT=8080
 MYSQL_PORT=3306
-CHROME_PORT=9515
+SELENIUM_PORT=4444
+VNC_PORT=5900
 BASE_URI=http://127.0.0.1:8080
 UID=1000
 GID=1000
+
+## HEADLESS CHROME
+# SELENIUM_IMAGE=selenium/standalone-chrome
+# MINK_DRIVER_ARGS_WEBDRIVER='["chrome", {"browserName":"chrome", "goog:chromeOptions":{"args":["--no-sandbox", "--disable-dev-shm-usage", "--headless"], "w3c": false}}, "http://127.0.0.1:4444/wd/hub"]'
+
+## CHROME DEBUG
+# SELENIUM_IMAGE=selenium/standalone-chrome-debug
+# MINK_DRIVER_ARGS_WEBDRIVER='["chrome", {"browserName":"chrome", "goog:chromeOptions":{"args":["--no-sandbox", "--disable-dev-shm-usage"], "w3c": false}}, "http://127.0.0.1:4444/wd/hub"]'
+
+## FIREFOX DEBUG
+# SELENIUM_IMAGE=selenium/standalone-firefox-debug
+# MINK_DRIVER_ARGS_WEBDRIVER='["firefox", {"browserName":"firefox"}, "http://127.0.0.1:4444/wd/hub"]'

README.md

@@ -78,7 +78,7 @@ phpunit app/core/tests/Drupal/Tests/Core/DrupalKernel/
 ## Debugging
 
 Xdebug can be enabled for HTTP requests via the Xdebug helper browser extension:
-  
+
   * Firefox - [Xdebug Helper for Firefox](https://addons.mozilla.org/en-US/firefox/addon/xdebug-helper-for-firefox/)
   * Chrome - [Xdebug helper](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc)
 
@@ -92,6 +92,14 @@ docker-compose exec php-cli bash
 XDEBUG_SESSION=1 phpunit app/core/tests/Drupal/Tests/Core/DrupalTest.php --filter=testSetContainer
 ```
 
+## Debugging WebDriver tests with Selenium and VNC
+
+The `.env.dist` file contains examples for how to configure the `selenium` service to use either
+Chrome or Firefox in debug mode. This exposes a VNC port (default 5900) that you can connect to
+in order to see tests running in the browser. Using a VNC client such as Remmina or VNC Viewer,
+simply connect to port `127.0.0.1:5900` with the password `secret`. If you've changed the `VNC_PORT`
+environment variable be sure to connect to that port instead.
+
 ## Contributing
 
 Once you're up and running you'll have Drupal core checked out in the app directory. From here you

docker-compose.yml

@@ -4,7 +4,8 @@ services:
     ports:
       - "${WEB_PORT:-8080}:8080"
       - "${MYSQL_PORT:-3306}:3306"
-      - "${CHROME_PORT:-9515}:9515"
+      - "${SELENIUM_PORT:-4444}:4444"
+      - "${VNC_PORT:-5900}:5900"
     extra_hosts:
       - "host.docker.internal:host-gateway"
     volumes:
@@ -37,6 +38,7 @@ services:
     environment:
       - DRUSH_OPTIONS_URI=${BASE_URI:-http://127.0.0.1:8080}
       - BROWSERTEST_OUTPUT_BASE_URL=${BASE_URI:-http://127.0.0.1:8080}
+      - MINK_DRIVER_ARGS_WEBDRIVER
       - PHP_IDE_CONFIG=serverName=localhost
     volumes:
       - ./:/data
@@ -45,6 +47,6 @@ services:
     image: skpr/mtk-mysql-empty:latest
     network_mode: service:nginx
 
-  chrome:
-    image: drupalci/webdriver-chromedriver:production
+  selenium:
+    image: ${SELENIUM_IMAGE:-selenium/standalone-chrome}
     network_mode: service:nginx

phpunit.xml

@@ -18,7 +18,7 @@
     <env name="SYMFONY_DEPRECATIONS_HELPER" value="disabled"/>
     <env name="MINK_DRIVER_CLASS" value=""/>
     <env name="MINK_DRIVER_ARGS" value=""/>
-    <env name="MINK_DRIVER_ARGS_WEBDRIVER" value='["chrome", {"browserName":"chrome","goog:chromeOptions":{"args":["--disable-gpu","--headless", "--no-sandbox", "--disable-dev-shm-usage"], "w3c": false}}, "http://127.0.0.1:9515"]'/>
+    <env name="MINK_DRIVER_ARGS_WEBDRIVER" value='["chrome", {"browserName":"chrome", "goog:chromeOptions":{"args":["--headless", "--no-sandbox", "--disable-dev-shm-usage"], "w3c": false}}, "http://127.0.0.1:4444/wd/hub"]'/>
   </php>
   <testsuites>
     <testsuite name="unit">