WDIO

Docker setup for WebdriverIO with automatic screenshots, image diffing and screen recording support for containerized versions of Chrome and Firefox, Safari Mobile and Chrome Mobile via Appium and Safari on MacOS as well as Internet Explorer and Microsoft Edge on Windows 10.

• Usage
  • Chrome
  • Firefox
  • Safari
  • Mobile Safari
  • Mobile Chrome
  • Internet Explorer
  • Microsoft Edge
  • Shutdown
• License
• Author

Usage

Chrome

Run the tests with Chrome:

docker-compose run --rm wdio [chrome]

Connect to Chrome via VNC:

open vnc://user:secret@localhost:5900

Please Note:
To be able to see Chrome running via VNC or screen recordings, disable headless mode in chrome.js.

Firefox

Run the tests with Firefox:

docker-compose run --rm wdio firefox

Connect to Firefox via VNC:

open vnc://user:secret@localhost:5901

Safari

To run the tests with Safari on MacOS, follow these steps:

1. Configure Safari to Enable WebDriver Support.

2. Download and install MJPEG Server as mjpeg-server in your PATH and install FFmpeg via Homebrew:

   brew install ffmpeg

3. Add the example host to your /etc/hosts file:

   printf '127.0.0.1\t%s\n' example | sudo tee -a /etc/hosts

4. Start safaridriver and mjpeg-server with the provided helper script:

   bin/safaridriver.sh [screen index]

5. Run the tests with Safari:

   docker-compose run --rm wdio safari

Mobile Safari

To run the tests with Mobile Safari on iOS Simulator, follow these steps:

1. Install Xcode from the Mac App Store.

2. Install the Xcode Command Line Tools:

   xcode-select --install

3. Install Node.JS and Carthage via Homebrew:

   brew install node carthage

4. Make sure the necessary Appium dependencies for iOS testing are installed:

   npx appium-doctor --ios

5. Install Appium as global NPM package:

   npm install -g appium

6. Add the example host to your /etc/hosts file:

   printf '127.0.0.1\t%s\n' example | sudo tee -a /etc/hosts

7. Start appium with the provided helper script:

   bin/appium.sh

8. Run the tests with Mobile Safari:

   docker-compose run --rm wdio mobile-safari

   To run the tests in landscape orientation, provide the ORIENTATION environment variable:

   ORIENTATION=LANDSCAPE docker-compose run --rm wdio mobile-safari

   To use a different iOS device than defined in the config, provide the DEVICE_NAME environment variable:

   DEVICE_NAME='iPad Air' docker-compose run --rm wdio mobile-safari

   To use a different iOS version than defined in the config, provide the PLATFORM_VERSION environment variable:

   PLATFORM_VERSION=12.1 docker-compose run --rm wdio mobile-safari

Mobile Chrome

To run the tests with Mobile Chrome on Android Simulator, follow these steps:

1. Download Android Studio and on first start, follow the instructions to install the Android SDK and Emulator.

2. Add the following lines to your ~/.profile to make the JDK included in Android Studio and the installed Android SDK available to Appium:

   export JAVA_HOME='/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home'
   export PATH="$JAVA_HOME/bin:$PATH"
   export ANDROID_HOME=~/Library/Android/sdk

3. Install Node.JS via Homebrew:

   brew install node

4. Make sure the necessary Appium dependencies for Android testing are installed:

   npx appium-doctor --android

5. Install Appium as global NPM package:

   npm install -g appium [--chromedriver_version=VERSION]

   Make sure to configure appium with a Chromedriver version compatible with the version of Chrome running in your Android device. If appium has already been installed with an incompatible chromedriver version, you might want to uninstall and reinstall it with the proper --chromedriver_version argument.

6. Start appium with the provided helper script:

   bin/appium.sh

7. Start the Android Virtual Device with a custom /etc/hosts file:

   bin/android-emulator.sh -hosts etc/android.hosts

8. Run the tests with Mobile Chrome:

   docker-compose run --rm wdio mobile-chrome

   To run the tests in landscape orientation, provide the ORIENTATION environment variable:

   ORIENTATION=LANDSCAPE docker-compose run --rm wdio mobile-chrome

Internet Explorer

Please Note:
This guide assumes that a system with Windows 10 has been set up, e.g. using the "MSEdge on Win10" virtual machine image (which also includes Internet Explorer) from Microsoft's Free VMs site.

To run the tests with Internet Explorer, follow these steps:

1. Set "Change the size of text, apps, and other items" to 100% in Windows Display Settings.
   If the option is grayed out, make sure the graphics configuration allows changing the scaling setting (see e.g. Parallels article #123951).

2. Make sure the Internet Explorer Zoom level is set to 100% so that the native mouse events can be set to the correct coordinates.

3. Create a .env file in the same directory as docker-compose.yml and add the following environment variables:

   SERVER_HOST=<DOCKER_HOST_IP>
   SERVER_PORT=8080
   WINDOWS_HOST=<WINDOWS_HOST_IP>
   WINDOWS_ASSETS_DIR=C:\Users\<USERNAME>\Desktop\assets\

   Make sure that the DOCKER_HOST_IP is accessible from the Windows machine and the WINDOWS_HOST_IP is accessible from a Docker container (see also the FAQ).
   Also make sure that WINDOWS_ASSETS_DIR points to a valid folder path and ends with a backslash.

4. Edit the example host entry in etc/windows.hosts and set its IP address to the SERVER_HOST IP defined in the .env file.

5. Copy bin/webdriver.ps1 and etc/windows.hosts to the same folder in the Windows machine (e.g. the Desktop).
   Also copy the files in the assets directory to the folder defined as WINDOWS_ASSETS_DIR.

6. Create a shortcut to webdriver.ps1 (via "Right-Click" → "Create shortcut"), then open the properties dialog for the shortcut (via "Right-Click" → "Properties") and set the Target property to the following value:

   powershell -ExecutionPolicy ByPass -File webdriver.ps1

   Click "OK" to save the changes to the shortcut.

7. Double-Click on the webdriver shortcut to setup and start the servers.
   Allow nginx and MJPEGServer to communicate on all networks in the Windows Defender Firewall dialog.

8. Run the tests with Internet Explorer:

   docker-compose run --rm wdio ie

Microsoft Edge

Please Note:
This guide assumes that a system with Windows 10 has been set up.
The scripted installation of MicrosoftWebDriver also requires 17763 as minimum Windows build version.

To run the tests with Microsoft Edge, follow these steps:

1. Create a .env file in the same directory as docker-compose.yml and add the following environment variables:

   SERVER_HOST=<DOCKER_HOST_IP>
   SERVER_PORT=8080
   WINDOWS_HOST=<WINDOWS_HOST_IP>
   WINDOWS_ASSETS_DIR=C:\Users\<USERNAME>\Desktop\assets\

   Make sure that the DOCKER_HOST_IP is accessible from the Windows machine and the WINDOWS_HOST_IP is accessible from a Docker container (see also the FAQ).
   Also make sure that WINDOWS_ASSETS_DIR points to a valid folder path and ends with a backslash.

2. Edit the example host entry in etc/windows.hosts and set its IP address to the SERVER_HOST IP defined in the .env file.

3. Copy bin/webdriver.ps1 and etc/windows.hosts to the same folder in the Windows machine (e.g. the Desktop).
   Also copy the files in the assets directory to the folder defined as WINDOWS_ASSETS_DIR.

4. Create a shortcut to webdriver.ps1 (via "Right-Click" → "Create shortcut"), then open the properties dialog for the shortcut (via "Right-Click" → "Properties") and set the Target property to the following value:

   powershell -ExecutionPolicy ByPass -File webdriver.ps1

   Click "OK" to save the changes to the shortcut.

5. Double-Click on the webdriver shortcut to setup and start the servers.
   Allow nginx and MJPEGServer to communicate on all networks in the Windows Defender Firewall dialog.

6. Run the tests with Microsoft Edge:

   docker-compose run --rm wdio edge

Shutdown

Stop and remove the container set:

docker-compose down

License

Released under the MIT license.

Author

Sebastian Tschan